• 首页
  • 电影
  • Js
  • 前端
  • 新旅
  • 奇技
  • 网安
  • 歌单
  • 关于
  • 搜索
  • 夜间模式
    ©2013-2025  成长小破站 Theme by OneBlog
    搜索
    标签
    # css # js # uniapp # ps # chrome # 小程序 # javascript # 布局 # typecho # 激活码
  • 首页>
  • Javascript>
  • 正文
  • css变量var一键切换夜间白天模式

    2023年12月07日 1.5 k 阅读 0 评论 2150 字

    css变量var

    var() CSS 函数可以插入一个自定义属性(有时也被称为“CSS 变量”)的值,用来代替非自定义属性中值的任何部分。
    使用--来定义变量名称;

    --key:value

    可以实现一键切换黑白皮肤

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Day/Night Mode Switch</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                transition: background-color 0.3s ease, color 0.3s ease;
                text-align: center;
                margin-top: 100px;
            }
    
            :root.darkmode {
                --text-color: #fff;
                --background-color: #333;
                --button-bg-color: #fff;
                --button-text-color: #333;
            }
    
            :root {
                background-color: var(--background-color, #fff);
                color: var(--text-color, #333);
            }
    
            .mode-switch {
                display: inline-block;
                padding: 10px 20px;
                cursor: pointer;
                border: 1px solid #333;
                background-color: var(--button-bg-color, #333);
                color: var(--button-text-color, #fff);
                text-decoration: none;
                transition: all 0.3s ease;
            }
    
            .mode-switch:hover {
                background-color: var(--text-color);
                color: var(--background-color);
            }
        </style>
    </head>
    
    <body>
        <h1>Day/Night Mode Switch</h1>
        <button class="mode-switch" id="modeSwitch">Switch Mode</button>
    
        <script>
            const modeSwitchButton = document.getElementById('modeSwitch');
            let isNightMode = false;
    
            modeSwitchButton.addEventListener('click', () => {
                isNightMode = !isNightMode;
                applyMode();
            });
    
            function applyMode() {
                document.documentElement.classList.toggle('darkmode');
                if (isNightMode) {
                    modeSwitchButton.textContent = 'Switch to Day Mode';
                } else {
                    modeSwitchButton.textContent = 'Switch to Night Mode';
                }
            }
        </script>
    </body>
    
    </html>
    
    </html>
    本文著作权归作者 [ admin ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    css变量暗黑模式
    — END —
    首页电影Js前端新旅奇技网安歌单关于
    Copyright©2013-2025  All Rights Reserved.  Load:0.037 s
    豫公网安备41050202000235   豫ICP备18019224号-2
    Theme by OneBlog V3.6.4
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。