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

Question

我用 Svelte 编写了一个应用程序，想添加一个任何人都可以在单击按钮后激活的黑暗模式。我添加了一个名为 isDarkMode 的属性来切换这两种情况。如果属性为真，我想把body的底色改成深色，但是底色没有变。

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

Answer 1

如果您愿意使用 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

Answer 2

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

我会采用不同的方法来实现 "Dark Mode"。非'CSS-in-JS' 土地的常用方法是在body 标签中添加主题class。

为所有页面和组件定义默认样式（如果需要，"Light Mode"。
以典型的 CSS 方式为 body 标签启用主题时定义覆盖。

您需要一个开关或其他东西来触发 "dark mode"（例如一天中的时间）。在此示例中，它是一个 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

Answer 3

对于 SvelteKit，我们可以使用 :global(selector) 修饰符设置全局样式。例如：

<style>
    :global(body) {
        /* this will apply to <body> */
        margin: 0;
    }

    div :global(strong) {
        /* this will apply to all <strong> elements, in any
             component, that are inside <div> elements belonging
             to this component */
        color: goldenrod;
    }

    p:global(.red) {
        /* this will apply to all <p> elements belonging to this 
             component with a class of red, even if class="red" does
             not initially appear in the markup, and is instead 
             added at runtime. This is useful when the class 
             of the element is dynamically applied, for instance 
             when updating the element's classList property directly. */
    }
</style>

参考：SvelteKit Docs

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

How to set global style on event in Svelte

svelte