feat: add theme manager

awesome!

inertia/styles/document.ts

@@ -1,19 +0,0 @@
-import { css } from '@emotion/react';
-import { theme } from './theme';
-
-const documentStyle = css({
-  'html, body, #app': {
-    height: '100svh',
-    width: '100svw',
-    fontFamily: "'Poppins', sans-serif",
-    fontSize: '14px',
-    color: theme.colors.font,
-    backgroundColor: theme.colors.background,
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'column',
-    overflow: 'hidden',
-  },
-});
-
-export default documentStyle;

inertia/styles/reset.ts

@@ -1,70 +0,0 @@
-import { css } from '@emotion/react';
-import { theme } from '~/styles/theme';
-
-export const cssReset = css({
-  '*': {
-    boxSizing: 'border-box',
-    outline: 0,
-    margin: 0,
-    padding: 0,
-    scrollBehavior: 'smooth',
-  },
-
-  '.reset': {
-    backgroundColor: 'inherit',
-    color: 'inherit',
-    padding: 0,
-    margin: 0,
-    border: 0,
-  },
-
-  a: {
-    width: 'fit-content',
-    color: '#3f88c5',
-    textDecoration: 'none',
-    borderBottom: '1px solid transparent',
-  },
-
-  b: {
-    fontWeight: 600,
-    letterSpacing: '0.5px',
-  },
-
-  'h1, h2, h3, h4, h5, h6': {
-    fontWeight: '500',
-    color: theme.colors.primary,
-  },
-
-  kbd: {
-    textShadow: '0 1px 0 #fff',
-    fontSize: '12px',
-    color: 'rgb(51, 51, 51)',
-    backgroundColor: 'rgb(247, 247, 247)',
-    padding: '0.25em 0.5em',
-    borderRadius: '3px',
-    border: '1px solid rgb(204, 204, 204)',
-    boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset',
-    display: 'inline-block',
-  },
-
-  /* width */
-  '::-webkit-scrollbar': {
-    height: '0.45em',
-    width: '0.45em',
-  },
-
-  /* Track */
-  '::-webkit-scrollbar-track': {
-    borderRadius: theme.border.radius,
-  },
-
-  /* Handle */
-  '::-webkit-scrollbar-thumb': {
-    background: theme.colors.blue,
-    borderRadius: theme.border.radius,
-
-    '&:hover': {
-      background: theme.colors.darkBlue,
-    },
-  },
-});

inertia/styles/theme.ts

@@ -1,78 +1,80 @@
 import { Theme } from '@emotion/react';
 
-const lightBlack = '#555';
-const black = '#333';
-const darkBlack = '#111';
+export const primaryColor = '#3f88c5';
+export const primaryDarkColor = '#005aa5';
 
-const white = '#fff';
-
-const lightestGrey = '#dadce0';
-const lightGrey = '#f0eef6';
-const grey = '#888888';
-const darkGrey = '#4b5563';
-
-const lightestBlue = '#d3e8fa';
 const lightBlue = '#82c5fede';
-const blue = '#3f88c5';
-const darkBlue = '#005aa5';
-const darkestBlue = '#1f2937';
+const darkBlue = primaryDarkColor;
 
-const lightestRed = '#ffbabab9';
 const lightRed = '#FF5A5A';
-const red = '#d8000c';
-
-const lightGreen = '#c1ffbab9';
-const green = 'green';
 
 const yellow = '#ffc107';
 
-export const theme: Theme = {
+const border: Theme['border'] = {
+  radius: '3px',
+};
+
+const media: Theme['media'] = {
+  mobile: '768px',
+  tablet: '1024px',
+  small_desktop: '1280px',
+  medium_desktop: '1440px',
+  large_desktop: '1920px',
+  xlarge_desktop: '2560px',
+};
+
+const transition: Theme['transition'] = {
+  delay: '0.15s',
+};
+
+export const lightTheme: Theme = {
   colors: {
-    font: black,
-    background: lightGrey,
-    primary: blue,
+    font: '#333',
+    background: '#f0eef6',
+    primary: primaryColor,
+    secondary: '#fff',
 
-    lightBlack,
-    black,
-    darkBlack,
+    white: '#fff',
 
-    white,
+    lightGrey: '#dadce0',
+    grey: '#888888',
 
-    lightestGrey,
-    lightGrey,
-    grey,
-    darkGrey,
-
-    lightestBlue,
     lightBlue,
-    blue,
+    blue: primaryColor,
     darkBlue,
-    darkestBlue,
 
-    lightestRed,
     lightRed,
-    red,
-
-    lightGreen,
-    green,
 
     yellow,
   },
 
-  border: {
-    radius: '3px',
-  },
-
-  media: {
-    mobile: '768px',
-    tablet: '1024px',
-    small_desktop: '1280px',
-    medium_desktop: '1440px',
-    large_desktop: '1920px',
-    xlarge_desktop: '2560px',
-  },
-
-  transition: {
-    delay: '0.15s',
-  },
+  border,
+  media,
+  transition,
+};
+
+export const darkTheme: Theme = {
+  colors: {
+    font: '#f0eef6',
+    background: '#222831',
+    primary: '#4fadfc',
+    secondary: '#323a47',
+
+    white: '#fff',
+
+    lightGrey: '#323a47',
+    grey: '#888888',
+
+    lightBlue,
+    blue: '#4fadfc',
+    darkBlue,
+
+    lightRed,
+
+    yellow,
+  },
+
+  border,
+  media,
+  transition,
 };