Theme层代码实现_data-theme-优快云博客

本文链接：https://blog.youkuaiyun.com/wdadwa565/article/details/118881190

本文介绍如何通过HTML的data-theme属性配合CSS的属性选择器实现页面主题的全局切换，并展示了如何在Vue应用中使用JavaScript控制主题色变化。接着，讲解了如何利用Sass创建并导入不同主题文件，以生成动态的样式规则，实现不同主题的无缝切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Theme层代码实现
只要全局加上一个属性选择器，就搞定了~~~

做成属性选择器

html的代码
<div data-theme="default">
css的代码
[data-theme= 'default' ] .box {background:pink;
}
[data-theme= "cool'] .box{background: blue;
}
[data-theme= 'warm'] .box{background: yellow;}

如何对全局页面产生影响提升到全局
1，将data-theme="default提升到 html 结构
用js控制变色，在app.vue写上这个代码

import {onMounted} from 'vue'export default {
setup() {
onMounted(() =>{
window.document.documentElement.setAttribute(
"data-theme",
"cool"
);
})}}

2，将样式提升到全局
在theme层上新建三个文件不同颜色导入到index.scss

引用sass文件编写

/* 默认主题色 */

$theme-default: (

  t-color-primary : (
    color: #FF5777
  ),

  t-shadow : (
    shadow: 0 0 8px #FF5777
  ),

  t-border : (
    border: 1Px solid #FF5777
  )
)

用sass来生成主题色切换

@import "./theme-default.scss";
@import "./theme-cool.scss";
@import "./theme-warm.scss";

$themes: (
  default: $theme-default,
  cool: $theme-cool,
  warm: $theme-warm
);

@mixin themable {
  @each $section, $map in $themes {
    $map: $map !global;
    [data-theme="#{$section}"] & {
      @content;
    }
  }
}

@function themed($key, $color) {
  @return map-get(map-get($map, $key), $color)
};

@mixin t-color-primary($style) {

  // themed() 被循环调用，每次循环其 $map 值不一样
  @include themable {
    #{$style}: themed('t-color-primary', 'color');
  }
}

@mixin t-shadow {

  // themed() 被循环调用，每次循环其 $map 值不一样
  @include themable {
    box-shadow: themed('t-shadow', 'shadow');
  }
}

@mixin t-border {

  // themed() 被循环调用，每次循环其 $map 值不一样
  @include themable {
    border: themed('t-border', 'border');
  }
}