🙄

【Next.js】Next.js & Contentful BlogApp 【１９ Toggle Colormode】

2022/12/05に公開

Next.js

Contentful

tech

【１９ Toggle Colormode】

YouTube:https://youtu.be/VcWECs4YvVY

https://youtu.be/VcWECs4YvVY

今回はカラーモードを変更するボタンを作成します。
まずは必要なライブラリのインストールから始めます。

https://headlessui.com/react/switch

npm install @heroicons/react 
npm install @headlessui/react

context/colormodeContext.js

  "dependencies": {
    "@headlessui/react": "^1.7.4",
    "@heroicons/react": "^2.0.13",
  },

components/ColormodeToggleButton.js

import { useEffect, useState } from 'react'
import { Switch } from '@headlessui/react'
import { MoonIcon, SunIcon } from '@heroicons/react/24/solid'
import { useColormodeContext } from '../context/colormodeContext'

const ColormodeToggleButton = () => {
  const [enabled, setEnabled] = useState(false)
  const { setColor } = useColormodeContext()

  useEffect(() => {
    if (enabled) {
      setColor('dark')
    } else {
      setColor('light')
    }
  }, [enabled, setColor])

  return (
    <div className="flex items-center gap-1">
      <SunIcon className="w-5 h-5 text-orange-500" />
      <Switch
        checked={enabled}
        onChange={setEnabled}
        className={`${
          enabled ? 'bg-purple-600' : 'bg-orange-600'
        } relative inline-flex h-6 w-11 items-center rounded-full`}
      >
        <span className="sr-only">Enable notifications</span>
        <span
          className={`${
            enabled ? 'translate-x-6' : 'translate-x-1'
          } inline-block h-4 w-4 transform rounded-full bg-white transition`}
        />
      </Switch>
      <MoonIcon className="w-5 h-5 text-yellow-500" />
    </div>
  )
}

export default ColormodeToggleButton

作成したボタンはナビゲーションバーに追加します。

components/Navbar.js

import Link from 'next/link'
import ColormodeToggleButton from './ColormodeToggleButton'

const Navbar = () => {
  return (
    <div className="w-full bg-slate-900">
      <div className="max-w-7xl flex mx-auto p-3 items-center justify-between">
        <div className=" font-black text-3xl text-white">
          <Link href="/">My Blog App</Link>
        </div>
        <ColormodeToggleButton />
      </div>
    </div>
  )
}

export default Navbar

最後の確認前にuseStateのデフォルトを「light」に戻して
カラーモードのデフォルトを「dark」から「light」に変更します。

context/colormodeContext.js

import { createContext, useContext, useState } from 'react'

const ColormodeContext = createContext({})

export const ColormodeContextProvider = ({ children }) => {
  const [color, setColor] = useState('light')

  return (
    <ColormodeContext.Provider value={{ color, setColor }}>
      {children}
    </ColormodeContext.Provider>
  )
}

export const useColormodeContext = () => useContext(ColormodeContext)

【１９ Toggle Colormode】

Discussion