每日一题：通过css变量来控制主题

1、定义不同主题颜色

      :root{
      --theme-color: blue;
      --font-size: 18px;;
    }
    html[theme="dark"]{
        --theme-color: #000;

2、通过切换html自定义属性来控制主题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div class="theme">

  </div>
<button>改变主题</button>
</body>
<script>
    document.getElementsByTagName('button')[0].addEventListener('click',changeTheme,false);
    function changeTheme(){
        console.log('changeTheme')
        if(document.documentElement.getAttribute('theme') === 'dark'){
            document.documentElement.setAttribute('theme','light');
        }else{
            document.documentElement.setAttribute('theme','dark');
        }
    }
</script>
</html>
<style>
    :root{
      --theme-color: blue;
      --font-size: 18px;;
    }
    html[theme="dark"]{
        --theme-color: #000;
        --font-size: 13px;
    }
    .theme{
        width: 700px;
        height: 700px;
        background: var(--theme-color);
    }
</style>
posted @ 2023-10-10 11:35  菜鸟小何  阅读(35)  评论(0)  编辑  收藏  举报