ダークテーマ！ (#2)

* テーマを切り替えできるようにする

* styleを修正

__tests__/components/Common/ThemeToggler.test.tsx

@@ -0,0 +1,17 @@
+import { render, waitFor } from '@testing-library/react'
+import { expect } from '@jest/globals'
+import {
+  ThemeToggler,
+  ThemeTogglerProps,
+} from '@/components/Common/ThemeToggler'
+import { Mock } from 'ts-mockery'
+
+describe('<ThemeToggler />', () => {
+  it('正常に描画される', async () => {
+    const props = Mock.from<ThemeTogglerProps>({})
+    const component = render(<ThemeToggler {...props} />)
+    await waitFor(() => {
+      expect(component).toBeTruthy()
+    })
+  })
+})

package.json

@@ -31,6 +31,7 @@
     "@types/node": "20.2.5",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.0.0",
     "eslint": "8.41.0",

src/components/Common/ThemeToggler.tsx

@@ -0,0 +1,43 @@
+import { Theme } from '@/resources/types'
+import { MaterialIcon } from './MaterialIcon'
+import styled from 'styled-components'
+
+const TogglerDiv = styled.div`
+  height: 40px;
+  &:hover {
+    background-color: rgb(var(--bs-secondary-bg-rgb));
+  }
+`
+
+const TogglerA = styled.a`
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+  display: block;
+`
+
+export type ThemeTogglerProps = {
+  theme: Theme
+  toggleTheme: () => void
+}
+
+export const ThemeToggler: React.FC<ThemeTogglerProps> = ({
+  theme,
+  toggleTheme,
+}) => {
+  return (
+    <TogglerDiv
+      role="button"
+      onClick={toggleTheme}
+      className="d-flex align-items-center rounded-pill"
+    >
+      <TogglerA className="rounded-circle text-body-emphasis">
+        {theme === 'light' ? (
+          <MaterialIcon name="light_mode" />
+        ) : (
+          <MaterialIcon name="dark_mode" />
+        )}
+      </TogglerA>
+    </TogglerDiv>
+  )
+}

src/layouts/Navbar.tsx

@@ -1,18 +1,33 @@
-import { IconButton } from '@/components/Navbar/IconButton'
+import { ThemeToggler } from '@/components/Common/ThemeToggler'
+import { useTheme } from '@/context/ThemeProvider'
 import { TestID } from '@/resources/TestID'
 import Link from 'next/link'
+import { useCallback } from 'react'
 
 export const Navbar: React.FC = () => {
+  const { theme, setTheme } = useTheme()
+  const toggleTheme = useCallback(() => {
+    return () => {
+      setTheme(theme === 'light' ? 'dark' : 'light')
+    }
+  }, [theme])
+
   return (
     <nav
       data-testid={TestID.NAVBAR}
-      className="navbar navbar-expand navbar-light bg-light"
+      className={
+        'navbar navbar-expand-lg ' +
+        (theme === 'light' ? 'navbar-light bg-light ' : 'navbar-dark bg-dark')
+      }
     >
       <div className="container-fluid px-5">
-        <Link href="/">
-          <div className="navbar-brand title fw-bold">Next Template</div>
+        <Link
+          href="/"
+          className="title fw-bold d-flex align-items-center text-body"
+        >
+          <div>Next Template</div>
         </Link>
-        <IconButton theme="dark" onClick={() => undefined} />
+        <ThemeToggler theme={theme} toggleTheme={toggleTheme()} />
       </div>
     </nav>
   )

src/styles/globals.scss

@@ -1,11 +1,9 @@
 @import '../../node_modules/bootstrap/scss/bootstrap.scss';
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap');
 
-html,
-body {
+html {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
 ::-webkit-full-page-media,
@@ -17,14 +15,28 @@ body {
   --vh100: 100vh;
   min-height: 100vh;
   min-height: var(--vh100);
+  max-width: 100%;
+  font-family: 'Aria', 'Noto Sans JP', sans-serif;
+}
+.fw-bold {
+  font-family: var(--bs-body-font-family);
+}
+.root {
+  min-height: var(--vh100);
+}
+main {
+  max-width: 1320px;
+  width: 90%;
+  margin: auto;
+  margin-top: 1rem;
 }
 
 a {
   color: inherit;
   text-decoration: none;
 
   &:hover {
-    color: #0e6dfd;
+    color: var(--bs-link-color);
   }
 }
 
@@ -65,7 +77,11 @@ $main: rgb(20, 214, 182);
 .title-border-main,
 h1 {
   border-left: 8px solid $main;
-  border-bottom: 2px solid $main;
   padding: 4px 16px;
   margin-bottom: 16px !important;
+  font-weight: 500;
+}
+[data-bs-theme='dark'] {
+  --bs-body-color-rgb: 210, 210, 210 !important;
+  --bs-body-color: #dddddd !important;
 }