跳到主要内容

Css 变量

一、认识​

基于 Css 变量 实现主题化功能, 现有两种方案:

  1. 预设主题: 预设多个主题模式, 定义多个主题模式下的变量

  2. 动态主题: 只设置一个主题, 主题中的所有变量通过 JavaScript 动态插入

二、预设主题​

2.1 Css 预设主题​

Css 中预设主题模式: 预设明亮和暗黑主题

:root{
    --color-link: #1677ff;
    --color-bg-base: #fff;
    --color-primary: #1677ff;
    --color-success: #52c41a;
    --color-warning: #faad14;
}

[data-theme="light"]{
    --color-link: #1677ff;
    --color-bg-base: #fff;
    --color-primary: #1677ff;
    --color-success: #52c41a;
    --color-warning: #faad14;
}

[data-theme="dark"]{
    --color-link: #d9363e;
    --color-bg-base: #fff;
    --color-primary: black;
    --color-success: #52c41a;
    --color-warning: #faad14;
}

2.2 JavaScript 动态切换主题​

JavaScript 动态切换主题

document.documentElement.setAttribute('data-theme', "light");

三、动态主题​

3.1 Js 动态设置主题​

function cssVars(params: {
  element?: HTMLElement;
  variables: Record<string, string | number>;
}): void {
  const { element = document.documentElement, variables } = params;

  Object.keys(variables).forEach((variable) => {
    element.style.setProperty(variable, String(variables[variable]));
  });
}

useEffect(() => {
    cssVars({
      variables: {
        "--color-link": "#1677ff",
        "--color-bg-base": "#fff",
        "--color-primary": "#1677ff",
        "--color-success": "#52c41a",
        "--color-warning": "#faad14",
      },
    });
  }, []);

3.2 Css 使用动态主题​

.app{
    width: 800px;
    height: 800px;
    background-color: var(--color-primary, blue);
}