 来实现一个在线面试的网站， 主要功能大概是协同代码编辑+WebRTC视频通话。 现在先从零开始慢慢做。

现代网站对于暗黑模式切换肯定是必不可少的。当项目使用了

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "selector", // 新增这一行
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

。 文件第一行有这个注释后，修改这个配置文件就会有代码提示，可以发现

 ‘class’, ‘media’, ‘selector’

官网中对其有解释， 大致区别就是

 来自动更改dark或者light， 也就是说使用了

我们代码里就无法手动更改网站主题， 它只能根据系统的主题来自动变换

 ,这样暗黑模式才会生效。相对media来说更灵活，不过需要写逻辑来手动切换。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer {
	:root {
		--background: #ffffff;
		--foreground: #09090b;
		--border: #e3e3e7;
	}

	.dark {
		--background: #09090b;
		--foreground: #f9f9f9;
		--border: #27272a;
	}
}

@layer base {
	*{
		@apply box-border border-[--border];
	}

	body {
		@apply bg-[--background] text-[--foreground];
	}
}

通过创建Context来实现手动修改Theme

import { createContext, useContext, useEffect, useState } from "react"

type Theme = "dark" | "light" | "system"

type ThemeProviderProps = {
  children: React.ReactNode
  defaultTheme?: Theme
  storageKey?: string
}

type ThemeProviderState = {
  theme: Theme
  setTheme: (theme: Theme) => void
}

const initialState: ThemeProviderState = {
  theme: "system",
  setTheme: () => null,
}

const ThemeProviderContext = createContext<ThemeProviderState>(initialState)

export function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "theme",
  ...props
}: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(
    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
  )

  useEffect(() => {
    const root = window.document.documentElement

    root.classList.remove("light", "dark")

    if (theme === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
        .matches
        ? "dark"
        : "light"

      root.classList.add(systemTheme)
      return
    }

    root.classList.add(theme)
  }, [theme])

  const value = {
    theme,
    setTheme: (theme: Theme) => {
      localStorage.setItem(storageKey, theme)
      setTheme(theme)
    },
  }

  return (
    <ThemeProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeProviderContext.Provider>
  )
}

export const useTheme = () => {
  const context = useContext(ThemeProviderContext)

  if (context === undefined)
    throw new Error("useTheme必须在ThemeProvider中使用")

  return context
}


首先从 localStorege 中获取主题，如果没有找到，则使用默认主题。

监听主题状态的变化。每当主题改变时，更新 html 的 class。如果主题为 system，则根据 

 来检测系统的主题色设置，给 html 添加对应的 class。

函数将新的主题存储在localStorage中，并更新主题状态。

是一个自定义Hook，它可以在任何函数组件中访问主题上下文。如果它在

之外被调用，将抛出一个错误。

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ThemeProvider } from "./components/ThemeProvider.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeProvider defaultTheme="dark" storageKey="theme">
      <App />
    </ThemeProvider>
  </React.StrictMode>,
);


import { Sun, Moon } from "lucide-react";
import { useTheme } from "./components/ThemeProvider";

const ThemeToggle = () => {
  const { theme, setTheme } = useTheme();
  return (
    <button
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      className="inline-flex rounded-md p-2 hover:bg-zinc-100 dark:hover:bg-zinc-900"
    >
      <Sun
        size={20}
        className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
      />
      <Moon
        size={20}
        className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
      />
    </button>
  );
};

export default ThemeToggle;


在使用时发现一个问题，很多时候我需要通过

 这个值，这导致我无法直接判断。 在

 中有解决这个问题，它会导出一个

import { createContext, useContext, useEffect, useState } from "react"

type Theme = "dark" | "light" | "system"
+ type ResolvedTheme = Exclude<Theme, 'system'>

type ThemeProviderProps = {
  children: React.ReactNode
  defaultTheme?: Theme
  storageKey?: string
}

type ThemeProviderState = {
  theme: Theme,
+ resolvedTheme: ResolvedTheme
  setTheme: (theme: Theme) => void
}

const initialState: ThemeProviderState = {
  theme: "system",
+ resolvedTheme: "dark",
  setTheme: () => null,
}

const ThemeProviderContext = createContext<ThemeProviderState>(initialState)

export function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "theme",
  ...props
}: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(
    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
  )

+ const [resolvedTheme, setresolvedTheme] = useState<'dark' | 'light'>(() => {
+   if (theme === 'system') {
+     return window.matchMedia('(prefers-color-scheme: dark)').matches
+       ? 'dark'
+       : 'light'
+   }
+   return theme
+ })
  useEffect(() => {
    const root = window.document.documentElement

    root.classList.remove("light", "dark")

    if (theme === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
        .matches
        ? "dark"
        : "light"

      root.classList.add(systemTheme)
+     setresolvedTheme(systemTheme)
      return
    }

    root.classList.add(theme)
+   setresolvedTheme(theme === 'dark' ? 'dark' : 'light')
  }, [theme])

  const value = {
    theme,
+   resolvedTheme,
    setTheme: (theme: Theme) => {
      localStorage.setItem(storageKey, theme)
      setTheme(theme)
    },
  }

  return (
    <ThemeProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeProviderContext.Provider>
  )
}

export const useTheme = () => {
  const context = useContext(ThemeProviderContext)

  if (context === undefined)
    throw new Error("useTheme必须在ThemeProvider中使用")

  return context
}


ok现在可以愉快的使用暗黑模式了

在antdesign5+中，可以通过智能算法快速地根据主色来计算出一些状态辅助色。 同样暗黑模式也可以根据智能算法快速切换。

React+Tailwindcss实现暗黑模式

Vue2+webpack项目迁移到Vue3+Vite

529. 扫雷游戏

proxy

❓如何一个端口下运行多个项目？

前言

步骤

安装tailwindcss

修改tailwindcss.config.js文件

添加一点不同主题下的基础色

通过创建Context来实现手动修改Theme

修改入口文件

使用

修改一下Context逻辑

AntD中使用暗黑模式