css多主题色的实现

头像
坚果面包
    阅读 8 分钟
    1

    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;
}
    效果图

    image.pngimage.png

    两种主题切换方式小结

    1. css var()的方式，浏览器能直接识别， 而less的 混入的方式需要编译为具体的变量值
    2. css var的方式使用方式比较简单，less的方式较为复杂
    3. less方式的主题切换更好的与antd组件的变量方式保持一致

    css与预处理器

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

    • 定义统一的变量；
    • 使用嵌套而不用一直重复着写一些选择器；
    • 可以提取公共的代码块然后很方便的复用等等。
    lesscss
    坚果面包
    21 声望0 粉丝
    « 上一篇
    编写自定义的CLI工具
    下一篇 »
    快速编写一个vs code 插件

    引用和评论

    推荐阅读
    头像
    h5 兼容性-ios 滚动问题及可能的方

    坚果面包阅读 4.3k

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.6k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.5k

    0 条评论
    得票最新