main-site/components/themes.tsx

// Probably a good idea to spread this out into multiple files under a folder once it gets bigger
import { createGlobalStyle, DefaultTheme } from 'styled-components'

// TODO: unsure whether needed
/* const GlobalStyle = createGlobalStyle`
  html,
  body {
    color: ${({ theme }) => theme.colors.primary};
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
  * {
    box-sizing: border-box;
  }
`

export default GlobalStyle; */

export const lightTheme: DefaultTheme = {
  themeName: "Light Theme",
  themeId: 0,
  colors: {
    background: '#ffffff',
    primary: '#00aaff',
    secondary:'#ffaa00',
  },
}

export const darkTheme: DefaultTheme = {
  themeName: "Dark Theme",
  themeId: 1,
  colors: {
    background: '#1f1f1f',
    primary: '#00aaff',
    secondary:'#ffaa00',
  },
}

export const amoledTheme: DefaultTheme = {
  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',
  },
}