Modified themes

components/themes.tsx

@@ -1,7 +1,7 @@
 // Probably a good idea to spread this out into multiple files under a folder once it gets bigger
 import { createGlobalStyle, DefaultTheme } from 'styled-components'
 
-// unsure whether needed
+// TODO: unsure whether needed
 /* const GlobalStyle = createGlobalStyle`
   html,
   body {
@@ -24,7 +24,8 @@ import { createGlobalStyle, DefaultTheme } from 'styled-components'
 export default GlobalStyle; */
 
 export const lightTheme: DefaultTheme = {
-  themeId: 1,
+  themeName: "Light Theme",
+  themeId: 0,
   colors: {
     background: '#ffffff',
     primary: '#00aaff',
@@ -33,7 +34,8 @@ export const lightTheme: DefaultTheme = {
 }
 
 export const darkTheme: DefaultTheme = {
-  themeId: 2,
+  themeName: "Dark Theme",
+  themeId: 1,
   colors: {
     background: '#1f1f1f',
     primary: '#00aaff',
@@ -42,10 +44,21 @@ export const darkTheme: DefaultTheme = {
 }
 
 export const amoledTheme: DefaultTheme = {
-  themeId: 3,
+  themeName: "AMOLED Theme",
+  themeId: 2,
   colors: {
     background: '#000000',
     primary: '#00aaff',
     secondary:'#ffaa00',
   },
 }
+
+export const amoled2Theme: DefaultTheme = {
+  themeName: "AMOLED Theme 2",
+  themeId: 3,
+  colors: {
+    background: '#000000',
+    primary: '#00ffaa',
+    secondary:'#aa00ff',
+  },
+}

styled.d.ts

@@ -2,11 +2,12 @@ import 'styled-components'
 
 declare module 'styled-components' {
   export interface DefaultTheme {
+    themeName: string,
     themeId: number,
     colors: {
       background: string,
-      primary: string
+      primary: string,
-      secondary: string
+      secondary: string,
     }
   }
 }