论css咋调节“亮-暗”色彩模式


有脚本。

方法1

弄一个.dark{},放在body上(或者加一个别的标签反正把整个页面的其他东西全装进去),所有样式都写一亮一暗,暗色写成后代选择器。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
      
            background-color: #f8f8f8;
            color: #181818;
        }
        html,body{
      
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .title {
      
            font-size: 30pt;
            font-weight: 600;
            padding: 10pt 0;
            text-align: center;
        }

        .subtitle {
      
            text-align: center;
            font-size: 14pt;
        }

        p {
      
            font-size: 20pt;
            line-height: 24pt;
        }

        p::before {
      
            content: "";
            width: 2em;
            display: inline-block;
        }
        .dark {
      
            background-color: #222;
            color: #d0d0d0;
        }
        .dark .title{
      
            background-color: inherit;
            color: #fff;
        }
        .dark .subtitle{
      
            background-color: inherit;
            color: #c0c0c0;
        }
        .dark p{
      
            background-color: inherit;
            color: inherit;
        }
    style>
head>

<body>
    <div class="title">
        蜀道难
    div>
    <div class="subtitle">李白div>
    <p>
        噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。
    p>
    <p> 
        问君西游何时还?畏途巉岩不可攀。但见悲鸟号古木,雄飞雌从绕林间。又闻子规啼夜月,愁空山。蜀道之难,难于上青天,使人听此凋朱颜!连峰去天不盈尺,枯松倒挂倚绝壁。飞湍瀑流争喧豗,砯崖转石万壑雷。其险也如此,嗟尔远道之人胡为乎来哉!
    p>
    <p> 
        剑阁峥嵘而崔嵬,一夫当关,万夫莫开。所守或匪亲,化为狼与豺。朝避猛虎,夕避长蛇;磨牙吮血,杀人如麻。锦城虽云乐,不如早还家。蜀道之难,难于上青天,侧身西望长咨嗟!
    p>
    <button onclick="change()">切换色彩模式button>
body>

html>
<script>
    function change() {
      
        var body = document.body;
        if (body.getAttribute('class'))
            body.setAttribute('class', '');
        else
            body.setAttribute('class', 'dark');
    }
script>

方法2

当然,也可以只写两个.light{}.dark{},其他全继承。不过不是很灵活,如果元素样式很花的话不应该用这个方法。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
      
            color: inherit;
            background-color: inherit;
        }

        html,
        body {
      
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .title {
      
            font-size: 30pt;
            font-weight: 600;
            padding: 10pt 0;
            text-align: center;
        }

        .subtitle {
      
            text-align: center;
            font-size: 14pt;
        }

        p {
      
            font-size: 20pt;
            line-height: 24pt;
        }

        p::before {
      
            content: "";
            width: 2em;
            display: inline-block;
        }

        .light {
      
            background-color: #f8f8f8;
            color: #181818;
        }

        .dark {
      
            background-color: #222;
            color: #d0d0d0;
        }
    style>
head>

<body class="light">
    <div class="title">
        蜀道难
    div>
    <div class="subtitle">李白div>
    <p>
        噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。
    p>
    <p>
        问君西游何时还?畏途巉岩不可攀。但见悲鸟号古木,雄飞雌从绕林间。又闻子规啼夜月,愁空山。蜀道之难,难于上青天,使人听此凋朱颜!连峰去天不盈尺,枯松倒挂倚绝壁。飞湍瀑流争喧豗,砯崖转石万壑雷。其险也如此,嗟尔远道之人胡为乎来哉!
    p>
    <p>
        剑阁峥嵘而崔嵬,一夫当关,万夫莫开。所守或匪亲,化为狼与豺。朝避猛虎,夕避长蛇;磨牙吮血,杀人如麻。锦城虽云乐,不如早还家。蜀道之难,难于上青天,侧身西望长咨嗟!
    p>
    <button onclick="change()">切换色彩模式button>
body>

html>
<script>
    function change() {
      
        var body = document.getElementsByTagName('body')[0];
        if (body.getAttribute('class') == 'light')
            body.setAttribute('class', 'dark');
        else
            body.setAttribute('class', 'light');
    }
script>

方法3

直接改样式表路径。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link id="color" href="css/light.css" rel="stylesheet" type="text/css">
    <link href="css/app.css" rel="stylesheet" type="text/css">
head>

<body class="light">
    <div class="title">
        蜀道难
    div>
    <div class="subtitle">李白div>
    <p>
        噫吁嚱,危乎高哉!蜀道之难,难于上天!!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。
    p>
    <p>
        问君西游何时还?畏途巉岩不可攀。但见悲鸟号古木,雄飞雌从绕林间。又闻子规啼夜月,愁空山。蜀道之难,难于上青天,使人听此凋朱颜!连峰去天不盈尺,枯松倒挂倚绝壁。飞湍瀑流争喧豗,砯崖转石万壑雷。其险也如此,嗟尔远道之人胡为乎来哉!
    p>
    <p>
        剑阁峥嵘而崔嵬,一夫当关,万夫莫开。所守或匪亲,化为狼与豺。朝避猛虎,夕避长蛇;磨牙吮血,杀人如麻。锦城虽云乐,不如早还家。蜀道之难,难于上青天,侧身西望长咨嗟!
    p>
    <button onclick="change()">切换色彩模式button>
body>

html>
<script>
    function change() {
      
        var body = document.getElementById('color');
        if (body.getAttribute('href') == 'css/light.css')
            body.setAttribute('href', 'css/dark.css');
        else
            body.setAttribute('href', 'css/light.css');
    }
script>

如果还要自动适配设备的颜色模式可以用响应式@media (prefers-color-scheme:……)

你可能感兴趣的:(前端,css)