首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS变量实现暗黑模式,我的小铺页面已经支持

最近微信被苹果逼的开发了暗黑模式,越来越多的网站和应用开始支持了暗黑模式,许多人也喜欢为网站选择暗模式,也许他们喜欢这样的外观,或者他们想让自己的眼睛免受疲劳。...这篇文章告诉你如何实现一个自动的 CSS 暗模式,根据你的访客的主题来改变。 我在自己的博客页面我的小铺页面实践了一下用 CSS变量 和 @media查询 实现暗黑模式。 ?...如果有人使用深色操作系统主题并访问您的网站,您的网站现在将自动切换到黑暗模式。 下面是我博客博客小码页面,效果,支持手动切换和自动切换两种。...复选框更改为 number 并单击 + 符号。 值更改为 1 并单击 tick 按钮。 现在页面应该变黑。 回到您的网站,主题应该已自动更新为黑暗模式。...我敢肯定,您的深夜访客只喜欢深色主题网站的访客会感谢您。 关注公众号,第一时间接收最新文章。如果对你有一点点帮助,可以点喜欢点赞点收藏,还可以小额打赏作者,以鼓励作者写出更多更好的文章。

1.6K10

如何在网页设计中实现深色模式:增强用户体验

但这不仅仅是一种趋势;这是一个持续存在的设计决策。 然而,到底什么是黑暗模式,为什么它如此受欢迎?从根本上来说,深色模式颠倒了用户界面的标准配色方案,用浅色文本代替深色色调,用明亮背景代替深色色调。...称为“深色模式”(有时称为“夜间模式“深色主题”)的设计功能会修改用户界面的配色方案,使其主要使用深色黑色背景以及浅色文本和图形元素。...更好的可读性:文本放在深色背景下可以使其容易阅读,特别是对于对眩光敏感或有特定视觉障碍的人来说。与黑色背景形成鲜明对比的浅色文本经常用于深色模式设计中,以帮助用户在不疲劳的情况下感知和理解信息。...以下是如何在保持可访问性的同时在黑暗模式下进行设计: 保持足够的对比度:确保深色背景不会过多遮挡文本交互功能,以便仍然可以阅读和区分它们。...设计师可以通过黑暗模式无缝地融入到他们的设计中并强调可访问性考虑因素来开发包容性和用户友好的体验,以吸引不同的受众。

11810
您找到你想要的搜索结果了吗?
是的
没有找到

一步到位:三行CSS代码轻松实现全网站暗黑模式

下面是正文~~ 深色模式是一种设计趋势,网站的配色方案被更改为深色背景,配以浅色文字和元素。它也被称为夜间模式黑暗主题。...许多热门网站和应用程序现在都提供了黑暗模式选项 —— 如 TailwindCSS: 如果您是开发者,您很可能已经知道如何在开发者工具中切换暗黑模式: 如果你想要为操作系统(以及所有支持暗黑模式的应用程序...这是一个浅色模式演示,在Safari中展示了可用的系统颜色: 如果我们切换到深色模式,某些颜色会完全改变(就像我们已经遇到的 Canvas 和 CanvasText ),而其他颜色只会稍微改变: 使用系统颜色进行黑暗模式是一种简化的黑暗模式体验...是的,它会起作用 — 但是纯黑白有点无聊 我们可以在CSS中使用 color-mix 来增加趣味性 CanvasText (黑色白色)混入 Canvas (白色黑色)以获得 background-color...他们可能喜欢系统设置为深色模式,但我们的网站是浅色模式。让我们创建一个切换器!

1.3K30

互联网移动端即将进入“暗黑时代”

2019-移动端开启“暗黑时代” 2019-6-3 苹果全球开发者大会 iOS 13发布 - 新增暗黑模式 2019-5-7 Google I/O 2019 Android Q发布 - 推出暗色模式...2018-9 MacOS Mojave增加了深色模式 2018-10 Windows 10新版本中增加了暗黑主题模式 2017-11 Kindle Oasis推出黑白调换功能,支持深色模式...早在One UI中,三星加入了全局的黑暗模式,开启后在自带的应用中能够生效,AMOLED屏幕纯黑、省电的特殊性能发挥到了极致。 ?...另外,在黑暗环境中,黑暗模式也会更有利于用户使用手机,尤其在夜间/手机亮度低的场景下使用手机时对眼睛也有一定的保护效果。...https://jailbreaknerds.com/download-ipados-13-beta-ipsw-for-ipad-direct-download-links.html 各位测试同学们,有没有做好迎接

1.3K20

2.24 VR扫描:TGS 2020演示PS5和Xbox Serie X;林登实验室计划出售《Sansar》

2020东京电玩展:演示PS5和Xbox Serie X 近日,2020东京电玩展(TGS 2020)主办方(CESA)宣布,本届展会主题为“The Future Touches Gaming First...该平台采用免费增值模式,用户可以免费访问平台上的世界,但如果要管理三个以上的体验,创作者则需要缴费。 VRPinea独家点评:看来《Sansar》没能创造足够的收入来支持林登实验室继续发展该项目。...Spatial、Nreal、高通与运营商合作推AR协作方案 近日,Spatial、Nreal和高通公司将与LG Uplus、KDDI以及Deutsche Telekom AG开展合作,联合更多的参与者、丰富的应用...Look Around是苹果在iOS 13引入的一项交互式功能,能让用户通过3D街景来探索城市,类似于谷歌街景。 ?...VRPinea独家点评:再也不用担心找不到附近的停车场、饭店、宾馆酒店啦~

39010

谷歌IO时隔3年回归线下!发布新安卓新手机,还立下AR眼镜等一堆Flag

最后,AI Test Kitchen展示了LaMDA 2如何“分解复杂的目标主题”。...据介绍,Google Maps使用了新的沉浸式视图模式,用户可以从上方俯瞰某个位置了解周围的情况,比如实时交通信息。 沉浸式视图的图像都是通过计算机技术生成的,这结合了谷歌的卫星捕捉技术和街景照片。...有了沉浸式视图,用户不仅可以看到细致的街景信息,还能够真正的走入商店,查看店内情况。 谷歌也公开了非洲建筑物数据集,这类数据集也已经被联合国等机构使用,以便提供及时的紧急救援等。...用户要打开该模式,就需要同时开启Face Match和Voice Match,开启后,用户就能在目光聚焦于屏幕的同时说出自己的需求提出问题。...而谷歌也开放肤色量表的源代码,通过与社会各界人士地合作,不断改善系统,以包容的模式为图片中的肤色和发色等进行标注。 在隐私方面,谷歌还宣布了一系列新的隐私措施,帮助用户更好地控制他们的数据。

41110

iOS应用黑暗模式设计终极指南(附套件下载)

这些只是指导原则,因此您可以为应用程序app自定义黑暗模式。请注意,不要生搬硬套。 02 层级结构 与Google的层次基于颜色和阴影的差异不同,Apple仅界面中的层次视为颜色。 ?...这些适用于给人以更高的层级或与众不同(分组)内容的元素。 ? 需要注意,黑暗模式下的颜色不仅仅是与亮模式下的颜色相反。必须为所有元素分配一组单独的颜色,也就是说,你必须重新设计它们。...我要说的是,如果您为每个元素分配语义颜色,例如'SystemBackground''LabelColor''FillColor'“,则操作系统根据模式知道自动显示哪种颜色。...它们可用于文本,图标形状。我下面的强调色改为不同颜色,你会发现他们会变成这样的: ? 但是,这9种颜色在亮模式和暗模式下略有不同。...如果您选择使用这些系统强调颜色,则该应用程序将自动模式色调颜色更改为模式色调颜色。 ? 你会发现亮模式和暗模式下的颜色是稍有差异的,请务必注意。后者比前者要亮一点。

3.1K10

关于 Ubuntu 20.04 LTS Focal Fossa,我所知道的一切

在这篇文章中,我们看到一个新的Ubuntu 20.04 LTS Focal Fossa的概述和优缺点。...如何获得 Ubuntu Focal Fossa 20.04 LTS 新版本 如果您使用的是Ubuntu 18.04 LTS19.10,则很幸运可以操作系统升级到新版本。...2、更快的引导程序和锁定屏幕 在新的Gnome 3.36中,启动时间比以前少了一点,而且锁定屏幕动画也比以前的Ubuntu版本流畅。...4、黑暗主题(Dark主题) 新升级的操作系统中安装了3个新主题。由于黑暗模式是2019年最受欢迎的功能,Ubuntu也在Window colors中加入了黑暗模式。...新的主题是浅色(Light)、标准(Standard)和黑暗(Dark)。这个黑色的主题便于夜间使用。基于您的显示质量,您将感受到黑暗主题的优势。这样可以减轻眼睛疲劳。

2.4K10

Elasticsearch 7.0 正式发布,盘他!

1.3 默认分片数改为1,不再是5。 ? 1.4 Elasticsearch 7.0 没有 Type 了,包括 API 层面的。...1.6 Kibana 支持全局开启“黑暗模式 用户可以选择打开主题:Kibana->高级设置->dark Mode,而不是必须在很多地方打开黑暗模式,它将适用于所有应用程序。 ? ?...集群的伸缩变得安全、容易,并且可能造成丢失数据的系统配置选项更少了。 节点清楚地记录它们的状态,有助于诊断为什么它们不能加入集群或为什么无法选举出主节点。...不支持在升级期间在同一群集中运行多个版本的Elasticsearch,因为无法已升级的节点复制到运行旧版本的节点。...比如:7.0的黑暗模式,实际在grafana类似竞品BI中都有类似的功能,猜测Kibana升级一方面是用户需求,另一方面也是竞品分析的结果。 新版本性能极大提升。

1.7K40

2019 WWDC:渣男iPad提分手;iOS变黑;史上最贵Mac Pro

新款支持噪音检测,能提醒用户周边的噪音状况。“大姨妈记录和预测”功能的上线,在收割无数女粉的同时,肯定也会掏空男同胞们的钱包。...移动操作系统发展到今天,早已进入“抄作业”模式。继上个月Android 宣布变黑之后,iOS也迎来了黑暗模式主题。iPhones,iPad和iPod touch均在新系统中有暗模式可选。...此次Apple Map加入了用户最喜欢的位置和交互式街景,赢得欢呼声一片。但百度地图们不是早都有了吗?国内用户肯定不感冒。...新macOS最大的变化就在三家分晋:iTunes拆分为Apple Music、Apple Podcasts和Apple TV三个应用。FindMy的功能进一步升级。...新款框架的特性主要有:简洁,高效的代码,Craig Federighi现场演示了一百行代码可以简化只十几行;热重载功能可以让你及时预览效果。代码有多简洁呢?

51130

Android 10.0正在来的路上!

万众期待的黑暗模式来了 而在XDA的爆料中,这次Android Q最大的亮点就是官方终于响应了用户的请求,在系统层面上加入了全局夜间模式,也就是俗称的黑暗模式。...故而,让谷歌推出一个在全局条件下都能够适用的夜间模式,也就成为了用户的迫切需求。 ? 根据XDA的介绍,要启用黑暗模式,只需点击显示设置中的“设置黑暗模式”选项即可。...用户可以黑暗主题设置为始终启用,也可以根据适用使用习惯在某个时间段自动启用。启用之后,包括设置、APP、桌面等元素都会在屏幕主体部分变成深灰色的色调,而通知栏等部分则是纯黑色。 ?...除了黑暗模式,还有其他的一些新功能 除了最大的亮点黑暗模式外,Android Q还有两个主要改动。...在Android系统上有了ANGLE引擎的帮助,游戏开发者就能容易的OpenGL API转码为Vulkan API。

89550

Android 11 最重要的新feature

Dark theme 当Google在Android 10中引入本机黑暗模式时,这非常令人兴奋。但是,这非常简单:它可以打开关闭。...Android 11,用户现在可以使用两个不同指标之一来安排黑暗主题。您可以安排在太阳落山升起时打开关闭黑暗主题。如果需要,您还可以为黑暗模式激活设置自定义时间表。...普遍来说这是一件好事,因为即使OEM放弃了Android手机,它也可以使Android手机安全。 应用共享 Android的共享系统是一团糟。...现在,您可以应用程序固定到共享表,以便在您想共享任何内容时轻松访问它们。,您可以Chrome的打印功能固定到共享页的选项,甚至可以Chrome的功能发送到其他设备。...当然,仍然会有很多人随身携带第二部智能手机会感到自在。不过,至少这项新功能可能会吸引一些用户避免这种情况! 对话通知 在Android 10中,通知列表包含了所有通知。

90010

10种帮你改善UI设计质量的窍门

前天的不可不知的10条UI设计经验法则 不知道大家有没有从中获得一些启发呢?今天咱们继续:10种帮你改善UI设计质量的窍门。一起来看看吧! 01....幽默和个性的灵魂融入到市场营销中,他们创造了无数令人难忘的广告和内容。 ?...04.明智的使用黑暗模式 ‍ ? 为你开发的应用加入深色主题是一个非常棒的选择,深色模式会让眼睛舒服一些,让我们感觉自己不是总盯着灯泡。...在黑暗模式下进行设计与在浅色模式下设计并没有太大不同,你只是需要一个不同的配色方案。我们建议让用户自己决定使用黑暗模式还是浅色模式,这可以让你的应用体验更加友好和贴心。...Medium里的拍手效果和YouTube的“赞”相比,是完全不同的用户体验。YouTube中,单击时仅仅颜色从灰色变更为蓝色。

68420

Material Design Compoents 1.1.0

Material Design Compoents 1.1.0 增加了 Material Theming,新的组件、黑暗主题支持、等等 新的功能: 所有组件都支持黑暗主题 新的日期选择器(具有范围选择功能和提升可访问功能...随着指南不断的变化更新,MDC 进行调整并更新来满足新的规范。 1.1.0 有什么新功能 MDC从 1.0.0 开始发生了大量的改变!...新颜色:默认调色板已扩展为了深色主题已经扩展了。应该进行调整 colorPrimary colorSecondary 以使品牌在黑暗主题中的饱和度降低。...默认情况下 colorSurface android:colorBackground 使用深灰而不是黑色来减轻眼睛疲劳,使高程度明显,并确保与文本和其他元素形成适当的对比度。...海拔表面增亮:所有 MDC 组件都支持其表面增亮来传达黑暗主题中的海拔。指南中的白色覆盖投影映射到组件上设置的 elevation 的数值。 可访问性:MDC 利用颜色来区分是否可以访问。

1.1K10

一文看尽Google IO大会:史上最快手机全语音操控,不开口也能打电话,安卓Q登场

2小时主题演讲,全球AI第一大厂秀出最新黑科技进展,并且情怀依然满分,Google用行动诠释科技向善。 今年大会演讲主题:Keep making magic. 究竟Google的最新黑科技魔法有哪些?...那有没有可能是看到一张图片,也想知道更多相关信息? 谷歌说Google Lens——智能拍照\图搜应用,为此而生。而且不是拍照识别那么简单。 现在Google Lens还能做更多。...谷歌团队Google Go整个大小控制在100kb以下,35美元价位(200元)的手机,有摄像头就能使用。 真正做到用得起、用得好,一款Google Go在手,世界说走就走。...除此以外,跟此前Android Q的测试版体验差不多,系统的设计和交互也有新变化: 比如,加入全局“黑暗模式”、新增 WiFi 分享功能、新增支持录屏及“桌面模式”、优化Pixel的线性马达效果,优化系统手势交互...炫酷的AI能力也别放到手机里。 Pixel 3a现在能过滤骚扰电话,地图AR结合街景导航,比看地图箭头更直观。 Google还把智能手机做到了AI智能和功能机功能的完美结合。

1.6K30

Google IO大会:5G和折叠屏来了,还有这些改变世界的黑科技

2小时主题演讲,全球AI第一大厂秀出最新黑科技进展,并且情怀依然满分,Google用行动诠释科技向善。 不忘初心,AI前行。技术愈精,情怀越高。今年大会演讲主题:Keep making magic....那有没有可能是看到一张图片,也想知道更多相关信息? 谷歌说Google Lens——智能拍照\图搜应用,为此而生。而且不是拍照识别那么简单。 现在Google Lens还能做更多。...谷歌团队Google Go整个大小控制在100kb以下,35美元价位(200元)的手机,有摄像头就能使用。 真正做到用得起、用得好,一款Google Go在手,世界说走就走。...除此以外,跟此前Android Q的测试版体验差不多,系统的设计和交互也有新变化: 比如,加入全局“黑暗模式”、新增 WiFi 分享功能、新增支持录屏及“桌面模式”、优化Pixel的线性马达效果,优化系统手势交互...炫酷的AI能力也别放到手机里。 Pixel 3a现在能过滤骚扰电话,地图AR结合街景导航,比看地图箭头更直观。 Google还把智能手机做到了AI智能和功能机功能的完美结合。

1.3K60

给你的应用建立一套配色方案

hover创建纸层的外观。...另一方面,用户通常为不同的环境选择一个黑暗主题,比如夜间。这些因素使我在黑暗主题中牢记两件事: 用户在使用此主题时通常会处于黑暗中,因此请在黑暗中进行测试。...以下颜色具有较高的亮度值,使它们接近白色。...我想让它容易留在主题中。 为了实现这一点,颜色方案的使用应该完全通过通用自定义属性完成,我们将在稍后定义。这样,使用设计变量的人永远不必担心当前设置的是哪种配色方案,他们只需要使用表面和文本颜色。...深入了解以下代码块中灯光主题的连接样式,通用自定义属性与灯光主题特定颜色连接起来。现在所有用途都var(--brand)将使用浅色品牌颜色。

1.7K40

好用的思维导图工具-xmind2020 v10.1.1附安装教程,仅供学习使用,请支持正版软件

三、安装 1.下载地址,仅供学习使用,请支持正版软件: 链接:https://pan.baidu.com/s/1wPKxKxtVbCjXNOAKpADmvA 提取码:2byv 2.下载好的资源包进行解压...,选择符合自己电脑版本的软件进行安装 3.替换app.asar文件 软件安装好后先不要打开,crack内相应的破解文件解压后进行复制,复制的app.asar文件移动到软件的安装目录 resources...2、支持深色模式调整 增加了深色模式,在大纲视图下也能尽享黑暗,让双眼舒适,沉浸于思维的捕捉; 3、支持界面大小缩放 可根据使用设备大小,可用手势快捷键 Command、Ctrl+加/减号进行整体的缩放调整...传达出一种干脆利落的果断和自信; 7、精心设计的图标号 重新设计了所有的标记,新增了不同颜色的 tag,每个小小的标记都暗藏了设计师巧妙的心思; 8、更加好用的调色盘 重新设计了色盘的颜色,纯度更高,颜色扎实更年轻清爽...,观感愉悦; 9、新增酷炫主题风格 在保留原来用户喜爱的主题风格的基础上,新增了很多让人耳目一新的主题风格,让你有更多的选择; 10、其他 此外,该 版本还新增了很多其他的功能选项,更多精彩可以自行下载体验

50630

黑暗模式UI设计风潮来袭,设计师应如何应对?

静电说:在最近一段时间里,黑暗模式成了大家讨论的话题。...继Mac OS加入黑暗模式后,iOS和iPad OS也相继发布了黑色模式的选择,未来的一段时间里,越来越多的应用开始适配黑暗模式,仿佛它已经成为了UI设计中的一个标配选项。...比如最新的 macOS Mojave 中加入的深色系主题,就是用户呼吁了很多年之后的结果。 不过,真的要深入到 UI 设计的「黑暗面」,设计师还需要跨越很多挑战。...大量的 B2B的程序, SaaS类产品,以及媒体类数字产品,如今大都配备了深色系主题,让用户在合适的时候从浅色主题下切换过来,用来调整和修正视觉模式,降低视觉疲劳。...为了确保产品的基本可用性,最好的选择其实是深色和浅色系的 UI元素混合搭配起来使用。

66520
领券