isSystemInDarkTheme 工具函数，根据系统设置在浅色和深色配色方案之间切换。...颜色的来源，生成了非常适合 Jetchat 的 Material 3 配色方案，其中涵盖了用于浅色和深色主题的颜色。...接下来，便可以使用相应的颜色值声明 Jetchat 浅色和深色配色方案。...，从而使我们可以在 Jetchat 的浅色和深色配色方案之间切换。...△ 自动适配深浅色主题的动态配色 排版 现在我们已经了解了配色方案，接下来让我们来看看排版。
在深色界面中为什么要采用高饱和度、高对比度图表配色？...浅色背景与深色背景在内容信息上的设计还是有很大差别：在浅色背景下要尽量避免高饱和度的配色，反而在深色背景下需要高饱和度甚至接近刺眼的配色与背景形成对比来突出数据图表，吸引用户的眼球。...对比上图图4高饱和度、高明度的配色更适合深色背景，反之相对低饱和度、低明度的图3更适合在浅色背景下应用。 ...提升品质感 方案输出 通过设计探索，最终输出4种设计方案，在界面配色、图表配色、控件形态以及hover态上都有不同的表现形式，满足产品风格个性化定制需求。...方案一、二： A、蓝紫色背景配色 B、大圆角矩形控件 C、控件hover态采用描边文字变色 D、两种不同的图表配色 方案三、四： A、深蓝色背景配色 B、小圆角矩形控件 C、控件hover态采用底色变色
然而，到底什么是黑暗模式，为什么它如此受欢迎？从根本上来说，深色模式颠倒了用户界面的标准配色方案，用浅色文本代替深色色调，用明亮背景代替深色色调。...称为“深色模式”（有时称为“夜间模式”或“深色主题”）的设计功能会修改用户界面的配色方案，使其主要使用深色或黑色背景以及浅色文本和图形元素。...从本质上讲，深色模式颠倒了界面的标准配色方案，用较浅的背景代替较暗的色调，用较浅的字体代替更鲜艳的色调。移动应用程序、网站和操作系统的用户被这种倒置产生的引人注目的视觉美感所吸引。...支持多种环境：喜欢在夜间或弱光条件下浏览网页的用户可以借助深色模式来实现。通过提供典型的浅色界面的深色主题替代方案，网站可以在不同的照明环境下满足用户的偏好和需求。...允许用户个性化：允许用户更改深色模式的界面设置，包括配色方案和对比度级别，以更好地满足他们的个人品味和辅助功能需求。 用户体验考虑 在网页设计中融入深色模式时，必须从多个角度考虑用户体验。
浅色或亮色文本或图片，搭配深色背景，起到视觉上的层级呼应，突出主题的同时，瞬间吸引用户注意，赋予界面生命力。 如何设计深色系网页？...如何选择适合你网站的配色方案？ 用户对颜色的认知往往是类似的，无论是哪一类的网页，如果页面太过花哨，不仅不会带给用户视觉的享受，还会干扰视觉。...无论选择深色系还是浅色系，都要经过明确的用户体验和合理的决策共同完成。网页在明亮的颜色方面配色最好不要超过三种，以免造成页面视觉体验的混乱。...或者在自己选择好的主色中参考类似网站案例，就可以简单完成配色。...所以，很多时候，设计师会借助配色工具来寻求配色方案。 配色方法和配色工具有很多，有的工具需要配合特定的方法，而有的工具则只能应对特定的需求。
为什么Dark Mode变得越来越流行 2018 年的 macOS Mojave 率先支持了深色外观，紧接着 Windows 10 在 2018 年的 10 月份大版本更新中，也引入了 Dark Mode...既然 Dark Mode 有不少吸引人的优点，为什么 Google 和苹果，一直等到2019年才正式推出系统级的 Dark Mode Dark Mode 并不像想像中的那么简单。...既然不能简单地通过颜色反转来实现 Dark Mode，那么最简单的方式就是：为浅色外观和深色外观分别设计两套配色方案。...苹果在系统层面整理出了一套配色方案，其中包含了背景色、文字标签色、填充色等等，大多提供了四种不同醒目程度的层级，从应用在标题上的一级，到提示或说明性文字的四级。...苹果为这些材质设计了深浅两套配色方案，并提供了从厚到薄的四种感观效果。 更重要的是，苹果还为材质上的内容颜色进行了单独的鲜活化（Vibrancy）处理。
主题配色 色彩在文本的易读性中起到了重要的作用。 所有的深色主题的配色方案都应该让UI中的元素都足够有对比度，足以通过 WCAG 的 AA 规则，也就是超过 4.5:1 的底线。...配色方案中低饱和度的色彩能够提高易读性，减少炫光效果。 ? 错误 避免在深色背景上使用让人觉得过于饱和的色彩。 主色 主色应该是整个界面和组件中最常显示的色彩。...寻找强调色 你可以使用官方的配色方案生成器来创建（或者查看）主题配色方案。它可以生成色调方案，也就是主色和次要色的一系列深浅颜色的变化。你可以为你的深色模式色彩主题选择更合理的色彩，来构建配色。 ?...错误 避免在深色主题中使用高饱和度的色彩，因为它们可以在深色的背景上形成炫光效果。 ? 默认主题下，在顶部菜单中使用配色方案中的主色。 ?...品牌色 深色主题基准配色方案 Material Design 的记住主题中包含了给深色主题的全部色彩和色调。
在设计过程中，有诸多因素会影响 UI 给用户的感受。其中，色彩是最重要也是最明显的一个部分。 许多设计师会在选择配色方案的时候，会使用浅色的、明亮的背景色彩。...其实，大众和设计师的这个倾向是有科学依据的。在白色的背景上使用黑色的文本，可读性是最佳的。在不同的测试和研究当中，浅色背景上的深色文本，比起深色背景上的浅色文本，阅读性更强。...想要协调如此之多类型的内容，单是调整对比度和统一配色就已经很难了，此外还需要考虑导航、布局和实际功能。在这样的 B2B 平台中，完全借用深色系UI 设计，几乎是不可能完成的任务。...为什么苹果直到今年才在自家的 Mac系统中加入深色系主题，我们可以想见这当中的难度。至少，在 Mac系统中，即使是在深色主题之下，也没有全局采用深色系背景。 ?...设计师不应该单纯的为了做的不一样或者为了复制某些配色而使用深色系的配色。深色系的UI 应该是正确的决策流程之下（考虑用户需求、使用场景、内容和设备等）作出的决策，有充分的理由而非凭感觉或者主观倾向。
完成一套美观合格的PPT，除了逻辑和版式，还有就是配色。配色看似简单，却有一些不可逾越必须遵循的秘籍。今天iSlide这篇配色秘籍，全都来自实战经验，非常好上手，一起来收! ...以下的分享都源自商务职场或者正式场合的PPT配色，如果要完成的是炫酷闪亮炸天艺术性风格PPT，那这个秘籍可以不遵循，随意就好。...而背景颜色选择浅色或饱和度低的背景可以更好的突出PPT演示内容。 明亮炫酷的背景反而不能突出内容，还会分散观众注意力。而浅色或饱和度低的背景才可以更好的突出PPT演示内容。 ...有人会说发布会幻灯片背景是黑色或深色，其实黑色或深色也是属于饱和度和亮度非常低的颜色。 ...依旧推荐浅色背景。 02.png 二、最好用与最不好用的配色方案 职场中最好用的配色方案就是黑色、白色或浅灰色搭配、黑色和黄色搭配、需要科技感可以选择白色和蓝色。
sass 的变量代替颜色值 配置多个主题颜色配置 利用grunt/gulp/webpack等工具输出多套主题样式 页面加载后，根据用户需求加载不同的样式列表 推荐阅读《webpack 换肤功能多主题/配色样式打包解决方案...light 适配浅色主题，dark 适配深色主题，no-preference 表示获取不到主题时的适配方案。...监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。...那么针对项目的 深色模式适配方案也一样，主要分为三步： 组件库深浅色主题 适配 项目中 深浅色的 颜色适配 完成 CSS 变量到页面的注入 上面的都是 利用 变量，去控制样式。... https://www.zoo.team/article/dark-theme 转载本站文章《DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode》, 请注明出处：https
融合了良好的配色方案和舒适的视觉风格，多个版本可选，非常适合喜欢黑夜模式的开发人员（半夜敲代码美滋滋？）。...3、GitHub Theme 安装次数：2,682,414 经典 GitHub 配色，有浅色、深色、浅色默认、深色默认和深色变暗版，适合 GitHub 老粉使用。...4、Winter Is Coming Theme 安装次数：1,398,907 文艺点可以翻译成“ 凛冬将至 ”，这个主题也有深色和浅色版本，冷色调的配色很好看，不过字体可能有点难辨认… 5、Night...6、Monokai Pro 安装：1,111,117 Monokai Pro 由 Monokai 原始作者设计，包含完整的配色方案、自定义用户界面主题和完整的图标集，精心挑选的色调制造出不分心的用户界面...8个深色和3个浅色版本任君选择，总有一款适合你。 14、Panda Theme 安装次数：483,485 配色、对比度、明暗搭配恰到好处，看再久也不会累！
为什么要使用全新的黑暗模式呢？...在选择浅色和深色背景下单独和组合的应用色调颜色时，请查看系统的配色方案以获得指导。 明智地使用颜色进行交流：当谨慎使用时，提高注意重要信息的颜色力量会增强。...例如，地图在使用地图模式时会显示浅色方案，但在激活卫星模式时会切换为深色方案。放置在半透明元素后面或应用于半透明元素（如工具栏）时，颜色也会显得不同。...使用适应当前外观的颜色：语义颜色（如分隔符）会自动适应当前外观。 当您需要自定义颜色时，将颜色集资源添加到应用程序的资产目录中，并指定颜色的浅色和深色变体，以便它可以适应当前的外观模式。...如下图所示，有四种：Thick，Regular，Thin，Ultrathin。透明度分别递增。 ? 在黑暗模式下同理 ? 每种厚度的材质，苹果设计师都为我们提供了不同的配色方案。 ?
如何建立动态和可配置的配色方案？ 在这篇文章中，我想分享关于如何在 CSS 中管理多种配色方案的想法。...这是构建配色方案的基础，因为 CSS 可以通过调整 hsl 饱和度和亮度量将所有颜色保持在同一色调系列中。...Light 浅色主题 每个颜色变体都将标有其匹配方案，在这种情况下，每个变体都附加-light....在浅色主题中，这些是浅色，而不是深色的文本颜色。要使用 hsl 创建浅色，我们将在第三个亮度值中使用更高的百分比值。我们还将降低饱和度，使浅灰色看起来不会太着色。...我的意思是，作为这个配色方案项目中的 CSS 作者，应该很少需要访问特定配色方案的值。我想让它更容易留在主题中。 为了实现这一点，颜色方案的使用应该完全通过通用自定义属性完成，我们将在稍后定义。
01 配色的基本原则 颜色需要有自身的意义。不同的颜色表示不同的分组，相近的颜色表示同一个分组；配色需要展现数据逻辑关系，突出关键数据，比如重要的数据用深色或暖色表示，不重要的数据用浅色或冷色表示。...比较窄的柱体建议用深色，比较宽的柱体建议用浅色。如果使用深色，建议添加透明度，降低其饱和度色彩。 两列数据的配色推荐选用不太接近的颜色实现对比的目的。...【饼图配色】 饼图颜色较多，建议使用软件内置颜色方案，面积小的区域使用深色系。 【折线图配色】 重叠的折线不能太多，如果超过四条，建议改用堆叠折线图或者其他图形表达方式。...配色可以把点设为深色，然后提高颜色的透明度。 【等高线图和热图配色】 颜色多，图线多，建议用配色方案，通常用双色或者三色渐变的方案。...对于觉得图表设计的配色有亮点吸引人的，可以通过颜色滴管，获得RGB颜色，收藏记录下来。 05 参考好的配色网站 配色网站数目繁多，每个网站各有优势。
XMind 新增演说模式可自动生成转场动画和布局，一键即可展示你的思维导图。从头脑风暴到思维展示，在 XMind 中即可完成工作流闭环。安装包：https://www.macw.com/?...id=MzAyODgyJl8mMjcuMTg2LjEyNC4xMTA%3D功能：深色界面相比于浅色界面，深色界面能让你更轻松地集中注意力。...目前深色界面已适配贴纸、预览、操作面板等所有界面。大纲视图思维导图中的大纲视图巧妙结合了发散性思考，提供了一种组织和架构思维的新方式，有效帮助大脑思考和解决问题。...在 ZEN 模式下，你可以集中火力，全神贯注地进行思维的发散和整理，得出更好的解决方案。丰富的主题元素可以通过添加标记、标签、超链接、附件、主题链接、笔记等丰富的主题元素来表达多元的信息结构。...多种配色组合6 组美轮美奂的配色组合，给你的导图增添更多色彩。轻松点击开启彩虹分支，就可以让你的导图变得更多彩起来。导出和分享我们提供多种导出和分享的方式，让你可以轻松地和你的朋友或同事分享你的
配色方案 由于图表的特殊性，数据可视化的配色方案和配色要求具有独特性。配色方案要充分考虑到特殊人群对数据图的可读性。丰富的色系，至少6种才可满足图表应用的各种场景。...同时配色需要有可辨识性，色彩选择需要有跨度。 1. 背景色定义 背景色的选择与可视化展示的设备相关，分为深色、浅色、彩色。...a.大屏背景色 在大屏设备中普遍用深色作为背景色，以减少屏幕拖尾，观众在视觉上也不会觉得刺眼。所有图表的配色需要以深色背景为基础。保证可视化图的清晰辨识度，色调与明度变化需要有跨度。 ?...淘宝双11大屏设计 b.中小屏背景色 中小屏幕背景色选择范围就比较广，浅色、彩色、深色均可以做出很好的设计。相比之下，浅色背景更适合展示大量的数据信息，因为在浅色底上数据图表的识别度比较高。...而深色、彩色背景更适合渲染简单的数据，用于烘托气氛。 ? 中小屏幕浅色，深色，彩色设计 2.
融合了良好的配色方案和舒适的视觉风格，多个版本可选，非常适合喜欢黑夜模式的开发人员（半夜敲代码美滋滋？）。 2、Dracula Official Official Dracula Theme....3、GitHub Theme 经典 GitHub 配色，有浅色、深色、浅色默认、深色默认和深色变暗版，适合 GitHub 老粉使用。...4、Winter Is Coming Theme 文艺点可以翻译成“ 凛冬将至 ”，这个主题也有深色和浅色版本，冷色调的配色很好看，不过字体可能有点难辨认… 5、Night Owl 这个主题的名字就叫“...Monokai Pro 由 Monokai 原始作者设计，包含完整的配色方案、自定义用户界面主题和完整的图标集，精心挑选的色调制造出不分心的用户界面，让你专注于代码。...8个深色和3个浅色版本任君选择，总有一款适合你。 14、Panda Theme Panda Theme for Visual Studio Code.
如今大部的网站都实现了深浅主题2种不同模式的配色，比如说程序员大多喜欢深色模式，或许是需要长时间使用电脑，该模式能够一定程度上保护视力。...在 MacOS 或 Windows10+ 系统中均支持配置深色和浅色两不的显示模式，前面提到的 prefers-color-scheme 正是可以感知系统的深浅模式配置，因此而产生相应的颜色变化。...那么此时问题就出现了，如果选择了深色模式是不是就意味着，无法让站点站点显示出浅色效果呢？...那么就只好就此放弃，还是选择通过 CSS 选择器的方式，再加上对媒体查询/切换进行监听，从而实现自动根据系统主题色调整网页颜色模式。...大致的流程设计如下： graph LR; node1([fa:fa-play 开始 ])-->node2{系统或站点是否配置深色模式}-->|是|node3[变量设置为dark]-->node4{读取本地存储主题是否为浅色
融合了良好的配色方案和舒适的视觉风格，多个版本可选，非常适合喜欢黑夜模式的开发人员（半夜敲代码美滋滋？）。2、Dracula OfficialOfficial Dracula Theme....3、GitHub Theme经典 GitHub 配色，有浅色、深色、浅色默认、深色默认和深色变暗版，适合 GitHub 老粉使用。...4、Winter Is Coming Theme文艺点可以翻译成“ 凛冬将至 ”，这个主题也有深色和浅色版本，冷色调的配色很好看，不过字体可能有点难辨认...5、Night Owl这个主题的名字就叫...图片Monokai Pro 由 Monokai 原始作者设计，包含完整的配色方案、自定义用户界面主题和完整的图标集，精心挑选的色调制造出不分心的用户界面，让你专注于代码。...8个深色和3个浅色版本任君选择，总有一款适合你。14、Panda ThemePanda Theme for Visual Studio Code.配色、对比度、明暗搭配恰到好处，看再久也不会累！
它不仅能够根据用户的喜好自动调整界面风格，还能够为不同的场景提供更好的视觉效果，特别是在夜间使用时，深色模式可以减轻眼睛的疲劳。...三、实现深色模式切换 深色模式和浅色模式的切换可以通过 VueUse 提供的 useDark 和 useToggle 两个工具函数来实现。 useDark：用于检测和管理深色模式的状态。...useToggle：用于在深色模式和浅色模式之间切换。 1....用于切换深色和浅色模式 2....使用动态主题色切换功能，可以让用户随时调整界面配色，提高用户黏性和满意度。 多主题支持：在大型项目中，往往需要支持多种主题（如深色模式、浅色模式，以及不同的颜色方案）。
文章简介 现在，常见的操作系统，基本都已经适配了暗色/亮色模式，并提供API接口: macOS Mojave 10.14 开始提供了外观设置选项，支持设置 浅色 / 深色 外观。...首先说一下最基础的媒体查询，然后带大家了解一下我的适配方案（纯JS、CSS和HTML的前端操作）。...当时还好，我们有JS，使用JS也可以媒体查询，我们就不需要用CSS来媒体查询系统暗色或亮色配色： // JS查询是系统是否为暗色配色 matchMedia('(prefers-color-scheme...不存在暗色模式标识符 用户进入网站，若之前没有手动点击网站上切换暗色/亮色按钮（不存在暗色模式标识符），则使用媒体查询检测用户是否有开启暗色模式，同步系统配色。...其实，配置已经基本配置完成，但是如果用户设置的是自动变换配色，如Mac用户的外观自动： [4ga1nx6dax.png] 在系统自动切换暗色/亮色的同时，如何让网站也一同切换？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
