diff --git a/components/DarkmodeToggle.tsx b/components/DarkmodeToggle.tsx new file mode 100644 index 0000000..c8611ef --- /dev/null +++ b/components/DarkmodeToggle.tsx @@ -0,0 +1,27 @@ +import { useState, useEffect } from 'react'; + +export default function DarkModeToggle() { + const [isDarkMode, setIsDarkMode] = useState(false); + + useEffect(() => { + const html = document.documentElement; + if (isDarkMode) { + html.classList.add('dark'); + } else { + html.classList.remove('dark'); + } + }, [isDarkMode]); + + return ( + + ); +} diff --git a/pages/_app.tsx b/pages/_app.tsx index c14313e..202bca1 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,12 @@ +import DarkModeToggle from '@/components/darkmodeToggle'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; export default function App({ Component, pageProps }: AppProps) { - return ; + return ( + <> + + + + ); } diff --git a/pages/_document.tsx b/pages/_document.tsx index f124b97..22fa775 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -2,9 +2,15 @@ import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( - - - + + + + wikid + +
diff --git a/postcss.config.js b/postcss.config.js index cbb17e5..980561b 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,4 +1,4 @@ -export default { +module.exports = { plugins: { tailwindcss: {}, 'postcss-nesting': {}, diff --git a/styles/globals.css b/styles/globals.css index 6b717ad..5a6ef0a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -4,18 +4,50 @@ :root { --background: #ffffff; - --foreground: #171717; + --white: #ffffff; + --gray-100: #f7f7fa; + --gray-200: #e4e5f0; + --gray-300: #c6cada; + --gray-400: #8f95b2; + --gray-500: #474d66; + --gray-600: #3b415b; + + --green-100: #eef9f6; + --green-200: #4cbfa4; + --green-300: #32a68a; + + --red-50: #fbeded; + --red-100: #d14343; + + --purple-100: #8e66ff; + + --yellow-100: #fdd181; } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } +.dark { + --background: #121212; + --white: #e4e4e4; + --gray-100: #3b415b; + --gray-200: #474d66; + --gray-300: #8f95b2; + --gray-400: #c6cada; + --gray-500: #e4e5f0; + --gray-600: #f7f7fa; + + --green-100: #3a8f76; + --green-200: #4cbfa4; + --green-300: #a5e5d1; + + --red-50: #8a1c1c; + --red-100: #d14343; + --red-200: #f37474; + + --purple-100: #b095ff; + + --yellow-100: #e7a832; } body { - color: var(--foreground); + color: var(--gray-500); background: var(--background); - font-family: Arial, Helvetica, sans-serif; } diff --git a/tailwind.config.ts b/tailwind.config.ts index 9143cf3..ebc2aa0 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,7 @@ import type { Config } from 'tailwindcss'; export default { + darkMode: 'class', content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', @@ -10,7 +11,46 @@ export default { extend: { colors: { background: 'var(--background)', - foreground: 'var(--foreground)', + white: 'var(--white)', + gray: { + 100: 'var(--gray-100)', + 200: 'var(--gray-200)', + 300: 'var(--gray-300)', + 400: 'var(--gray-400)', + 500: 'var(--gray-500)', + 600: 'var(--gray-600)', + }, + green: { + 100: 'var(--green-100)', + 200: 'var(--green-200)', + 300: 'var(--green-300)', + }, + red: { + 50: 'var(--red-50)', + 100: 'var(--red-100)', + 200: 'var(--red-200)', + }, + purple: { + 100: 'var(--purple-100)', + }, + yellow: { + 100: 'var(--yellow-100)', + }, + }, + fontFamily: { + sans: [ + 'Pretendard', + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Helvetica Neue', + 'Arial', + 'sans-serif', + ], + }, + boxShadow: { + custom: '0px 4px 20px 0px rgba(0, 0, 0, 0.08)', }, }, },