在 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: () !
然后是文章详情页，可以看到效果还是不错的 博客详情页 下面，让我们一起来学习一下，如何通过几行代码，给自己的网站安排上暗黑模式 首先，在网站的 全局 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
="b"> 涛哥伪专家管理系统 ...="b" > 涛哥伪专家管理系统 ...="b" > 涛哥伪专家管理系统 ...="b" > 涛哥伪专家管理系统 ...="b" > 涛哥伪专家管理系统
="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
="a"> 涛哥伪专家管理系统 ... 跳转到下一个页面 涛哥伪专家管理系统 ... 跳转到下一个页面 涛哥伪专家管理系统
<input type="reset" 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
1.3.2/jquery.mobile-1.3.2.min.js"> 如有不懂，请加qq群：135430763...showA();return false;">我是按钮6 <div data-role="footer" data-position="fixed" data-theme
custom.css，我们打开这个文件即可 在themes/butterfly/source/css/custom.css中，找到此处(只管未注释的内容，注释是笔者自己家加的) 修改为以下内容 [data-theme...important，也就是纯透明，不暗化； 现在被改成了自定义的；当然也可以用*var(--trans-dark)，也就是跟上面一样，用上面预设好的*/ } [data-theme="dark"]
一个 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
="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); }
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"]
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
body=短信内容" data-role="button" data-theme="a">测试发短信 测试打电话 <
<ul data-role="listview" data-theme
通过自定义标签属性来实现主题切换 /* 默认主题样式 */ body { background-color: white; color: black; } /* 深色主题样式 */ body[data-theme...black; color: white; } :root { --body-background: rgb(248, 244, 212); --text-color: #000; } html[data-theme...:root { --body-background: rgb(248, 244, 212); --text-color: #000; } html[data-theme="dark"] {
首先，我们可以定义一些基本的颜色变量：:root { --background-color: #ffffff; --text-color: #000000;}[data-theme="dark"]...JavaScript 来切换主题：function toggleTheme() { const currentTheme = document.documentElement.getAttribute('data-theme...'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme);}就是这么简单！...{ const theme = localStorage.getItem('theme') || 'light'; document.documentElement.setAttribute('data-theme...'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem
有序列表 可分割按钮列表 含有气泡式计数列表 <ul data-role="listview" data-theme
script type="text/javascript"> 涛哥伪专家管理系统 ... <div id="footer" data-role="footer" data-theme
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
