Create a file for the two themes.

Author: peeweetje

netflix-create-react-vite-app/src/styles/theme.tsx

@@ -13,6 +13,7 @@ declare module 'styled-components' {
       purple: string;
       lightPurple: string;
       yellow: string;
+      buttonText: string;
     };
     fontFamily: string;
     space: string[];
@@ -23,40 +24,4 @@ declare module 'styled-components' {
   }
 }
 
-export const theme: DefaultTheme = {
-  colors: {
-    grey: '#333',
-    black: '#000',
-    white: '#fff',
-    blue: '#8EB3CC',
-    purple:"#5928ed",
-    lightPurple:"#9b8bf4",
-    yellow:"#ffff00",
-    red: '#ff0000',
-    orange: '#FFA500',
-    green: '#00FF00',
-  },
-  fontFamily: 'Montserrat, sans-serif',
-  space: [
-    '0px',
-    '2px',
-    '4px',
-    '6px',
-    '8px',
-    '12px',
-    '16px',
-    '18px',
-    '20px',
-    '24px',
-    '32px',
-    '40px',
-    '64px',
-    '128px',
-    '256px',
-    '512px',
-  ],
-  fontSize: ['0.5rem', '0.7rem', '0.8rem', '1rem', '1.25rem', '1.5rem', '2rem', '2.5rem'],
-  borderRadius: ['2px', '4px', '6px', '8px'],
-  borderShadow: ['0 25px 100px -10px rgba(169, 154, 154, 0.54)'],
-  lineHeight: ['1.2', '1.3', '1.4', '1.5', '1.8', '2'],
-};
+

netflix-create-react-vite-app/src/styles/themes/themes.ts

@@ -0,0 +1,79 @@
+import { DefaultTheme } from 'styled-components';
+
+export const purpleTheme: DefaultTheme = {
+  colors: {
+    grey: '#333',
+    black: '#000',
+    white: '#fff',
+    blue: '#8EB3CC',
+    purple:"#5928ed",
+    lightPurple:"#9b8bf4",
+    yellow:"#ffff00",
+    red: '#ff0000',
+    orange: '#FFA500',
+    green: '#00FF00',
+    buttonText: '#fff',
+  },
+  fontFamily: 'Montserrat, sans-serif',
+  space: [
+    '0px',
+    '2px',
+    '4px',
+    '6px',
+    '8px',
+    '12px',
+    '16px',
+    '18px',
+    '20px',
+    '24px',
+    '32px',
+    '40px',
+    '64px',
+    '128px',
+    '256px',
+    '512px',
+  ],
+  fontSize: ['0.5rem', '0.7rem', '0.8rem', '1rem', '1.25rem', '1.5rem', '2rem', '2.5rem'],
+  borderRadius: ['2px', '4px', '6px', '8px'],
+  borderShadow: ['0 25px 100px -10px rgba(169, 154, 154, 0.54)'],
+  lineHeight: ['1.2', '1.3', '1.4', '1.5', '1.8', '2'],
+};
+
+export const yellowTheme: DefaultTheme = {
+  colors: {
+    grey: '#333',
+    black: '#000',
+    white: '#fff',
+    blue: '#8EB3CC',
+    purple:"#ffff00", 
+    lightPurple:"#FFFF99", 
+    yellow:"#ffff00",
+    red: '#ff0000',
+    orange: '#FFA500',
+    green: '#00FF00',
+    buttonText: '#000',
+  },
+  fontFamily: 'Montserrat, sans-serif',
+  space: [
+    '0px',
+    '2px',
+    '4px',
+    '6px',
+    '8px',
+    '12px',
+    '16px',
+    '18px',
+    '20px',
+    '24px',
+    '32px',
+    '40px',
+    '64px',
+    '128px',
+    '256px',
+    '512px',
+  ],
+  fontSize: ['0.5rem', '0.7rem', '0.8rem', '1rem', '1.25rem', '1.5rem', '2rem', '2.5rem'],
+  borderRadius: ['2px', '4px', '6px', '8px'],
+  borderShadow: ['0 25px 100px -10px rgba(169, 154, 154, 0.54)'],
+  lineHeight: ['1.2', '1.3', '1.4', '1.5', '1.8', '2'],
+};