- 综合排序
- 最热优先
- 最新优先
- 来自专栏walterlv - 吕毅的博客
为博客添加可切换的暗色和亮色主题
而对于 css，我们为每一个与主题色相关的颜色添加一个与之对应的 dark-theme 样式。 那么，我们只需要即时切换 body 的 dark-theme 的出现与否，就能让浏览器为我们使用全新的样式和颜色。 编写 css 第一个要改变的，当然是背景色了。 如果原来的背景色是设置到 body 上的，那么我们就通过 .dark-theme 指定一个暗色版的背景色。 当然，如果希望立即能够看到效果，应该在 body 上加上 dark-theme 这个 class。 编写 js 其实我们的 js 只有一句话，就是切换 body 上的 dark-theme，所以我选择直接内联。
1.3K10发布于 2018-09-18 - 来自专栏终身学习者
如何在Vue中动态添加类名
'dark-theme' : 'light-theme'" > This is how you add dynamic classes in Vue. </template> 如果darkMode为true，则将dark-theme用作我们的类名。 否则，我们选择light-theme。 当darkMode为 true 时，会把dark-theme作为一个动态类名应用于我们的元素。但是light-them不会被应用，因为!darkMode 值为false。 'dark-theme' : 'light-theme'" /> </template> 之所以起作用，是因为Vue直接在MovieList的根元素上设置类。 'dark-theme' : 'light-theme'; } } }; 这不仅易于阅读，而且还可以轻松添加新功能并在将来进行重构。
9.4K10发布于 2020-05-12 - 来自专栏程序员的碎碎念
Bootstrap4如何动态切换主题
link的id是哪个，如果是默认主题的话，就传送新主题的id给change()函数，否则亦然 if (link.id === "default-theme") { change("dark-theme cookies了 document.cookie = "themeCookies=default-theme;path=/"; }else if(themeName === "dark-theme "){ link.id = "dark-theme"; link.href = '/static/bootstrap4.0.0/css/bootstrap_gray.min.css '; document.cookie = "themeCookies=dark-theme;path=/"; } } // 获取cookie中当前主题的id，没有则返回默认的default-theme
3.2K30发布于 2019-03-07 - 来自专栏Theo Tsao
Ionic3学习笔记（十）实现夜间模式功能
background-color: #f8f8f8; } .tab-button { background-color: #f8f8f8; } } theme.dark.scss: .dark-theme BehaviorSubject} from "rxjs/BehaviorSubject"; @Injectable() export class SettingDataProvider { // true: dark-theme settingDataProvider.getActiveTheme().subscribe(theme => { if (theme) { this.theme = 'dark-theme
1.1K30发布于 2018-09-07 - 来自专栏智影Yodonicc
CSS 2020 Level 4：缩短选择器长度的新伪类
hotpink; } /* in the middle */ article :is(header,footer) > p { color: gray; } /* at the end */ .dark-theme :where(button,a) { color: rebeccapurple; } /* multiple */ :is(.dark-theme, .dim-theme) :where(button p,blockquote) { color: black; } :is(.dark-theme.hero > h1) { font-weight: bold; } article:is(.dark-theme
1.1K61编辑于 2022-04-20 - 来自专栏大数据
CSS进阶-CSS变量
background-color: var(--theme-color); } .button { background-color: var(--theme-color); } /* 切换主题 */ .dark-theme document.getElementById('toggleTheme').addEventListener('click', function() { document.body.classList.toggle('dark-theme
60210编辑于 2024-06-14 - 来自专栏腾讯IMWeb前端团队
Dark Mode 实践踩坑记录
document.querySelector('.btn-toggle'); btn.addEventListener('click', function() { document.body.classList.toggle('dark-theme window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.body.classList.add('dark-theme '); } else { document.body.classList.remove('dark-theme'); } 用户偏好 这个功能其实是有真实的需求的，比如如果我们不记住用户偏好，那么肯定只能有一种默认值
81530编辑于 2022-06-29 - 来自专栏前端新视界
Angular Material 的设计之美
dark-accent: mat-palette($mat-amber, A200, A100, A400); $dark-warn: mat-palette($mat-deep-orange); $dark-theme alternate dark theme instead of the default theme. .unicorn-dark-theme { @include angular-material-theme($dark-theme
6.2K30发布于 2019-09-29 - 来自专栏Base_CDNKevin
腾讯云AI代码助手编程挑战赛-创业者青桔
页面布局与主题切换 项目采用响应式布局，通过一个外层容器（app-wrapper）控制整体背景色，并结合 dark-theme 类来实现主题切换。
58610编辑于 2025-01-14 - 来自专栏前端架构
DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode
$colors { #{$var-element}#{$name}: #{$color}; } } 参考文章： 深色模式适配指南 https://www.zoo.team/article/dark-theme
4.1K10发布于 2020-12-11 - 来自专栏静Design
10个超实用的设计师专属Chrome小插件
链接： https://developers.google.com/web/tools/chrome-devtools/customize/dark-theme 8.ColorZilla
2.3K30发布于 2019-12-05 - 来自专栏MixLab科技+设计实验室
设计师会编程、程序员懂艺术之设计规范
颜色可以考虑2种主题，light-theme及dark-theme，俗称日间模式及夜间模式。 ? 2.4 字体 ? 一般包括从H1、H2、H3、H4、H5、p六种字体样式的设定。
1.4K60发布于 2018-04-16 - 来自专栏采云轩
深色模式适配指南
/dark-theme'; // 创建一个 style 元素，用于插入 css 定义 const createStyle = (content) => { const style = document.createElement
3.5K31发布于 2020-08-18 - 来自专栏图雀社区
类型即正义：TypeScript 从入门到实践（序章）
fixBabelImports, addLessLoader } = require("customize-cra"); const darkThemeVars = require("antd/dist/dark-theme
1.9K20发布于 2020-04-15 - 来自专栏码艺坊
探索Less：CSS的高级应用之旅
color: @colors[text-color];}// 使用混合（mixin）实现主题定制body { .theme(light-theme);}.dark-mode { .theme(dark-theme
55711编辑于 2024-09-19 - 来自专栏图雀社区
[译] 为新的Facebook.com重建我们的技术栈
.light-theme { --card-bg: #eee; } .dark-theme { --card-bg: #111; } .card { background-color: var
2.5K20发布于 2020-05-12 - 来自专栏跟着AI学
【跟着AI学】MindFlow项目开发实战（三）
editor-border', editor.editorBorder); // 添加主题类型 class document.body.classList.remove('light-theme', 'dark-theme
17610编辑于 2026-01-16 - 来自专栏code秘密花园
2022 年的 CSS 全览
避免与 @scope的排序和范围之争： @scope (.light-theme) { a { color: purple; } } @scope (.dark-theme) { a { color
5.1K20编辑于 2022-05-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号