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);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

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

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

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  height: 100%;
  background-color: var(--gray-0);
  background-color: var(--surface1);
  color: var(--gray-8);
  color: var(--text1);
  accent-color: var(--orange-6);
  accent-color: var(--brand);
}

body {
  min-height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  padding: var(--size-6);
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  grid-gap: var(--size-6);
  gap: var(--size-6);
}

main {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  grid-gap: var(--size-10);
  gap: var(--size-10);
}

section {
  display: grid;
  grid-gap: var(--size-6);
  gap: var(--size-6);
}

h1 {
  font-weight: var(--font-weight-1);
}

p {
  max-width: var(--size-content-1);
  font-size: var(--font-size-4);
  line-height: var(--font-lineheight-3);
}

header {
  display: inline-grid;
  grid-gap: var(--size-3);
  gap: var(--size-3);
}

form {
  display: flex;
  grid-gap: var(--size-5);
  gap: var(--size-5)
}

form > div {
    display: inline-flex;
    align-items: center;
    grid-gap: var(--size-2);
    gap: var(--size-2);
  }

.surface-sa.........完整代码请登录后点击上方下载按钮下载查看