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'

export const GlobalStyle = createGlobalStyle`
  html,
  body {
    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 const lightTheme: DefaultTheme = {
  themeName: "Light Theme",
  themeId: 0,
  colors: {
    background: '#ffffff',
    primary: '#00aaff',
    secondary:'#ff5300',
    online: '#00ff00',
    loading: '#ff5300',
    offline: '#ff0000',
  },
}

export const darkTheme: DefaultTheme = {
  themeName: "Dark Theme",
  themeId: 1,
  colors: {
    background: '#1f1f1f',
    primary: '#00aaff',
    secondary:'#ff5300',
    online: '#00ff00',
    loading: '#ff5300',
    offline: '#ff0000',
    },
}

export const amoledTheme: DefaultTheme = {
  themeName: "AMOLED Theme",
  themeId: 2,
  colors: {
    background: '#000000',
    primary: '#00aaff',
    secondary:'#ff5300',
    online: '#00ff00',
    loading: '#ff5300',
    offline: '#ff0000',
  },
}

export const amoled2Theme: DefaultTheme = {
  themeName: "AMOLED Theme 2",
  themeId: 3,
  colors: {
    background: '#000000',
    primary: '#00ffaa',
    secondary:'#aa00ff',
    online: '#00ff00',
    loading: '#ff5300',
    offline: '#ff0000',
  },
}