ダークモード切り替えボタンの実装方法 (ユーザーの訪問時間によって自動切替)

プログラミング

更新日:

2024/07/18

投稿日:

2024/03/06

実装コード

コード全体

最後に

ユーザーの一人一人の訪問時間の平均を計算し、その平均時間以降にページを訪れたユーザーに対して、ダークモードを自動で発火するスイッチの実装方法です。
基本的なロジックのみの実装になります。
CSSはほとんど何もしていないので、自由に変更してください。

実装コード

デモサイト

① useState と useState をimport

import { useState, useEffect } from 'react'

② useState で、初期状態を設定

  // ダークモードの状態を管理
  const [　darkMode, setDarkMode　] = useState(false)

③ダークモードを切り替える関数

  const toggleDarkMode = () => {
    // ダークモードの状態を反転
    setDarkMode(function (prevMode) {
      const nextMode = !prevMode
      // ダークモードの状態によって、bodyタグにdark_modeクラスを追加する
      document.body.className = nextMode ? 'dark_mode' : ''
      darkModeSwitchedAt()
      return nextMode;
    })
  }

③ダークモードに切り替えた時間をローカルストレージに記録

  function darkModeSwitchedAt() {
    const now = new Date() // 現在の日付と時間を取得
    // ローカルストレージにデータがあれば取得
    const darkModeTimes = JSON.parse(localStorage.getItem("darkModeTimes") || '[]')
    darkModeTimes.push(now.getHours()) // 配列に現在の時間を追加
    // Json形式を文字列に変換してローカルストレージに保存
    localStorage.setItem("darkModeTimes", JSON.stringify(darkModeTimes))
  }

④ ユーザーのダークモードに切り替える平均時間に基づいてダークモードに切り替える

  // ページ読み込み時の現在時刻が、平均時間よりも遅い場合はダークモードにする
  useEffect(() => {
    const darkModeTimes = JSON.parse(localStorage.getItem("darkModeTimes") || "[]");
    console.log(darkModeTimes);

    // ユーザーがダークモードを使う平均時間を計算する
    let averageTime = 0
    if (darkModeTimes.length > 0) {
      // 全ての値をreduceで合算する
      averageTime = darkModeTimes.reduce((previous: number, current: number) => {
        return previous + current
      }, 0);

      // 平均を出す
      averageTime = averageTime / darkModeTimes.length
    }
    console.log("平均は" + averageTime);

    // 現在の日付と時間を取得
    const now = new Date(); 

    // 現在時間が平均時間よりも大きい場合は、ダークモードにする
    if (now.getHours() > averageTime) {
      setDarkMode(true)
      document.body.className = 'dark_mode'
    }
  }, [])

⑤CSSファイル (index.css)

body {
  background-color: white;
  color: #333;
}

.dark_mode {
  background-color: #333;
  color: white;
}

コード全体

コード全部を開く

import { useState, useEffect } from 'react'

// css
import './App.css'

function App() {
  // ダークモードの状態を管理
  const [darkMode, setDarkMode] = useState(false)

  const toggleDarkMode = () => {
    // ダークモードの状態を反転
    setDarkMode(function (prevMode) {
      const nextMode = !prevMode
      // ダークモードの状態によって、bodyタグにdark_modeクラスを追加する
      document.body.className = nextMode ? 'dark_mode' : ''
      darkModeSwitchedAt()
      return nextMode;
    })
  }

  function darkModeSwitchedAt() {
    const now = new Date() // 現在の日付と時間を取得
    // ローカルストレージにデータがあれば取得
    const darkModeTimes = JSON.parse(localStorage.getItem("darkModeTimes") || '[]')
    darkModeTimes.push(now.getHours()) // 配列に現在の時間を追加
    // Json形式を文字列に変換してローカルストレージに保存
    localStorage.setItem("darkModeTimes", JSON.stringify(darkModeTimes))
  }


  // ページ読み込み時の現在時刻が、平均時間よりも遅い場合はダークモードにする
  useEffect(() => {
    const darkModeTimes = JSON.parse(localStorage.getItem("darkModeTimes") || "[]");
    console.log(darkModeTimes);

    // ユーザーがダークモードを使う平均時間を計算する
    let averageTime = 0
    if (darkModeTimes.length > 0) {
      // 全ての値をreduceで合算する
      averageTime = darkModeTimes.reduce((previous: number, current: number) => {
        return previous + current
      }, 0);

      // 平均を出す
      averageTime = averageTime / darkModeTimes.length
    }
    console.log("平均は" + averageTime);

    // 現在の日付と時間を取得
    const now = new Date(); 

    // 現在時間が平均時間よりも大きい場合は、ダークモードにする
    if (now.getHours() > averageTime) {
      setDarkMode(true)
      document.body.className = 'dark_mode'
    }
  }, [])

  return (
    <div style={{maxWidth:"800px", margin:"0 auto"}}>
      <button onClick={toggleDarkMode} style={{padding:"1rem",background:"white" }}>Dark Mode</button>
      <h1>Dark Mode Switch</h1>
      {darkMode && <p>ダークモード中</p>}
    </div>
  )
}
export default App