如何在Svelte中设置事件的全局风格

Question

我已经用Svelte编写了一个应用程序，想添加一个黑暗模式，任何人都可以在单击按钮后激活它。我添加了一个名为isDarkMode的属性来切换这两种情况。如果该属性为true，我想将主体的背景色更改为深色，但背景色不变。

{#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>

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

你可以在这里找到工作演示：https : //svelte.dev/repl/1a121a39eddb4b3682a7701a35ac6824?version=3.6.9

Answer 2

Svelte中的样式标签与Svelte文件的其他部分不同（需要引用）。因此，一旦编译了文件，就会生成CSS（唯一的ID，动画和其他好东西）。

我将采用另一种方法来实现“暗模式”。非“ JS-in-JS”领域的常用方法是在body标签中添加主题类。

1. 为所有页面和组件定义默认样式（如果可以的话，请定义为“浅色模式”。
2. 当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 :global(body.dark-mode)。如果也要放入button内部，则将丢失Svelte为组件生成的唯一ID，这会影响所有按钮。

REPL中的演示