svelte 中的动态全局 css 变量

Question

我正在尝试在我的 svelte 应用程序中实现主题。一些简单的事情，比如：

{
  light: { colorPrimary: "skyblue", colorSecondary: "white" },
  dark: { colorPrimary: "white", colorSecondary: "grey" },
}

我可以轻松地将这些信息保存在商店中，还可以通过按钮更改主题。问题是我找不到将这些变量传递给 css 的好方法。它是一个新应用程序，因此我可以随意更改样式实现。我试过了：

• 使用svelte原生样式标签，但无法向其传递javascript变量。
• 使用 LESS 或 SCSS 等预处理器，但也无法传递 javascript 变量。
• 直接在组件中使用内联样式。这可行，但我找不到任何突出显示、格式化或检查的方法。这也创建了巨大的组件，其中功能与样式混合在一起。
• 使用内联样式并为其主组件的每个元素创建一个 svelte 组件（因为样式化组件在 React 中工作），但我必须在新文件中为每个元素创建一个新的整个 svelte 组件，这是无法维护的。

那么，在 svelte 中处理像主题这样简单的事情真的没有好方法吗？我是不是错过了什么？

Answer 1

我在js中定义变量，这样我就可以全局更改它们

仅仅因为 Svelte 组件样式默认具有作用域，并不意味着您不能拥有全局样式。

您可以在组件中使用

:global(selector)

或

:root

或仅在组件中使用

import

单独的 CSS 文件

<script>

或根引导/布局脚本。

我通常有类似

theme.css

的东西，并根据属性定义变量（例如

html[data-theme=dark]

），可能与

prefers-color-scheme

结合使用。