open-props实现主题切换效果代码-html代码-BFW代码库

代码语言：html

代码描述：open-props实现主题切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  

<style>
@import "//repo.bfw.wiki/bfwrepo/css/open-props.css"; 

html {
  /* light */
  --brand-light: var(--orange-6);
  --text1-light: var(--gray-8);
  --text2-light: var(--gray-7);
  --surface1-light: var(--gray-0);
  --surface2-light: var(--gray-1);
  --surface3-light: var(--gray-2);
  --surface4-light: var(--gray-3);
  --surface-shadow-light: 200 10% 20%;
  --shadow-strength-light: 2%;

  /* dark */
  --brand-dark: var(--orange-3);
  --text1-dark: var(--gray-1);
  --text2-dark: var(--gray-3);
  --surface1-dark: var(--gray-9);
  --surface2-dark: var(--gray-8);
  --surface3-dark: var(--gray-7);
  --surface4-dark: var(--gray-6);
  --surface-shadow-dark: 200 50% 3%;
  --shadow-strength-dark: 80%;

  /* dim */
  --brand-dim: var(--orange-4);
  --text1-dim: var(--gray-3);
  --text2-dim: var(--gray-4);
  --surface1-dim: var(--gray-8);
  --surface2-dim: var(--gray-7);
  --surface3-dim: var(--gray-6);
  --surface4-dim: var(--gray-5);
  --surface-shadow-dim: 200 10% 13%;
  --shadow-strength-dim: 20%;
  
  /* grape */
  --brand-grape: var(--grape-5);
  --text1-grape: var(--grape-9);
  --text2-grape: var(--grape-7);
  --surface1-grape: var(--grape-0);
  --surface2-grape: var(--grape-1);
  --surface3-grape: var(--grape-2);
  --surface4-grape: var(--grape-3);
  --surface-shadow-grape: 288 30% 20%;
  --shadow-strength-grape: 2%;
}

:root {
  color-scheme: light;

  /* set defaults */
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

@media (color-index: 48) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

[color-scheme="dark"] {
  color-scheme: dark;
  
  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);.........完整代码请登录后点击上方下载按钮下载查看