Skip to content

主题值

使用 light/dark 对象实现主题感知颜色。

自动切换

颜色会根据主题自动切换。

搜索框同步

通过 color.search.* 让搜索框在亮/暗色下自动同步。

主题值

使用 light/dark 对象实现主题感知颜色。

自动切换

颜色会根据主题自动切换。

搜索框同步

通过 color.search.* 让搜索框在亮/暗色下自动同步。

主题值

使用 light/dark 对象实现主题感知颜色。

自动切换

颜色会根据主题自动切换。

搜索框同步

通过 color.search.* 让搜索框在亮/暗色下自动同步。

主题值

使用 light/dark 对象实现主题感知颜色。

自动切换

颜色会根据主题自动切换。

搜索框同步

通过 color.search.* 让搜索框在亮/暗色下自动同步。

主题值

使用 light/dark 对象实现主题感知颜色。

自动切换

颜色会根据主题自动切换。

搜索框同步

通过 color.search.* 让搜索框在亮/暗色下自动同步。

主题值

使用 light/dark 对象实现主题感知颜色。

自动切换

颜色会根据主题自动切换。

搜索框同步

通过 color.search.* 让搜索框在亮/暗色下自动同步。

主题值

使用 light/dark 对象实现主题感知颜色。

自动切换

颜色会根据主题自动切换。

搜索框同步

通过 color.search.* 让搜索框在亮/暗色下自动同步。

主题值

使用 light/dark 对象实现主题感知颜色。

自动切换

颜色会根据主题自动切换。

搜索框同步

通过 color.search.* 让搜索框在亮/暗色下自动同步。

主题同步颜色

主要关注点:亮色/暗色主题感知颜色配置。

本页实际 Frontmatter

yaml
hero:
    background:
        type: color
        color:
            solid:
                light: "rgba(248, 250, 252, 1)"
                dark: "rgba(15, 23, 42, 1)"
    colors:
        navText:
            light: "rgba(15, 23, 42, 1)"
            dark: "rgba(248, 250, 252, 1)"
        searchText:
            light: "rgba(15, 23, 42, 1)"
            dark: "rgba(248, 250, 252, 1)"
        searchTextMuted:
            light: "rgba(71, 85, 105, 1)"
            dark: "rgba(148, 163, 184, 1)"

导航/搜索键(完整,hero.colors.*

说明
hero.colors.navText(.light/.dark) 导航文字颜色
hero.colors.navTextScrolled(.light/.dark) 滚动后导航文字颜色
hero.colors.navTextHover(.light/.dark) 导航悬停/激活文字颜色
hero.colors.navTextHoverScrolled(.light/.dark) 滚动后导航悬停/激活文字颜色
hero.colors.navBackground(.light/.dark) 导航背景色
hero.colors.navBackgroundScrolled(.light/.dark) 滚动后导航背景色
hero.colors.searchBackground(.light/.dark) 搜索按钮背景色
hero.colors.searchBackgroundScrolled(.light/.dark) 滚动后搜索背景色
hero.colors.searchHoverBackground(.light/.dark) 搜索悬停背景色
hero.colors.searchHoverBackgroundScrolled(.light/.dark) 滚动后搜索悬停背景色
hero.colors.searchText(.light/.dark) 搜索文本/图标颜色
hero.colors.searchTextScrolled(.light/.dark) 滚动后搜索文本/图标颜色
hero.colors.searchTextMuted(.light/.dark) 搜索占位与弱化文本颜色
hero.colors.searchTextMutedScrolled(.light/.dark) 滚动后搜索占位与弱化文本颜色
hero.colors.searchBorder(.light/.dark) 搜索边框颜色
hero.colors.searchBorderScrolled(.light/.dark) 滚动后搜索边框颜色
hero.colors.searchKeyBackground(.light/.dark) 快捷键胶囊背景色
hero.colors.searchKeyBackgroundScrolled(.light/.dark) 滚动后快捷键胶囊背景色
hero.colors.searchKeyText(.light/.dark) 快捷键胶囊文字色
hero.colors.searchKeyTextScrolled(.light/.dark) 滚动后快捷键胶囊文字色