如何在 Svelte 中设置事件的全局样式答案

【问题标题】：How to set global style on event in Svelte如何在 Svelte 中设置事件的全局样式
【发布时间】：2019-12-05 22:44:38
【问题描述】：

我在 Svelte 中编写了一个应用程序，并希望添加一个任何人都可以在单击按钮后激活的暗模式。我添加了一个名为 isDarkMode 的属性来切换这两种情况。如果该属性为true，我想将body的背景色改为深色，但是背景色没有变化。

{#if isDarkMode}
    <style>
        :global(body){
            background: #2e3440;
        }
    </style>
{/if}

【问题讨论】：

我可能会采取不同的方法。如果您坚持使用 CSS（而不是 CSS-in-JS），我会将主题类名称添加到 body 元素中。所以你有一个常规的身体风格和body.dark-mode 风格。那么你就不需要在你的应用程序周围乱扔条件了。（假设你的造型比你的身体更多）
至于为什么它没有改变。据我所知，样式块不是反应性的。编译后，CSS 会从模板中“提取”出来。 isDarkMode 是如何定义的？
这是我建议的演示svelte.dev/repl/ed4fef4beceb4b0eb295d1f9fdf3bd62?version=3.6.9
你能对此做出官方回答吗？
@skyboyer 我现在发布了答案。

标签： svelte

【解决方案1】：

Svelte 中的样式标签不像 Svelte 文件的其他部分那样具有反应性（需要引用）。因此，一旦文件被编译，就会生成 CSS（唯一 ID、动画和其他好东西）。

我会采取不同的方法来实现“黑暗模式”。非“CSS-in-JS”领域的一种常见方法是将主题类添加到body 标签。

为您的所有页面和组件定义默认样式（如果您愿意，可以选择“Light Mode”。
当 body 标记启用主题时，以典型的 CSS 方式定义覆盖。

您需要一个切换开关或其他东西来触发“黑暗模式”（例如一天中的时间）。在本例中，它是一个 Button 组件：

<script>
function toggle() {
    window.document.body.classList.toggle('dark-mode')
}
</script>
<button on:click={toggle}>Toggle mode</button>

仅此而已。然后对于您的 body 和其他组件，您可以相应地设置样式：

// App.svelte
<style>
    :global(body) {
        background-color: #f2eee2;
        color: #0084f6;
        transition: background-color 0.3s
    }
    :global(body.dark-mode) {
        background-color: #1d3040;
        color: #bfc2c7;
    }
</style>
// Button.svelte or any other component that adjusts to mode
<style>
    button {
        background-color: #f76027;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 0.5rem;
        text-transform: uppercase;
    }
    :global(body.dark-mode) button { 
        background-color: #0084f6;
        color: white;
    }
</style>

请注意，只有正文部分（没有双关语）是全局:global(body.dark-mode)。如果您将 button 也放入其中，您将丢失 Svelte 为您的组件生成的唯一 ID，这会影响所有按钮。

Demo in REPL

【讨论】：

【解决方案2】：

如果您愿意使用 css 变量来管理您的主题，您可以使用 <svelte:head> 标签在 Svelte 中切换样式表：

<script>
    let dark = false;
    const toggleTheme = () => dark = dark === false
</script>

<svelte:head>
    {#if dark}
    <link rel="stylesheet" href="change/this/path/dark-theme.css">
    {/if}
</svelte:head>

<h1>Hello World!</h1>

<button on:click={toggleTheme}>
    toggle theme
</button>

它应该可以更轻松地管理整个应用的样式，并减少总包大小并避免在 css 中使用 :global 选择器。

您可以在此处找到工作演示： https://svelte.dev/repl/1a121a39eddb4b3682a7701a35ac6824?version=3.6.9

【讨论】：