From 073ebb3448b3fb64065a12d212c0ef549e56ac67 Mon Sep 17 00:00:00 2001 From: Sakura Knoll Date: Mon, 18 Jul 2022 10:10:53 +0900 Subject: [PATCH] Add dark theme --- src/components/layouts/Honkai3rdLayout.tsx | 2 +- src/components/organisms/Breadcrumb.tsx | 4 +- src/components/organisms/GanttChart.tsx | 12 ++--- .../organisms/Honkai3rdNavigator.tsx | 21 ++++++++ src/lib/theme.ts | 48 +++++++++++++++---- src/styles/nextjs.css | 4 ++ 6 files changed, 74 insertions(+), 17 deletions(-) diff --git a/src/components/layouts/Honkai3rdLayout.tsx b/src/components/layouts/Honkai3rdLayout.tsx index 80a40b86..efccadae 100644 --- a/src/components/layouts/Honkai3rdLayout.tsx +++ b/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'], diff --git a/src/components/organisms/Breadcrumb.tsx b/src/components/organisms/Breadcrumb.tsx index e567f1b2..a782607f 100644 --- a/src/components/organisms/Breadcrumb.tsx +++ b/src/components/organisms/Breadcrumb.tsx @@ -20,7 +20,9 @@ const Breadcrumb = ({ items }: BreadcrumbProps) => { {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, diff --git a/src/components/organisms/Honkai3rdNavigator.tsx b/src/components/organisms/Honkai3rdNavigator.tsx index 0b5fa346..8603bcdf 100644 --- a/src/components/organisms/Honkai3rdNavigator.tsx +++ b/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 ( { + + + { + setColorMode(event.target.checked ? 'dark' : 'default') + }} + sx={{ + 'input ~ &': { + backgroundColor: 'muted', + }, + 'input:checked ~ &': { + backgroundColor: 'primary', + }, + }} + label={colorMode === 'default' ? '☀️' : '🌙'} + /> + ) } diff --git a/src/lib/theme.ts b/src/lib/theme.ts index 325e85da..414d327a 100644 --- a/src/lib/theme.ts +++ b/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', }, diff --git a/src/styles/nextjs.css b/src/styles/nextjs.css index 5b126844..2094f2ca 100644 --- a/src/styles/nextjs.css +++ b/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; +}