【css】Dark-mode 在web的处理方案

最新推荐文章于 2024-07-24 20:31:14 发布

snow_finland

最新推荐文章于 2024-07-24 20:31:14 发布

阅读量386

点赞数

分类专栏： css3 效果微信文章标签： css 深色模式黑暗模式 web

本文链接：https://blog.csdn.net/snow_finland/article/details/109050785

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="x5-fullscreen" content="true" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>dark mode demo</title>
    <style>
      :root {
        color-scheme: light dark;
        --bg-color: #F7F7F7;
        --font-color: rgba(0,0,0,.9);
        --bg-url: url('light.jpg');
        --linear-bg-color: linear-gradient(180deg, #ECC752, #B18B3E);
        --border-color: #000000;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg-color: #2F2F2F;
          --font-color: rgba(255, 255, 255, .8);
          --bg-url: url('dark.jpg');
          --linear-bg-color: linear-gradient(180deg, #E096B5, #CF98EB);
          --border-color: #000000;