css realizes highlight mode and dark mode

1. Implemented using pseudo-elements

Using the :root pseudo-class selector and var variables in css3

Define theme variables in global css file

/* 白天颜色 */
:root {
    
    
    --comment-color: #f1f2f3;
    --grey-0: #fff;
    --grey-1: #fdfdfd;
    --grey-2: #f7f7f7;
    --grey-3: #eff2f3;
    --grey-4: #ccc;
    --grey-5: #999;
    --grey-6: #666;
    --grey-7: #333;
    --grey-8: #222;
    --grey-9: #000;
    --grey-1-a0: rgba(253, 253, 253, 0);
    --grey-1-a7: rgba(253, 253, 253, 0.7);
    --grey-1-a5: rgba(253, 253, 253, 0.5);
    --grey-1-a3: rgba(253, 253, 253, 0.3);
    --grey-9-a1: rgba(0, 0, 0, 0.1);
    --grey-9-a5: rgba(0, 0, 0, 0.5);
    --grey-2-a0: rgba(247, 247, 247, 0);
    --color-pink-light: #ffe6fa;
    --color-cyan-light: #e3fdf5;
    --color-red: #e9546b;
    --color-pink: #ed6ea0;
    --color-orange: #ec8c69;
    --color-yellow: #eab700;
    --color-green: #0a7426;
    --color-aqua: #3e999f;
    --color-blue: #49b1f5;
    --color-purple: #9d5b8b;
    --color-grey: #869194;
    --color-red-a1: rgba(233, 84, 107, 0.1);
    --color-red-a3: rgba(233, 84, 107, 0.3);
    --color-pink-a3: rgba(237, 110, 160, 0.3);
    --color-pink-light-a3: rgba(255, 230, 250, 0.3);
    --color-pink-light-a5: rgba(255, 230, 250, 0.5);
    --color-pink-light-a7: rgba(255, 230, 250, 0.7);
    --body-bg-shadow: var(--grey-2);
    --box-bg-shadow: var(--grey-9-a1);
    --text-color: var(--grey-7);
    --header-text-color: var(--grey-0);
    --primary-color: var(--color-red);
    --nav-bg: linear-gradient(-225deg, var(--color-cyan-light) 0, var(--color-pink-light) 100%);
    --footer-bg: linear-gradient(-45deg, #ec8c69, #e9546b, #38a1db, #23d5ab);
    --note-border: #cda0c7;
    --note-bg: #fdf8ff;
    --note-text: #8a51c0;
    --note-hover: #f14668;
    --comment-btn: #ed9abb;
}

/* 黑夜颜色 */
[theme="dark"]:root {
    
    
    --comment-color: var(--grey-1);
    --grey-0: #222;
    --grey-1: #21252b;
    --grey-2: #363636;
    --grey-3: #444;
    --grey-4: #666;
    --grey-5: #aaa;
    --grey-6: #ccc;
    --grey-7: #ddd;
    --grey-8: #eee;
    --grey-9: #f7f7f7;
    --grey-1-a7: rgba(34, 34, 34, 0.7);
    --grey-1-a5: rgba(34, 34, 34, 0.5);
    --grey-1-a3: rgba(34, 34, 34, 0.3);
    --grey-1-a0: rgba(34, 34, 34, 0);
    --grey-9-a1: rgba(51, 51, 51, 0.1);
    --grey-2-a0: rgba(54, 54, 54, 0);
    --color-pink-light: #322d31;
    --color-cyan-light: #2d3230;
    --color-red: rgba(237, 118, 137, 0.9);
    --color-pink: rgba(241, 139, 179, 0.8);
    --color-orange: rgba(240, 163, 135, 0.8);
    --color-yellow: #ffe175;
    --color-green: #86c59d;
    --color-aqua: #97d3d6;
    --color-blue: #9cd0ed;
    --color-purple: #cfacc5;
    --color-grey: #c3c8ca;
    --body-bg-shadow: #000;
    --box-bg-shadow: #000;
    --text-color: var(--grey-5);
    --header-text-color: var(--grey-9);
    --note-bg: rgba(48, 49, 50, 0.8);
    --note-text: rgba(109, 164, 219, 0.8);
    --note-hover: rgba(168, 49, 72, 0.8);

    img {
    
    
        filter: brightness(0.8);
    }
}

Use the theme color in the component
as follows

body {
    
    
    background-color: var(--theme-color);
    color: var(--theme-text-color);
}

Dynamically change theme variables through js events, use css variable replacement

    let isDark = false;
    /*根据 isDark 值， 使用给html标签绑定 theme 进行切换 白天黑夜模式*/
    listener() {
    
    
      // 获取html根元素标签
      let html = document.documentElement;
      if (!isDark) {
    
    
        // html添加theme 属性值
        html.setAttribute("theme","")
      } else {
    
    
        // html添加theme 属性值
        html.setAttribute("theme","dark")
      }　
    }

You can also save the current theme name locally after each switch to avoid losing the theme when you open the page next time, and set a default theme when loading for the first time.

2. Use filter

html[theme='dark-mode'] {
    
    
  filter: invert(1) hue-rotate(180deg);
}

The CSS filter property applies graphical effects such as blurring or color shifting to elements. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

For this dark mode we will use two filters, invert and hue-rotate

The invert filter can help invert an application's color scheme, so black becomes white, white becomes black, and so do all colors. So black becomes white, and white becomes black, and so do all colors.

The hue-rotate filter helps us with all other non-black and white colors. Rotating the hue by 180 degrees, we ensure that the app's color theme doesn't change, but just tone down its colors.

! ! ! The only problem with this method is that it also inverts all images in your application. Therefore, we will add the same rule to all images to invert the effect.

For example, add the same rules to pictures, videos or some specific class names,

html[theme='dark-mode'] img,video,.image{
    
    
  filter: invert(1) hue-rotate(180deg);
}

Add a transition to HTML elements to ensure a smoother transition

html {
    
    
  transition: color 300ms, background-color 300ms;
}