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

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

{#if isDarkMode}
    
{/if}

Michael.. 5

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

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

为所有页面和组件定义默认样式（如果可以的话，请定义为“浅色模式”。

当body标签启用主题时，通常以CSS方式定义替代。

您需要拨动开关或其他方式来触发“暗模式”（例如一天中的时间）。在此示例中，它是一个Button组件：

Toggle mode

这就是全部。然后，对于您body和其他组件，您可以相应地设置样式：

// App.svelte

// Button.svelte or any other component that adjusts to mode

注意，只有身体部位（无双关语）是global :global(body.dark-mode)。如果也要放入button内部，则将丢失Svelte为组件生成的唯一ID，这会影响所有按钮。

REPL中的演示

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

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

为所有页面和组件定义默认样式（如果可以的话，请定义为“浅色模式”。

当body标签启用主题时，通常以CSS方式定义替代。

您需要拨动开关或其他方式来触发“暗模式”（例如一天中的时间）。在此示例中，它是一个Button组件：

Toggle mode

这就是全部。然后，对于您body和其他组件，您可以相应地设置样式：

// App.svelte

// Button.svelte or any other component that adjusts to mode

注意，只有身体部位（无双关语）是global :global(body.dark-mode)。如果也要放入button内部，则将丢失Svelte为组件生成的唯一ID，这会影响所有按钮。

REPL中的演示