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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看