跳转到内容

Devlog 站点样式演练 #1（Starlight + Tailwind + React）

暗色主题示意 图 1：暗色主题卡片

目录

主题切换
样式覆盖
代码高亮与代码组

主题切换

引用：优先使用 data-theme="auto|dark|light"，并在首屏 JS 注入前设置 <html> 属性，避免 FOUC。

import React from "react";
import { Monitor, Moon, Sun, Check } from "lucide-react";

type Theme = "auto" | "dark" | "light";

const STORAGE_KEY = "starlight-theme";

function applyTheme(t: Theme) {
  if (typeof document === "undefined") return;
  document.documentElement.setAttribute("data-theme", t); // [!code highlight]
}

export default function ThemeDropdown() {
  const [theme, setTheme] = React.useState<Theme>("auto");

  React.useEffect(() => {
    const saved = (localStorage.getItem(STORAGE_KEY) as Theme) ?? "auto";
    setTheme(saved); applyTheme(saved);
  }, []);

  function choose(t: Theme) {
    setTheme(t); localStorage.setItem(STORAGE_KEY, t); applyTheme(t);
  }

  return (
    <div className="relative">
      {/* 省略 UI，仅示例状态流 */}
      <button onClick={() => choose(theme === "dark" ? "light" : "dark")}>
        Toggle <Check className="inline size-4" />
      </button>
    </div>
  );
}

样式覆盖

@import "tailwindcss";
@import "@astrojs/starlight-tailwind";              /* [!code highlight] */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@theme {
  --color-accent-600: #922cd0;
  --color-gray-800: #242536;
}

.prose-devlog {
  @apply prose prose-invert max-w-none;             /* [!code highlight] */
  @apply prose-h1:text-4xl prose-h2:text-3xl;
  @apply prose-code:px-1.5 prose-code:py-0.5;
}

关于 Prose 覆盖

Tailwind v4 的 @apply 在 @layer 顺序上更敏感；请确保导入顺序正确。

代码高亮与代码组

const a = 1;
const b = 2; // <- 高亮
const c = a + b;
console.log(c);
export default c; // <- 高亮

.card { border-radius: 8px; }
.card { border-radius: 16px; /* 更柔和 */ }

$ yarn dev
VITE v5.4  ready in 300 ms

展开：构建差异

若 dev 与 build 渲染不一致，优先检查 Tailwind 产物与 Astro 集成顺序。

事项	状态	备注
主题切换	✅	本文示例
Prose	✅	自定义类 `.prose-devlog`
代码组	✅	已演示

夜间模式基本一致
代码块标题的图标定制