Add dark theme

src/components/layouts/Honkai3rdLayout.tsx

@@ -49,7 +49,7 @@ const Honkai3rdLayout: React.FC = ({ children }) => {
           width: ['100%', 240],
           borderRightWidth: 1,
           borderRightStyle: 'solid',
-          borderRightColor: 'gray.2',
+          borderRightColor: 'border',
           overflowY: 'auto',
           overflowX: 'hidden',
           display: [hiddenMobileNav ? 'none' : 'block', 'block'],

src/components/organisms/Breadcrumb.tsx

@@ -20,7 +20,9 @@ const Breadcrumb = ({ items }: BreadcrumbProps) => {
     <Flex
       mb={3}
       sx={{
-        backgroundColor: 'gray.2',
+        backgroundColor: 'altBackground',
+        transition:
+          'background-color 300ms ease-in-out, color 300ms ease-in-out',
         paddingY: 2,
         paddingX: 4,
         borderRadius: 8,

src/components/organisms/GanttChart.tsx

@@ -82,10 +82,10 @@ const GanttChart = ({
           height: totalRow * 50 + 40,
           borderBottomStyle: 'solid',
           borderBottomWidth: 1,
-          borderBottomColor: 'gray.5',
+          borderBottomColor: 'border',
           borderTopStyle: 'solid',
           borderTopWidth: 1,
-          borderTopColor: 'gray.5',
+          borderTopColor: 'border',
         }}
       >
         {times((index) => {
@@ -97,7 +97,7 @@ const GanttChart = ({
                 height: totalRow * 50 + 40,
                 borderRightStyle: 'solid',
                 borderRightWidth: 1,
-                borderRightColor: index % 7 === 6 ? 'gray.5' : 'gray.3',
+                borderRightColor: index % 7 === 6 ? 'border' : 'altBorder',
                 left: (index + 1) * 40 - 1 - 20,
               }}
             />
@@ -111,7 +111,7 @@ const GanttChart = ({
               key={`week-start-date-${index}`}
               sx={{
                 position: 'absolute',
-                color: 'gray.5',
+                color: 'border',
                 zIndex: 21,
                 top: 0,
                 left: weekNumber * 280 - 15,
@@ -235,10 +235,10 @@ const GanttChart = ({
               sx={{
                 boxSizing: 'border-box',
                 position: 'absolute',
-                borderColor: 'gray.5',
+                borderColor: 'border',
                 borderWidth: 1,
                 borderStyle: 'solid',
-                backgroundColor: 'white',
+                backgroundColor: 'background',
                 width: length,
                 left: offset,
                 top: (item.row - 1) * 50 + 20,

src/components/organisms/Honkai3rdNavigator.tsx

@@ -8,9 +8,11 @@ import {
   Box,
   Flex,
   IconButton,
+  Switch,
 } from '@theme-ui/components'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
+import { useColorMode } from 'theme-ui'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { useTranslation } from '../../lib/i18n'
 import SquareImageBox from '../atoms/SquareImageBox'
@@ -23,6 +25,7 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
   const router = useRouter()
   const { pathname, asPath, query, locale } = router
   const { t } = useTranslation()
+  const [colorMode, setColorMode] = useColorMode()
   return (
     <Box
       sx={{
@@ -83,6 +86,24 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
           <Icon path={mdiMenuSwap} size='20px' />
         </NavLink>
       </NextLink>
+
+      <Box>
+        <Switch
+          checked={colorMode === 'dark'}
+          onChange={(event) => {
+            setColorMode(event.target.checked ? 'dark' : 'default')
+          }}
+          sx={{
+            'input ~ &': {
+              backgroundColor: 'muted',
+            },
+            'input:checked ~ &': {
+              backgroundColor: 'primary',
+            },
+          }}
+          label={colorMode === 'default' ? '☀️' : '🌙'}
+        />
+      </Box>
     </Box>
   )
 }

src/lib/theme.ts

@@ -3,6 +3,10 @@ import { colors } from './colors'
 
 export const theme: Theme = {
   breakpoints: ['576px', '768px', '992px', '1200px'],
+  config: {
+    initialColorModeName: 'light',
+    printColorModeName: 'light',
+  },
   colors: {
     ...colors,
     white: '#fff',
@@ -11,7 +15,7 @@ export const theme: Theme = {
     background: '#fff',
     primary: '#007bff',
     secondary: '#6c757d',
-    muted: '#dee2e6',
+    muted: colors.gray[5],
     success: '#28a745',
     info: '#17a2b8',
     warning: '#ffc107',
@@ -20,6 +24,32 @@ export const theme: Theme = {
     dark: '#343a40',
     textMuted: '#6c757d',
     transparent: 'transparent',
+    border: colors.gray[5],
+    altBackground: colors.gray[2],
+    altBorder: colors.gray[3],
+    modes: {
+      dark: {
+        ...colors,
+        white: '#fff',
+        black: '#000',
+        text: '#dedede',
+        background: '#202124',
+        primary: colors.blue[4],
+        secondary: '#6c757d',
+        muted: '#dee2e6',
+        success: '#28a745',
+        info: '#17a2b8',
+        warning: '#ffc107',
+        danger: '#dc3545',
+        light: '#f8f9fa',
+        dark: '#343a40',
+        textMuted: '#6c757d',
+        transparent: 'transparent',
+        border: colors.gray[7],
+        altBorder: colors.gray[8],
+        altBackground: colors.gray[8],
+      },
+    },
   },
   space: ['0rem', '0.25rem', '0.5rem', '1rem', '1.5rem', '3rem'],
   fonts: {
@@ -53,8 +83,8 @@ export const theme: Theme = {
     display: 300,
   },
   borders: {
-    default: `1px solid ${colors.gray[5]}`,
-    primary: `1px solid #007bff`,
+    default: '1px solid var(--theme-ui-colors-border)',
+    primary: `1px solid var(--theme-)`,
   },
   lineHeights: {
     body: 1.6,
@@ -96,7 +126,7 @@ export const theme: Theme = {
       borderColor: 'primary',
       borderStyle: 'solid',
       borderWidth: 1,
-      bg: 'background',
+      bg: 'transparent',
       cursor: 'pointer',
       textDecoration: 'none',
       borderRadius: 'default',
@@ -192,24 +222,23 @@ export const theme: Theme = {
     table: {
       width: '100%',
       marginBottom: 3,
-      color: 'gray.9',
       borderCollapse: 'collapse',
     },
     th: {
       verticalAlign: 'bottom',
       borderTopWidth: 2,
       borderTopStyle: 'solid',
-      borderTopColor: 'gray.3',
+      borderTopColor: 'default',
       borderBottomWidth: 2,
       borderBottomStyle: 'solid',
-      borderBottomColor: 'gray.3',
+      borderBottomColor: 'default',
       padding: '.75rem',
       textAlign: 'inherit',
     },
     td: {
       borderBottomWidth: 2,
       borderBottomStyle: 'solid',
-      borderBottomColor: 'gray.3',
+      borderBottomColor: 'default',
       verticalAlign: 'top',
       padding: '.75rem',
     },
@@ -224,6 +253,7 @@ export const theme: Theme = {
   cards: {
     primary: {
       border: 'default',
+      borderColor: 'border',
       borderRadius: 'default',
 
       transition:
@@ -235,7 +265,7 @@ export const theme: Theme = {
     stigmata: {
       padding: 2,
       borderRadius: 4,
-      borderColor: 'gray.3',
+      borderColor: 'default',
       borderWidth: 1,
       borderStyle: 'solid',
     },

src/styles/nextjs.css

@@ -5,3 +5,7 @@ body {
 #__next {
   height: 100%;
 }
+
+html {
+  transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
+}