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>
   )
 }