然后是文章详情页，可以看到效果还是不错的 博客详情页 下面，让我们一起来学习一下，如何通过几行代码，给自己的网站安排上暗黑模式 首先，在网站的 全局 CSS 样式文件中，新增下面两个样式 html[data-theme...=dark]{ filter: invert(1) hue-rotate(180deg); } html[data-theme=dark] img{ filter: invert(0.85) hue-rotate...当我们点击切换的时候， data-theme 的也会随着切换。 当切换成 dark 的时候，下面的 CSS 的 属性选择器 就会被激活，从而将网站的颜色进行反转。...html[data-theme=dark]{ filter: invert(1) hue-rotate(180deg); } html[data-theme=dark] img{ filter: invert...', 'dark') } else { this.darkModel = 0 window.document.documentElement.setAttribute('data-theme
在 App.vue 文件下的 mounted 中将 body 添加一个自定义的 data-theme 属性，并将其设置为 default // App.vue mounted() { document....getElementsByTagName("body")[0] .setAttribute("data-theme", "default"); }, 利用 webpack 自定义插件遍历主题目录文件.../default.scss // 也可以换成其他的自定义变量颜色 [data-theme="default"] .t-list-title, [data-theme="default"] .t-list-sub-title.../old.scss // 也可以换成其他的自定义变量颜色 [data-theme="old"] .t-list-title, [data-theme="old"] .t-list-sub-title,...global 表示覆盖原来的 [data-theme="#{$theme-name}"] & { $theme-map: () !
="b"> data-theme="b"> 涛哥伪专家管理系统 ...="b" > data-theme="b"> 涛哥伪专家管理系统 ...="b" > data-theme="b"> 涛哥伪专家管理系统 ...="b" > data-theme="b"> 涛哥伪专家管理系统 ...="b" > data-theme="b"> 涛哥伪专家管理系统
="a"> data-theme="a"> 涛哥伪专家管理系统 ... 跳转到下一个页面 data-theme...="a"> data-theme="a"> 涛哥伪专家管理系统 ... 跳转到下一个页面 data-theme=...="a"> data-theme="a"> 涛哥伪专家管理系统
="dark"] .tk-content { background: #000; color: #fff; } [data-theme="dark"] .tk-content a { color...: #dfa036; } [data-theme="dark"] .tk-content::before { border-right: 15px solid #000; } [data-theme...="dark"] .tk-master .tk-content { background: #000; color: #fff; } [data-theme="dark"] .tk-master....tk-content a { color: #dfa036; } [data-theme="dark"] .tk-master .tk-content::before { border-top...} .tk-master .tk-row { position: relative; top: 0px; left: calc(75% - 230px); } [data-theme
data-theme...reset"> data-theme... data-theme...="a"> data-theme...="b"> data-theme
/variable.scss"; @mixin bg_color(){ background: $background-color-theme; [data-theme=theme1] & {...; } } @mixin bg_sub_color(){ background: $background-color-sub-theme; [data-theme=theme1] & {...; } [data-theme=theme2] & { color: $font-color-theme2; } } @mixin font_active_color(){ color...: $font-active-color-theme; [data-theme=theme1] & { color: $font-active-color-theme1; } [data-theme...; } } @mixin border_color(){ border-color: $border-color-theme; [data-theme=theme1] & {
none; } } :root { --liushen-radius: 12px; --liushen-card-border-width: 1px; } /* 浅色模式颜色 */ [data-theme...style-border-always: 1px solid var(--liushen-card-border); --liushen-blue: #425AEF; } /* 深色模式颜色 */ [data-theme....twikoo .tk-extra:hover { /* 阴影 */ box-shadow: var(--card-hover-box-shadow); } /* 黑暗模式设备信息 */ [data-theme...] .twikoo .tk-expand { /* 阴影 */ box-shadow: var(--card-box-shadow); } /* 浅色模式加载更多按钮（鼠标悬浮时） */ [data-theme...card-hover-box-shadow); /* 背景颜色 */ background-color: var(--btn-bg); } /* 黑暗模式加载更多按钮（鼠标悬浮时） */ [data-theme
结束 ]); node2-->|否|node4; node4-->|否|node9[变量设置为dark]-->node6; 然后就是调整 _colors.scss 的内容，增加 CSS 样式的选择器[data-theme...--content-bg-color: #{$content-bg-color}; --card-bg-color: #{$card-bg-color}; ...... } :root[data-theme...content-bg-color-dark}; --card-bg-color: #{$card-bg-color-dark}; ...... } 最后就是通过 JS 脚本给 html 标签添加 data-theme
一个 dark.css,一个 light.css,然后在文件中分别写入对应主题下的样式 [data-theme="dark"] { --bgColor: #052341; } [data-theme...{ const [value, setValue] = useState('dark') document.documentElement.setAttribute('data-theme...if (value === 'dark') { document.documentElement.setAttribute('data-theme...} else if (value === 'light') { document.documentElement.setAttribute('data-theme
custom.css，我们打开这个文件即可 在themes/butterfly/source/css/custom.css中，找到此处(只管未注释的内容，注释是笔者自己家加的) 修改为以下内容 [data-theme...important，也就是纯透明，不暗化； 现在被改成了自定义的；当然也可以用*var(--trans-dark)，也就是跟上面一样，用上面预设好的*/ } [data-theme="dark"]
1.3.2/jquery.mobile-1.3.2.min.js"> data-theme...="b"> data-theme="b"> 如有不懂，请加qq群：135430763...showA();return false;">我是按钮6 data-theme
a { color: #646464;} html[data-theme='dark'] a { color: #808080;} 我们来看看在编译时，构建环节完成了什么具体操作。...在HTML根节点上，添加属性选择器data-theme='dark'，并添加a标签，color色值样式为#808080。...我们设想，用户点击“切换主题”按钮时，首先通过JavaScript向HTML根节点标签内添加 data-theme为dark的属性值，这时CSS选择器html[data-theme='dark'] a将发挥作用...这里需要补充的是，为了将Dark主题模式色值按照html[data-theme='dark']方式写到HTML根节点上，我们使用了如下两个PostCSS插件。 postcss-nested。...{ function: 'cc', groups: {}, colors: {}, useCustomProperties: false, darkThemeSelector: 'html[data-theme
="dark"] div.btns { filter: brightness(0.7); } [data-theme="dark"] div.btns a { background: 0 0;...div.btns.rounded a > img:first-child, div.btns.rounded a > i:first-child { border-radius: 16px; } [data-theme...important; } [data-theme="dark"] details { filter: brightness(0.7); } details { display: block;...="dark"] div.timenode .body { background: #2c2c2c; } [data-theme="dark"] div.timenode:hover .meta...{ color: #ccd0d7; } [data-theme="dark"] div.timenode .meta { color: rgba(255, 255, 255, 0.6); }
有序列表 data-theme="g"> 可分割按钮列表 data-theme...> 含有气泡式计数列表 data-theme
通过 dark class 手动切换，这种方式通常会在 html/body 上设置一个 class 或者 data-theme="dark" 这样。...例如： 1 2 3 4 5 6 7 8 9 [data-theme='dark'] .mermaid { filter: invert(0.88); } @media (prefers-color-scheme...: dark) { :root:not([data-theme='light']) .mermaid { filter: invert(0.88); } } 这条技巧是我在 Issue...方案 4️⃣ Reinitialize + CSS 结合 在我的实践中，FixIt 主题 是通过 data-theme 的方式手动切换网站主题的，我一开始走的思路和方案 1️⃣总体一致，为了处理这个方案的缺点...睡觉前我灵光乍现，为了避免每次切换主题时都要重新渲染 Mermaid 图表，我尝试一开始直接把 Mermaid 的 Light 和 Dark 主题的两个图都渲染了，然后由 data-theme 控制显示哪个图表
body=短信内容" data-role="button" data-theme="a">测试发短信 data-theme="a">测试打电话 <
background-color: $noticeOutdate-bg color: $noticeOutdate-color 自定义css 新建copyright.css，适配夜间模式和美化字体样式 [data-theme...#post .post-copyright { background-color: rgb(7 8 10); text-shadow: #bfbeb8 1px 0 4px; } [data-theme...="dark"] #post .post-copyright { border: 1px solid rgb(19 18 18 / 35%); } [data-theme="dark"]
script type="text/javascript"> data-theme...="b" > data-theme="b"> 涛哥伪专家管理系统 ... data-theme
style> data-theme... data-theme="b" class="comFooter"> <span style="height: 40px; line-height
云服务器
ICP备案
对象存储
云直播
实时音视频
