首页 > web前端 > css教程 > 正文

使用 DIVLESS Pure CSS 切换深色模式

Patricia Arquette
发布: 2024-11-01 08:43:30
原创
458 人浏览过

Toggle Dark Mode using DIVLESS Pure CSS

从必须在默认情况下不允许 JavaScript 的工作场所共享点环境中编写 .html 文档的角度来看,我的任务是“哦,添加一个按钮来切换暗模式,谢谢!”

除了我们政策文件中的“有效且可访问的语义 HTML”措辞之外,老板将其等同于“即使是一个 DIV 也是懒惰”,至少可以说,这让事情变得有点棘手。

@media(首选颜色方案:深色)

作为对立点,我建议不要进行切换,我们只需设置页面样式,以匹配每个用户与媒体查询的明/暗系统偏好。得到的答复是“好吧,从这个开始,但仍然要打开开关。”太棒了,我通过努力创造更少的工作,为自己创造了更多的工作。

我已经注意到我需要 CSS 变量和复选框输入/标签方法来控制亮/暗模式,但是 :checked ~ * 仍然只会影响输入之后的元素,使得背景样式很难切换。

我的第一个解决方案是使用一个绝对位于所有内容下方的通用 DIV,直到老板发现它并说将其删除为止。令人宽慰的一点是,只要兼容性支持覆盖率超过 90% 的浏览器,它们就可以使用现代 HTML/CSS。

:has() 来救援!

当我第一次看到这个建议用于在实现之前定位父元素的 CSS 语法时,我不确定它有什么用处。现在,当我寻找解决方案时再次遇到它,我想,“为什么不在 BODY 上尝试呢?”

它立即起作用了,我为自己没有早点尝试而自责!这是我最终得到的相关 CSS:

      * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
@media (prefers-color-scheme: dark) {
      * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
}
      body { /* base element under control of mode */
        color:var(--tcolor); /* match text color to mode */
        background-image:var(--bgimage); /* match opacity overlay to mode */
        background-repeat: no-repeat no-repeat, space no-repeat;
        background-size:auto 100vh;
        margin:-1ex;
      }
      label[for="d"]::after {content: var(--lcontent);} /* DARK or LIGHT text */
      section{ /* main interaction area */
        margin:0 auto;
        background-color:var(--sbgcolor);
        padding:1ex;
        padding-top:0;
        height:fit-content;
        max-height:96.2vh;
        overflow-y:scroll;
        scrollbar-color:rgba(128,128,128,0.5) var(--sbgcolor);
      }
      li:nth-of-type(even){ /* subtle horizontal lines */
        background-color:rgba(128,128,128,0.1);
      }
      summary:hover,summary:focus-visible,a:hover,a:focus-visible { /* match mouseover or     */
        background-color:var(--bgcolor);                            /* keyboard focus to mode */
      }
      a:link {color: var(--alink)}       /* match link     */
      a:visited {color: var(--avisited)} /* colors to mode */

登录后复制

我使用 rgba(128,128,128,0.5) 做了一个作弊,以保持 SECTION 滚动条颜色中性。

最终结果(不受共享点抑制)如下所示。

作为奖励,这是使用属性手动添加的该页面的架构数据结构,这是我接受的另一项无 JavaScript 任务。

现在我只需要弄清楚如何在没有 JavaScript 的情况下触发这些音频声音!?

请随意评论您自己在有限环境中工作的经验,哪些有效,哪些无效!

以上是使用 DIVLESS Pure CSS 切换深色模式的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板