乐趣区

关于less:css多主题色的实现

jiezi

CSS 主题切换计划

形式一：css / var()

1. 定义 2 套主题色彩变量，属性选择器
.root[theme='theme-red'] {--color-bg: rgba(255, 87, 87, 0.05);
  --font-text-color-title: rgba(255, 87, 87, 0.85);
  --font-text-color-base: rgba(255, 87, 87, 0.65);
  --primary: #ff5757;
}

.root[theme='theme-blue'] {--color-bg: rgba(0, 229, 255, 0.05);
  --font-text-color-title: rgba(0, 229, 255, 0.85);
  --font-text-color-base: rgba(0, 229, 255, 0.65);
  --primary: #00e5ff;
}
2. 主页面中增加属性theme, 值为相应的主题 theme-red 或 theme-blue
import React, {useEffect, useRef, useState} from 'react';
import styles from './theme.less';

interface ThemePageProps {}

const themeMap = {
  红色: 'theme-red',
  蓝色: 'theme-blue',
};

const ThemePage: React.FC<ThemePageProps> = () => {const containerRef = useRef<HTMLDivElement>(null);
  const [theme, setTheme] = useState('theme-red');
  useEffect(() => {containerRef.current?.setAttribute('theme', theme);
  }, [theme]);

  return (<div className={styles.root} ref={containerRef}>
      <div className={styles.content}>
        <div className={styles.title}> 我是题目 </div>
      </div>
      <div className={styles.btnWrap}>
        {Object.entries(themeMap).map(([key, value]) => (<span key={value} onClick={() => setTheme(value)}>
            {key}
          </span>
        ))}
      </div>
    </div>
  );
};

export default ThemePage;
3. 应用主题变量
.root {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  height: 100vh;
}

.content {
  display: flex;
  align-content: center;
  justify-content: center;

  flex-direction: column;
  .title {
    text-align: center;
    font-size: 20px;
    color: var(--font-text-color-title);
  }
  .info {
    text-indent: 2em;
    font-size: 16px;
    color: var(--font-text-color-base);
  }
}

.btnWrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  span {
    width: 120px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    border: 2px solid var(--primary);
    background-color: #fff;
    border-radius: 10px;
    margin-right: 20px;
    cursor: pointer;
    &:hover {font-weight: bold;}
  }
}
4. 编译后的文件
.theme__root__3Nghz[theme='theme-red'] {--color-bg: rgba(255, 87, 87, 0.05);
  --font-text-color-title: rgba(255, 87, 87, 0.85);
  --font-text-color-base: rgba(255, 87, 87, 0.65);
  --primary: #ff5757;
}
.theme__root__3Nghz[theme='theme-blue'] {--color-bg: rgba(0, 229, 255, 0.05);
  --font-text-color-title: rgba(0, 229, 255, 0.85);
  --font-text-color-base: rgba(0, 229, 255, 0.65);
  --primary: #00e5ff;
}
.theme__root__3Nghz {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  height: 100vh;
}
.theme__content__1gRQE {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
.theme__content__1gRQE .theme__title__2W0ZV {
  text-align: center;
  font-size: 20px;
  color: var(--font-text-color-title);
}
.theme__content__1gRQE .theme__info__2c8iu {
  text-indent: 2em;
  font-size: 16px;
  color: var(--font-text-color-base);
}
.theme__btnWrap__2ZtlX {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.theme__btnWrap__2ZtlX span {
  width: 120px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  border: 2px solid var(--primary);
  background-color: #fff;
  border-radius: 10px;
  margin-right: 20px;
  cursor: pointer;
}
.theme__btnWrap__2ZtlX span:hover {font-weight: bold;}

形式二：less/ mixin

1. 定义 2 套主题色彩变量, 用 theme 函数
.theme(theme-red) {@color-bg: rgba(255, 87, 87, 0.05);
  @font-text-color-title: rgba(255, 87, 87, 0.85);
  @font-text-color-base: rgba(255, 87, 87, 0.65);
  @primary: #ff5757;
}

.theme(theme-blue) {@color-bg: rgba(0, 229, 255, 0.05);
  @font-text-color-title: rgba(0, 229, 255, 0.85);
  @font-text-color-base: rgba(0, 229, 255, 0.65);
  @primary: #00e5ff;
}
2.:global的形式全局范畴引入两套主题款式.theme-red 和 .theme-blue , 匹配全局的款式名
:global(.theme-red) {.createTheme(theme-red);
}
:global(.theme-blue) {.createTheme(theme-blue);
}
3. 通过createTheme() 混入到每个作用范畴的 less 文件下
.createTheme(@theme-name) {.theme(@theme-name);   // 混入的主题色彩变量申明 
  .root {
    display: flex;
    flex-direction: column;
    background-color: @color-bg;
    height: 100vh;
  }

  .content {
    display: flex;
    align-content: center;
    justify-content: center;

    flex-direction: column;
    .title {
      text-align: center;
      font-size: 20px;
      color: @font-text-color-title;
    }
    .info {
      text-indent: 2em;
      font-size: 16px;
      color: @font-text-color-base;
    }
  }

  .btnWrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    span {
      width: 120px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: @primary;
      border: 2px solid @primary;
      background-color: #fff;
      border-radius: 10px;
      margin-right: 20px;
      cursor: pointer;
      &:hover {font-weight: bold;}
    }
  }
}
4. 在主页面中增加全局款式
import React, {useEffect, useRef, useState} from 'react';
import styles from './theme.less';

interface ThemePageProps {}

const themeMap = {
 红色: 'theme-red',
 蓝色: 'theme-blue',
};

const ThemePage: React.FC<ThemePageProps> = () => {const containerRef = useRef<HTMLDivElement>(null);
 const [theme, setTheme] = useState('theme-red');
 useEffect(() => {document.documentElement.className = theme;}, [theme]);

 return (<div className={styles.root} ref={containerRef}>
     <div className={styles.content}>
       <div className={styles.title}> 我是题目 </div>
     </div>
     <div className={styles.btnWrap}>
       {Object.entries(themeMap).map(([key, value]) => (<span key={value} onClick={() => setTheme(value)}>
           {key}
         </span>
       ))}
     </div>
   </div>
 );
};

export default ThemePage;
5. 编译后 css 文件

  • 红色主题

    .theme-red .theme2__root__2Yw4S {display: flex;  flex-direction: column;  background-color: rgba(255, 87, 87, 0.05);  height: 100vh;}.theme-red .theme2__content__PBz6f {display: flex;  align-content: center;  justify-content: center;  flex-direction: column;}.theme-red .theme2__content__PBz6f .theme2__title__OMl9K {text-align: center;  font-size: 20px;  color: rgba(255, 87, 87, 0.85);}.theme-red .theme2__content__PBz6f .theme2__info__JCj5L {text-indent: 2em;  font-size: 16px;  color: rgba(255, 87, 87, 0.65);}.theme-red .theme2__btnWrap__3Xlyl {display: flex;  justify-content: center;  margin-top: 20px;}.theme-red .theme2__btnWrap__3Xlyl span {width: 120px;  height: 32px;  display: flex;  align-items: center;  justify-content: center;  color: #ff5757;  border: 2px solid #ff5757;  background-color: #fff;  border-radius: 10px;  margin-right: 20px;  cursor: pointer;}.theme-red .theme2__btnWrap__3Xlyl span:hover {font-weight: bold;}

  • 蓝色主题

    .theme-blue .theme2__root__2Yw4S {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 229, 255, 0.05);
  height: 100vh;
}
.theme-blue .theme2__content__PBz6f {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
.theme-blue .theme2__content__PBz6f .theme2__title__OMl9K {
  text-align: center;
  font-size: 20px;
  color: rgba(0, 229, 255, 0.85);
}
.theme-blue .theme2__content__PBz6f .theme2__info__JCj5L {
  text-indent: 2em;
  font-size: 16px;
  color: rgba(0, 229, 255, 0.65);
}
.theme-blue .theme2__btnWrap__3Xlyl {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.theme-blue .theme2__btnWrap__3Xlyl span {
  width: 120px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e5ff;
  border: 2px solid #00e5ff;
  background-color: #fff;
  border-radius: 10px;
  margin-right: 20px;
  cursor: pointer;
}
.theme-blue .theme2__btnWrap__3Xlyl span:hover {font-weight: bold;}
效果图

两种主题切换形式小结

  1. css var()的形式，浏览器能间接辨认，而 less 的 混入的形式须要编译为具体的变量值
  2. css var 的形式应用形式比较简单，less 的形式较为简单
  3. less 形式的主题切换更好的与 antd 组件的变量形式保持一致

css 与预处理器

你在 LESS 或者 SASS 文件中，间接写 CSS 代码是没有问题的。除此之外，它能给咱们提供很多便当：

  • 定义对立的变量；
  • 应用嵌套而不必始终反复着写一些选择器；
  • 能够提取公共的代码块而后很不便的复用等等。
退出移动版