这不像设置静态值那样简单，如3：1。经验丰富的设计师会清楚的了解，基于背景颜色，色调和其他上下文来选择具有不同对比度的重要性。...这很复杂，但这是在创建一种色彩系统，所以您可以继续整体调整系统 - 同时保持对对比度的控制，这是可访问性的重要组成部分。 颜色选择基于设计师预期的最终用途，以便在选择过程中减少大部分可访问性评估。...如上图所示，A与B两种灰色看起来是不一样的，但色值一样 这种现象的一个最明显表现就是，在UI界面的浅色系背景和深色背景中使用的灰色，你会发现他们在人眼的感知中是完全不一样的。...虽然对比度为3：1的颜色在浅色主题中可能看起来很好，但对比度为3：1为且深色背景的相同颜色（灰色），似乎没有足够的对比度。...在真实工作中，这可能意味着使现有的颜色主题变暗或变淡，或者变为全新的主题。使用我们上文介绍的方法，可以在产品个性化的同时不违背产品的体验和设计意图。
2、Dracula Official 安装次数：2,886,381 德古拉也是一个由 Zeno Rocha 创建的经典 VS Code 深色主题，适用于 Visual Studio Code 和其他 181...3、GitHub Theme 安装次数：2,682,414 经典 GitHub 配色，有浅色、深色、浅色默认、深色默认和深色变暗版，适合 GitHub 老粉使用。...Owl 安装次数：1,128,643 这个主题的名字就叫“夜猫子”，适合加班党 适合那些深夜才有灵感的人们使用，字体和背景的配色都非常适合弱光环境，有斜体版本和无斜体可选择，还有个白天的版本“Light...13、Noctis 安装次数：511,688 暖色和冷色混合的均衡搭配，看起来很舒服，还可以减少眼睛疲劳。8个深色和3个浅色版本任君选择，总有一款适合你。...注意： 此排名旨在为大家介绍 2022 年流行的 VS Code 主题， 不代表 VS Code 官方排名 。且排名时只选取了通用主题，并未包含如微软的 C/C++主题这类针对特定语言的主题。
图层混合模式是Photoshop CS3中最核心的功能之一，也是在图像处理中最为常用的一种技术手段。使用图层混合模式可以创建各种图层特效，实现充满创意的平面设计作品。...在变暗模式中，查看每个通道的颜色信息，并选择基色与混合色中较暗的颜色作为结果色。...如下图，混合色为黑色的区域均显示在结果色中， 而白色的区域消失，这就是线性加深模式的特点。 7，深色混合模式 深色混合模式依据当前图像混合色的饱和度直接覆盖基色中暗调区域的颜色。...基色中包含的亮度信息不变， 以混合色中的暗调信息所取代，从而得到结果色。深色混合模式可反映背景较亮图像中暗部信息的表现， 暗调信息亮部信息。...在强光模式下，当前图层中比50%灰色亮的像素会使图像变亮；比50%灰色暗的像素会使图像变暗，但当前 图层中纯黑色和纯白色将保持不变。
秘诀是将黑色和白色专门用于最亮的高光和最暗的阴影。 surface 颜色 surface颜色是文本所在的背景、边框和其他装饰表面。在浅色主题中，这些是浅色，而不是深色的文本颜色。...4 种表面颜色，因为装饰颜色往往需要更多变体，用于交互时刻，如:focus或:hover或创建纸层的外观。...阴影 配色方案中的阴影是超越的，但为效果添加了栩栩如生的自然效果，并帮助它从不切实际的黑色阴影中脱颖而出。为此，阴影的颜色将使用色调自定义属性，色调略微饱和但仍然很暗。...另一方面，用户通常为不同的环境选择一个黑暗的主题，比如夜间。这些因素使我在黑暗主题中牢记两件事： 用户在使用此主题时通常会处于黑暗中，因此请在黑暗中进行测试。...这是有道理的，因为很难使已经相当黑暗的东西变暗。这是--shadow-strength-dark非常方便的地方，因为它允许我们通过改变一个变量来使阴影变暗。
至此，工程项目已经创建好，如下图所示： 此时，单击工具栏中的 “启动”按钮，可以看见debug下的调试窗口。像windows普通窗口一样，可以拖动，点击右上方关闭按钮可以关闭并退出调试。...2.软件的图形化窗体设计 串口助手（简洁版）相关的图形化窗体设计，我们需要用到 “工具箱 ” ，如“果在工程中没有找到 “工具箱”窗口，可以在软件上方菜单栏 “ 视图” -》 “工具箱” 中...提醒：在属性窗口打开后，点击我们正在设计的串口助手窗体空白处，可设置整个窗体的属性哦！！...这时细心的你会发现窗体中没有串口图标，不要担心，它在你的窗体下方，因为他是一个隐式（不可见的）（后台的）控件。 在串口的属性窗口中，我们发现可以设置波特率、串口号、停止位、校验位等参数。...选择 工具箱 -》 组件 -》 Timer（定时器控件），单击选择到窗体中。他也是一个隐式控件。
以 Trip.com 的品牌蓝为例，若颜色不做调整，直接展示在深色背景上，不仅信息的清晰度降低了，而且识别的费力度还增高了。...UI中的彩色，统一进行了降饱和处理，这些彩色会应用于不同的场景，可能是背景，行动点，标签，或者是图标等等地方，那么当彩色用于背景时，为了确保文字和背景色有足够对比度，低饱和度的浅色背景就需要配合深色字一起使用...我们插画系统中的物体和人物沿用这种设计，在暗环境中，由于光线不够充足，人物的肤色会跟着变暗，衣服的颜色也会发生微妙的变化。比如白色、鲜亮的衣服，到了暗环境下，就会呈现灰色、低饱和度的暗色。 ?...，所以我们只要控制 KeyWindow 的该属性，就可以控制整个 App 的主题。...3.1.2 适配方案 1）设置开关 ? App主题设置逻辑如图，KeyWindow 只有在App和系统都开启 Dark Theme 时，才会开启 Dark 主题。
背景（0dp 高程叠加） 前景（1dp 高程叠加） 主色调 次要色 在背景上的元素 在前景表面上的元素 在主色调上的元素 在次要色上的元素 行为 深色主题应该可以通过外在显示的开关控件，来打开或者关闭的...在APP的顶部菜单中显示主题开关 ? 在弹出菜单的菜单层中显示开关 ? 在APP的设置列表当中显示开关 属性 深色主题使用的是深灰色，而不是黑色来作为主要的色彩。...主色 主色应该是整个界面和组件中最常显示的色彩。在整个 Material Design 的深色主题中可以使用的基准色彩有超过200种不同的色调。...你可以为你的深色模式色彩主题选择更合理的色彩，来构建配色。 ?...错误 避免在深色主题中使用高饱和度的色彩，因为它们可以在深色的背景上形成炫光效果。 ? 默认主题下，在顶部菜单中使用配色方案中的主色。 ?
当您想使颜色变暗时，在设计时要方便得多，因为当您看到 HSB 的情况时，HSB 可以更直观地处理颜色属性，您可以减少 B 而不是通过混合红色、绿色和蓝色来变暗的 RGBA。...黑白：主要用于背景和文字，最亮和最暗的颜色 颜色层级（重要性） 既然已经决定了产品中要使用的颜色类型，在页面上使用颜色时，请遵循信息的重要性。...A（最少）——3:1 AA - 4.5:1 AAA — 7:1 静电说：我们在这里为大家提供了一个颜色对比检查器，请关注我们的公众号后，在聊天窗口回复“对比”，获取检查器吧 互补！...原因有以下几点： 原因一：自然界颜色的变化 在现实中，当光线强时，物体的色彩饱和度会变弱（想象一下，当你将手电筒放在苹果的正前方时）。颜色出现是因为光被材料反射。反射太少会使它看起来很暗。...在设计深色模式时，背景颜色是反转的，所以不要使用相同的颜色，而是为每个主题使用合适的颜色。
在众多VS Code主题中，有19个因其独特的设计和舒适的色彩搭配脱颖而出，成为了大家的热门选择。比如说排名第13的Noctis主题，以其低调而不失个性的色彩搭配，赢得了无数开发者的心。...安装次数：6,822,287 德古拉也是一个由 Zeno Rocha 创建的经典 VS Code 深色主题，适用于 Visual Studio Code 和其他 181+ 应用程序， 是有史以来最流行的...3、GitHub Theme 经典 GitHub 配色，有浅色、深色、浅色默认、深色默认和深色变暗版，适合 GitHub 老粉使用。...夜猫子”，适合加班党 适合那些深夜才有灵感的人们使用，字体和背景的配色都非常适合弱光环境，有斜体版本和无斜体可选择，还有个白天的版本“Light Owl ”。...选择一个你喜欢的主题，让你的编程之旅更加愉快吧！ 总结 总的来说，2024年的VS Code主题大盘点给了我们太多惊喜。从深邃的夜间模式到清新的日间模式，从极简主义到复古风格，总有一款会触动你的心弦。
---- 试验用的源代码 本文将创建一个简单的 WPF 程序来验证 SetWindowCompositionAttribute 能达到的各种效果。你也可以不使用 WPF，得到类似的效果。...还记得我们前面叠加的颜色是什么吗？ 接下来别忘了然后把它误以为是我系统的主题色哦！...---- 使用 WindowChrome 在 Windows 10 上，在获得焦点的时候整个背景是系统主题色；而失去焦点的时候是灰色，但边框部分是深色。...---- 在 Windows 10 上，没有使用 WindowChrome： 你可能需要留意一下那个“诡异”的模糊范围，你会发现窗口的阴影外侧也是有模糊的！！！你能忍吗？...记得前面我们说过的吗，会导致阴影消失哦！ 呃……你将看到……这个…… 什么都没有…… 是不是找到了一条新的背景透明异形窗口的方法？
Dark Mode in Sass》 sass颜色函数实现深色模式 在定义sass变量时，我们会有基准尺寸，如： $h1-font-size: $font-size-base...default; 颜色，我们也可以定义基准颜色，主题色系，通过sass颜色函数，生成整个主题。...，让颜色变暗，创建一个新的颜色； invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。...在Sass中为RGB颜色提供六种函数： rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色； rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色...具体地说，选择权重是每个RGB的百分比来衡量，当然透明度也会有一定的权重。其中指定的比例会包括在返回的颜色中。
咱们下面就一个事件，一个事件的写代码，代码后都有详细的注释，大家不要心虚。。。。。 1.窗口加载时事件（程序） 窗体刚刚加载出来，就是弹出软件窗口的一瞬间，算个事件吧。那怎么去编写这一段的程序呢？...我们到上一章编好的可视化窗体中，去双击窗体的空白处，就跳转到对应的事件发生程序中去了。...2.定时器中断事件（程序） 上一章在可视化窗体编辑过程中，我们添加并使能了定时器控件，并设定时周期为500ms。所以在程序中，我们需要为其添加定时器中断处理程序。...3.串口开关按键按下事件（程序） 在GUI界面中，我们做了一个“”打开串口“”按键，用于打开上位机串口。同样双击按键图标进入事件对应的程序段。...这里需要这样来进行创建和打开。 在串口属性窗口中，单击这个像闪电一样的图标。
这对于一个公司来说很有意义，他们的咨询和技能很有价值。 绿色 传递：增长，稳定，金融主题，环保主题 ? 绿色缓和了暖色调和冷色调之间的差距，虽然往往是更酷的颜色。...活动设计机构 Van Vliet＆Trap 巧妙运用深蓝色，通过在背景中的花中使用蓝色，他们在视觉上提示他们在花艺设计的专业知识，同时也散发信任和可靠性。...深色的米色（如 Dishoom 网站上）将创造一种土质和几乎纸状的纹理，而较浅的色调感觉更新鲜。在这种情况下，围绕品牌名称的较浅的阴影，向外变暗，帮助给餐厅创造一种取自大地精华的新鲜食材的感觉。...在12步色轮上，选择彼此相隔120度的任意三种颜色：一种颜色用于背景，两种颜色用于内容和导航。 ? 复合（分裂互补） – 这个配色方案略微复杂，但如果用得好，可以收到不错的效果。...通过使用蓝色，绿松石和绿色的类似网站， Blinksale 创建一个柔和，甚至具有安全气氛的网站。注意他们如何使用对比的黄色来吸引注意他们的号召力。 ?
2.避免纯黑色 虽然大家对深色模式的印象是“黑”，但其实在真正展示中很少包含纯黑色，甚至纯黑色就不是一个好的选择。纯黑色会增大对比，就如第1点所说，会损害阅读性。...想在深色模式下突出视觉层次，需要用颜色、透明度等方式创建界面层次。 4.用颜色层级创建视觉层次 在深色模式下，即便非100%的黑色也很难看出阴影效果。 所以想突出视觉层次，就需要利用颜色层级来实现。...需要深色模式开发的背后，通常都会有一个数字化产研团队，设计师仅是团队中的一环，其中对比度、阴影、颜色更是需要严格管理和把控的设计规范。...点击查看Apple和Google设计规范： 深色模式- iOS 深色模式- macOS Google-黑色主题 7.用户自由开关 最后这一点很重要，把深色模式的使用权交给用户决定。...就像开篇所说，目前关于深色模式的舆论，两极分化严重。所以，对深色模式设置灵活的开关方案，让用户自由选择是否使用。 △在摹客操作界面，也可以自由选择深浅
前言 在装好win10系统后，大都会问需要做什么设置才会使得系统更好用，一般情况下大家都会进行启动项的设置、关闭不必要的服务、关闭界面特效等等。那么除此之外还有什么办法让我们的系统更好用吗？...所以出现了虚拟桌面以创建多个独立桌面，一个跟女神/男神聊天，一个用来工作，互不干扰。 【步骤】Win+Tab打开时间轴，开始添加桌面，使用Ctrl + Win+方向键进行移动选择桌面。...第九种：深色模式 在桌面右键→个性化→颜色→选择颜色→深色开启（可能会两秒左右的卡顿延迟，稍安勿躁） 有没有感觉瞬间充满了神秘感？ 此外，大家可能留意到有一个自定义的项目。...选择默认Windows模式为浅色，选择默认应用模式为亮，直接变为浅色模式；选择默认Windows模式为深色，选择默认应用模式为暗，直接变为深色模式。...而另外两种组合对应的显示效果如下： Windows模式：浅色，选择默认应用模式：暗 Windows模式：深色，选择默认应用模式：亮 结语 除去以上这几种模式，win10中还有其他有趣的功能。
背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。...颜色的适配，需要使用系统提供的 API，在回调用中不同的模式下分别设置颜色，而图片的适配，需要在 XCode 的 工具栏中 Appearances 下选择 Any，Dark，在同一名称资源的配置下分别添加图片资源...）启用深色主题背景 使用"快捷设置"图块，从通知托盘中切换主题背景（启用后） 在 Pixel 设备上，选择"省电模式"将同时启用深色主题背景，其他原始设备制造商 (OEM) 不一定支持这种行为 在应用中支持深色主题背景...android:attr/textColorPrimary 这是一种通用型文本颜色，它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色，该颜色包含一个停用状态。 ?...如果我们想在应用程序的一部分中覆盖应用程序的全局的主题，我们可以将要覆盖的部分封装在一个 Theme 的 Widget 中，有 2 种方法可解决：创建特有的 ThemeData 或扩展父主题。
C# winform 界面美化技巧（扁平化设计） 转 关于C#界面美化的一些小技巧 在不使用第三方控件如 IrisSkin 的前提下，依然可以对winform做出让人眼前一亮的美化 ?...将主窗体FormBorderStyle更改为None，这样就得到了一个无边框的窗体（winform自带边框太丑。。）...调节背景色，建议找到自己喜欢的颜色，然后使用取色器（我用的是按键精灵自带的取色板）取得想要的RGB参数，输入到BackColor属性之中 在主窗体的Mouse_Down中添加如下事件，实现窗体随意拖动：...，在program.cs中，注释掉如下内容： using System; using System.Windows.Forms; namespace 界面美化 { static class Program...``我们可以先插入一个winform自带的ProgressBar，调整好位置，ForeColor，BackColor属性，然后进入窗体的Designer程序中做如下修改： //private System.Windows.Forms.ProgressBar
Android 12 可以通过动态配色提取算法来选择颜色值，基于动态配色，您可根据用户的桌面壁纸颜色生成自定义调色板。动态的浅、深色方案可体现在整个用户系统界面，以及某些应用中。...设计 Token 使得整个产品更具灵活性和一致性，它允许设计师们为界面中元素指定颜色角色，而非设定一个用于实现的值。生成设计 Token 时可通过确定一个单一事实来源，来节省开发者和设计师的时间。...当系统颜色在运行过程中发生变化时便会更新调色板以及配色方案，而后者便是您映射到主题背景和组件的配色方案。在相应的组件上使用正确的颜色规则，以确保可以无障碍访问和风格的连续性，这是至关重要的一点。...这一操作将更新颜色、排版和主题背景文件，更新代码后您即可运行应用来查看组件映射的新品牌主题背景。 使用动态配色 您可使用上述的网页工具，预览基于源颜色或图像生成的各种方案。...您可添加一个切换开关，以便用户在动态或自定义的主题背景之间进行切换，这两种方案都提供了深色和浅色两种方案供用户选择。 您可以有选择地应用动态配色，并与品牌配色方案同时生效。
C# winform 界面美化技巧（扁平化设计） 关于C#界面美化的一些小技巧 在不使用第三方控件如 IrisSkin 的前提下，依然可以对winform做出让人眼前一亮的美化 首先，我们先来实现主界面的扁平化...将主窗体FormBorderStyle更改为None，这样就得到了一个无边框的窗体（winform自带边框太丑。。）...调节背景色，建议找到自己喜欢的颜色，然后使用取色器（我用的是按键精灵自带的取色板）取得想要的RGB参数，输入到BackColor属性之中 在主窗体的Mouse_Down中添加如下事件，实现窗体随意拖动...，在program.cs中，注释掉如下内容： using System; using System.Windows.Forms; namespace 界面美化 { static class...“我们可以先插入一个winform自带的ProgressBar，调整好位置，ForeColor，BackColor属性，然后进入窗体的Designer程序中做如下修改： //private System.Windows.Forms.ProgressBar
领取专属 10元无门槛券
手把手带您无忧上云
