Angular+SASS实现主题切换时全局组件样式不生效问题解决

是，样式不生效的核心原因就是选择器作用域被限制了。
你当前所有主题匹配的属性选择器&[data-background-color="xxx"]都嵌套在.sidebar选择器内部，SASS编译后生成的最终选择器格式是.sidebar[data-background-color="blue"] 后代选择器，所有规则只会匹配sidebar元素内部的子元素。你写的set-card-header-linear-gradient里的目标元素在.main-content区域，完全不在sidebar DOM结构内，编译后的选择器根本找不到对应元素，自然不会生效。
另外你当前的实现本身就有逻辑缺陷：只给navbar、sidebar两个局部元素加了主题属性，整个应用没有全局统一的主题标识，跨区域的全局样式根本没有统一的匹配依据。

核心逻辑是把主题标识挂载到应用最顶层容器，让整个应用的所有元素都能被主题选择器匹配到，再把所有主题相关的样式从局部类的嵌套中抽离，统一归到全局主题选择器下管理。

• 第一步：调整主题属性挂载位置
  删掉原来只给sidebar、navbar设置data属性的逻辑，直接给应用根节点（推荐用<html>或者<body>，也可以用Angular的根组件<app-root>）设置主题标识，修改changeTheme方法：

  changeTheme(themeColor: string) {
    if (!themeColor) return;
    // 给根节点挂全局主题标识
    const rootEl = document.documentElement;
    rootEl.setAttribute('data-theme', themeColor);
    localStorage.setItem('userThemePreference', themeColor);
  }
  

  记得在应用初始化阶段（比如AppComponent的ngOnInit钩子中），从localStorage读取用户之前保存的主题配置，提前给根节点设置好对应属性，避免页面加载时出现默认主题的闪烁问题。
• 第二步：重构SASS主题结构
  把原来嵌套在.sidebar下的主题样式全部抽离，统一放在全局主题选择器块下，所有需要跟随主题变化的元素，不管属于哪个区域，都在对应主题块下写规则：

  // 先统一定义各主题的色值映射表，方便后续维护
  $theme-configs: (
    blue: (
      primary: $new-blue,
      secondary: $azure-color-bottom,
      light-text: $white-color,
      card-gradient-start: $new-blue,
      card-gradient-end: $azure-color-bottom
    ),
    // 其他颜色主题按相同结构扩展即可
  );
  
  // 遍历生成所有主题的全局样式
  @each $theme-name, $theme-vars in $theme-configs {
    [data-theme="#{$theme-name}"] {
      // sidebar区域样式
      .sidebar {
        @include sidebar-background-color(
          map-get($theme-vars, primary),
          map-get($theme-vars, secondary),
          map-get($theme-vars, light-text)
        );
        @include set-background-color-button(map-get($theme-vars, light-text));
        @include sidebar-active-color($black-color);
  
        .user, .logo, .nav li.separator {
          &:after {
            background-color: rgba(255, 255, 255, 0.3);
          }
        }
  
        .nav {
          li:hover:not(.active) > a,
          li.active > [data-toggle="collapse"] {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }
      }
  
      // navbar区域样式
      .navbar {
        background-color: map-get($theme-vars, primary);
        // 其他navbar随主题变化的样式写在这里
      }
  
      // 之前不生效的card-header区域样式
      .main-content > .row > .col-md-12 > .card > .card-header {
        @include icon-gradient(
          map-get($theme-vars, card-gradient-start),
          map-get($theme-vars, card-gradient-end)
        );
      }
  
      // 后续所有需要跟随主题变化的全局元素，比如通用按钮、链接、标签等，都可以直接加在这里
      .btn-primary {
        background-color: map-get($theme-vars, primary);
        border-color: map-get($theme-vars, primary);
      }
    }
  }
  

• 可选优化（符合Angular规范）
  尽量不要直接原生操作DOM，可以创建一个全局的ThemeService，通过Angular提供的DOCUMENT注入令牌和Renderer2来操作根节点属性，对服务端渲染、单元测试的兼容性更好。

内容的提问来源于stack exchange，提问作者kaushik mn