CSS判断手机暗黑模式

手机有个功能到了晚上会自动变成深色也就是暗黑模式.这种情况下网页会自动变颜色.如果想自由控制暗黑模式下的html样式的话,可以用如下方式:

        @media (prefers-color-scheme:  dark) {
            /*html, body {*/
                /*filter: invert(1) hue-rotate(180deg);*/
            /*}*/
            .maill{
                margin-left: 0;
                margin-right: 0;
                margin-top: 0px;
                margin-bottom: 0px;
                width: 100%;
                max-width: 100%;
                background: rgb(255,255,255)!important;

                padding: 0px;
                padding-bottom: 20px;
            }
            /*img, video,audio{*/
            /*@include hover-change(#4B4B4B,white);*/
            /*}*/
        }

这就只会在暗黑模式的时候才生效!

### 实现 macOS 暗黑模式检测与样式应用 为了实现 macOS 的暗黑模式检测以及相应样式的自动切换,在 Electron Vue 项目中可以采用监听操作系统主题变化的方式。通过 `electron` 提供的 API 可以方便地访问到当前操作系统的外观设置。 在主进程中,可以通过引入 `nativeTheme` 来订阅系统主题的变化事件: ```javascript const { app, BrowserWindow, nativeTheme } = require('electron') let mainWindow; app.whenReady().then(() => { mainWindow = new BrowserWindow({ webPreferences: { preload: path.join(__dirname, 'preload.js') } }); // 发送初始的主题状态给渲染进程 mainWindow.webContents.send('theme-changed', nativeTheme.shouldUseDarkColors); // 订阅主题改变事件并向渲染器发送更新消息 nativeTheme.on('updated', () => { mainWindow.webContents.send('theme-changed', nativeTheme.shouldUseDarkColors); }); }); ``` 上述代码片段展示了如何利用 `nativeTheme` 对象来捕获用户的偏好设置,并将其传递至前端页面以便动态调整界面风格[^1]。 接着,在 Vue 组件内接收来自主进程的消息并据此修改全局变量或类名,从而控制不同颜色方案的应用: ```html <template> <div id="app"> <!-- 应用程序的内容 --> </div> </template> <script> import { ipcRenderer } from 'electron'; export default { mounted() { const rootElement = document.documentElement; function applyTheme(isDarkMode) { if (isDarkMode) { rootElement.classList.add('dark-mode'); rootElement.classList.remove('light-mode'); } else { rootElement.classList.add('light-mode'); rootElement.classList.remove('dark-mode'); } } // 接收来自主进程的主题变更通知 ipcRenderer.on('theme-changed', (_, isDarkMode) => { applyTheme(isDarkMode); }); }, }; </script> <style scoped> /* 定义两种不同的配色 */ .light-mode body { background-color: white; } .dark-mode body { background-color: black; } </style> ``` 这段脚本说明了怎样基于接收到的信息更改 HTML 文档根节点 `<html>` 上面附加的 class 属性值,进而触发 CSS 文件里预定义好的亮色/深色主题规则生效[^2]。 最后需要注意的是,对于某些特定版本号以上的 Electron 版本来说,默认情况下会启用实验性的 Web 平台特性支持(Experimental Web Platform Features),这可能会导致一些兼容性问题;因此建议按照官方文档指导配置合适的环境参数以确保最佳实践效果[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值