浅析颜色切换功能

element换肤

如果只是简单的需求需要暗黑和白色的切换模式官方有说明 切换皮肤官方是通过html的class类名然后渲染关联的样式实现,自己如果需要专门修改关联的css变量或者覆盖的话官方也有说明,但是一般来说是够用的,有特殊需求建议参考下面的方案实践。

css变量换肤

建立一个样式文件然后在关联的文件下面去扩展自己的公共样式; 修改的时候无非就是修改下html属性[data-theme]实现皮肤切换

示例代码:

css 复制代码
[data-theme=light] {
  --v-color: #122ca1;
}

[data-theme=dark] {
  --v-color: #d6c7c7;
}

这里只是一个切换的示例,具体切换class还是id,这个都可以自主灵活变化

js 复制代码
document
        .querySelector('html')
        .setAttribute('data-theme', isDark.value ? 'dark' : 'light');

浏览器兼容

主流浏览器基本没问题,但是有一定的兼容性要求就需要谨慎选择了

scss/less换肤

上面的方案也许会有一些浏览器不兼容的问题,现在这种方案基本不会存在兼容问题了,利用scss的特性简化自己的维护代码的成本。

示例代码:

下面的逻辑代码直接渲染出2套css样式,如果自己有多套样式的需求也可以参考这一套实现,比较方便维护

scss 复制代码
$bg-color: (
  light: #fff,
  dark: #091a28
);

$title-color: (
  light: #363636,
  dark: #fff
);

$subtitle-color: (
  light: #4a4a4a,
  dark: cyan
);

$border-bottom: (
  light: 1px solid #dbdbdb,
  dark: 1px solid #363636
);

@mixin useTheme($key, $valueMap) {
  $themes: light, dark;
  
  @each $theme in $themes {
    [data-theme=#{$theme}] & {
      #{$key}: map-get($valueMap, $theme);
    }
  }
}

// 使用示例
.bg-color {
    @include useTheme('color', $subtitle-color);
}

下面示例在vite如何全局引入

之前直接在main.ts引入无法在样式中使用,应该是样式加载顺序的问题,没办法识别,后面统一在vite.config配置后页面表现正常支持使用了。

js 复制代码
    css: {
        preprocessorOptions:{
            scss:{
              // scss样式颜色全局引入
              additionalData: `
                @import "@/assets/theme.scss";
                @import "@/assets/variables.scss";
              `
            }
          },
    },
相关推荐
万少25 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL31 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00001 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试