一篇文章读懂thinking-orbs的三层暗色模式检测如何自动跟随Tailwind/shadcn主题实时切换【免费下载链接】thinking-orbsDotted thought-orb loading indicators for AI agent UIs, 9 tuned types, two sizes, auto dark/light项目地址: https://gitcode.com/gh_mirrors/th/thinking-orbsthinking-orbs是面向 AI 与 Agent 界面的点阵思维光球加载动画组件React纯 2D Canvas 渲染。它的核心亮点之一是themeauto下的三层暗色模式检测组件会自动感知宿主项目的 Tailwind / shadcn 主题切换data-theme属性或dark类名跟随系统prefers-color-scheme变化并在 SSR 场景下安全渲染——切换主题的那一刻光球颜色即时反转无需任何额外配置。 一句话总结光球用深色底配浅色墨、浅色底配深色墨的纯单色设计而当前是深是浅完全由三层检测自动判定。为什么需要三层检测在带深色模式的 React 项目里判断当前是深色还是浅色通常要同时应对三种情况应用层切换——Tailwind 的class策略、shadcn 的data-theme/dark类用户点一下按钮就切换不经过系统设置系统层偏好——浏览器/操作系统的prefers-color-scheme用户可能在页面开着的时候改系统主题服务端渲染SSR——服务器上根本没有 DOM 和matchMedia硬取会直接报错。任何一层处理不好都会出现背景是深色、光球却也是深色看不见的经典翻车。thinking-orbs 的解法是把三层做成一条降级链 实时订阅核心逻辑全部集中在 src/theme.ts 的useResolvedDarkHook 里。第一层跟随宿主项目data-theme / dark 类名第一优先级是从 DOM 树上自下而上找祖先标记。检测逻辑见 src/theme.ts 的ancestorTheme任一祖先节点带data-themedark或data-themelight属性或任一祖先节点带dark/light类名——这正是TailwinddarkMode: class与 shadcn 的主题约定。关键在于它不是取一次快照而是持续监听组件用MutationObserver观察整个documentElement子树上class和data-theme属性的变化见 src/theme.ts。所以当你点击页面上的主题切换按钮、html上的类名一变光球会在同一帧内重绘实现实时切换。官方 Demo 就是标准用法切换函数把document.documentElement.dataset.theme设为dark/light见 demo/hooks/useTheme.ts光球无需传任何theme属性即可自动跟上。第二层订阅系统主题prefers-color-scheme如果 DOM 树上找不到任何应用层标记检测降级到系统偏好matchMedia((prefers-color-scheme: dark))见 src/theme.ts 的systemDark。更值得注意的是组件对这个 Media Query 做了change事件订阅见 src/theme.ts——用户晚上把系统从浅色切到深色正在显示的 9 种动画状态working / searching / solving / listening / connecting / weaving / composing / breathing / shaping会全部实时反色而不是要刷新页面才生效。第三层SSR 安全服务端不渲染第三层针对 Next.js / Remix 等服务端渲染场景。策略很直接Canvas 只在客户端绘制且首帧在主题解析完成之后才画。挂载前的回退值是dark深色墨点避免浅色闪烁服务器上无 DOM所有检测代码都包在useEffect中执行src/theme.ts不会触碰matchMedia、MutationObserver而报错客户端首次渲染时先解析主题再落笔杜绝服务端输出与客户端第一帧不一致的 hydration 问题。这就是 README 里说的SSR-safe — the canvas paints only on the client, after the theme has resolved。颜色如何随检测结果反转检测只负责回答深 or 浅真正的反转发生在绘制层。在 src/engine/core.ts 的paint函数里灰度值w在深色底上会取反为1 - w让近处的点呈现为高亮浅色——同一套深度语言只在基底反转时镜像一次墨水值。整套动画因此严格保持单色深色背景画浅色墨浅色背景画深色墨没有第三种颜色。手动固定themedark / light三层检测只对默认值themeauto生效见 src/ThinkingOrb.tsx。如果你在深色卡片里想强制浅色光球直接写死即可优先级最高、跳过全部检测ThinkingOrb themedark / // 固定深色背景用的浅色墨点 ThinkingOrb themelight / // 固定浅色背景用的深色墨点三个取值的完整语义注释在 src/types.ts 的OrbTheme类型定义里值得对照阅读。实战小结与源码导读场景行为祖先有data-theme/dark类跟随应用主题MutationObserver 实时刷新无应用标记跟随系统prefers-color-scheme实时订阅SSR 首屏客户端解析主题后才绘制安全无 hydration 问题传了themedark / light跳过检测固定墨色 想深入源码建议按这个顺序读src/theme.ts三层检测全貌→ src/ThinkingOrb.tsxHook 如何接入渲染循环→ src/engine/core.ts墨色镜像绘制→ demo/hooks/useTheme.ts最小可运行的切换示例。对于正在给 AI 聊天界面做加载态的你这套机制的意义在于主题跟随零配置。装上组件的那一刻它就自动融入你的 Tailwind / shadcn 设计系统——深色浅色随心切光球永远看得见。【免费下载链接】thinking-orbsDotted thought-orb loading indicators for AI agent UIs, 9 tuned types, two sizes, auto dark/light项目地址: https://gitcode.com/gh_mirrors/th/thinking-orbs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
一篇文章读懂thinking-orbs的三层暗色模式检测：如何自动跟随Tailwind/shadcn主题实时切换
一篇文章读懂thinking-orbs的三层暗色模式检测如何自动跟随Tailwind/shadcn主题实时切换【免费下载链接】thinking-orbsDotted thought-orb loading indicators for AI agent UIs, 9 tuned types, two sizes, auto dark/light项目地址: https://gitcode.com/gh_mirrors/th/thinking-orbsthinking-orbs是面向 AI 与 Agent 界面的点阵思维光球加载动画组件React纯 2D Canvas 渲染。它的核心亮点之一是themeauto下的三层暗色模式检测组件会自动感知宿主项目的 Tailwind / shadcn 主题切换data-theme属性或dark类名跟随系统prefers-color-scheme变化并在 SSR 场景下安全渲染——切换主题的那一刻光球颜色即时反转无需任何额外配置。 一句话总结光球用深色底配浅色墨、浅色底配深色墨的纯单色设计而当前是深是浅完全由三层检测自动判定。为什么需要三层检测在带深色模式的 React 项目里判断当前是深色还是浅色通常要同时应对三种情况应用层切换——Tailwind 的class策略、shadcn 的data-theme/dark类用户点一下按钮就切换不经过系统设置系统层偏好——浏览器/操作系统的prefers-color-scheme用户可能在页面开着的时候改系统主题服务端渲染SSR——服务器上根本没有 DOM 和matchMedia硬取会直接报错。任何一层处理不好都会出现背景是深色、光球却也是深色看不见的经典翻车。thinking-orbs 的解法是把三层做成一条降级链 实时订阅核心逻辑全部集中在 src/theme.ts 的useResolvedDarkHook 里。第一层跟随宿主项目data-theme / dark 类名第一优先级是从 DOM 树上自下而上找祖先标记。检测逻辑见 src/theme.ts 的ancestorTheme任一祖先节点带data-themedark或data-themelight属性或任一祖先节点带dark/light类名——这正是TailwinddarkMode: class与 shadcn 的主题约定。关键在于它不是取一次快照而是持续监听组件用MutationObserver观察整个documentElement子树上class和data-theme属性的变化见 src/theme.ts。所以当你点击页面上的主题切换按钮、html上的类名一变光球会在同一帧内重绘实现实时切换。官方 Demo 就是标准用法切换函数把document.documentElement.dataset.theme设为dark/light见 demo/hooks/useTheme.ts光球无需传任何theme属性即可自动跟上。第二层订阅系统主题prefers-color-scheme如果 DOM 树上找不到任何应用层标记检测降级到系统偏好matchMedia((prefers-color-scheme: dark))见 src/theme.ts 的systemDark。更值得注意的是组件对这个 Media Query 做了change事件订阅见 src/theme.ts——用户晚上把系统从浅色切到深色正在显示的 9 种动画状态working / searching / solving / listening / connecting / weaving / composing / breathing / shaping会全部实时反色而不是要刷新页面才生效。第三层SSR 安全服务端不渲染第三层针对 Next.js / Remix 等服务端渲染场景。策略很直接Canvas 只在客户端绘制且首帧在主题解析完成之后才画。挂载前的回退值是dark深色墨点避免浅色闪烁服务器上无 DOM所有检测代码都包在useEffect中执行src/theme.ts不会触碰matchMedia、MutationObserver而报错客户端首次渲染时先解析主题再落笔杜绝服务端输出与客户端第一帧不一致的 hydration 问题。这就是 README 里说的SSR-safe — the canvas paints only on the client, after the theme has resolved。颜色如何随检测结果反转检测只负责回答深 or 浅真正的反转发生在绘制层。在 src/engine/core.ts 的paint函数里灰度值w在深色底上会取反为1 - w让近处的点呈现为高亮浅色——同一套深度语言只在基底反转时镜像一次墨水值。整套动画因此严格保持单色深色背景画浅色墨浅色背景画深色墨没有第三种颜色。手动固定themedark / light三层检测只对默认值themeauto生效见 src/ThinkingOrb.tsx。如果你在深色卡片里想强制浅色光球直接写死即可优先级最高、跳过全部检测ThinkingOrb themedark / // 固定深色背景用的浅色墨点 ThinkingOrb themelight / // 固定浅色背景用的深色墨点三个取值的完整语义注释在 src/types.ts 的OrbTheme类型定义里值得对照阅读。实战小结与源码导读场景行为祖先有data-theme/dark类跟随应用主题MutationObserver 实时刷新无应用标记跟随系统prefers-color-scheme实时订阅SSR 首屏客户端解析主题后才绘制安全无 hydration 问题传了themedark / light跳过检测固定墨色 想深入源码建议按这个顺序读src/theme.ts三层检测全貌→ src/ThinkingOrb.tsxHook 如何接入渲染循环→ src/engine/core.ts墨色镜像绘制→ demo/hooks/useTheme.ts最小可运行的切换示例。对于正在给 AI 聊天界面做加载态的你这套机制的意义在于主题跟随零配置。装上组件的那一刻它就自动融入你的 Tailwind / shadcn 设计系统——深色浅色随心切光球永远看得见。【免费下载链接】thinking-orbsDotted thought-orb loading indicators for AI agent UIs, 9 tuned types, two sizes, auto dark/light项目地址: https://gitcode.com/gh_mirrors/th/thinking-orbs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
