CSS 不改 Svelte + Chota

Question

过去几天我一直在学习 Svelte，现在我正尝试将它与 Chota 结合使用。我正在遵循 Chota 文档关于暗模式的说明，但它不会改变。此外，如果我添加自己的 CSS，它不会更新。这是我的 App.svelte:

<svelte:head>
    <link rel="stylesheet" href="https://unpkg.com/chota@latest">
</svelte:head>

<script>

    console.log("Checking!");

    if (window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
        console.log("Dark!");
    }

    export let name;

    function handleClick() {
        alert("Hello " + name)

    }
</script>

<nav class="nav">
  <div class="nav-left">
    <a class="brand" href="#">{name}</a>
    <div class="tabs">
      <a>Link 1</a>
      <a class="active">Link 2</a>
    </div>
  </div>
  <div class="nav-right">
    <a class="button outline" on:click={handleClick}>Button</a>
  </div>
</nav>

<style>
    body.dark {
        /* The background-color doesn't change anything, and neither does the other css. */
         background-color: red !important;
        --bg-color: #000;
        --bg-secondary-color: #131316;
        --font-color: #f5f5f5;
        --color-grey: #ccc;
        --color-darkGrey: #777;
    }
</style>

我已确保添加 class 的代码正在执行，而且确实如此。我已将 !important 添加到 CSS，但它没有任何改变。

编辑：

我一直在做更多的 CSS 测试，似乎 :root 选择器可以很好地处理变量（还没有测试非变量），但是 body.dark选择器甚至没有编译到 bundle.css 文件中。

Answer 1

您应该收到 Unused CSS selector "body.dark" 警告。

这是因为默认情况下，<style> 标记内的所有 css 都限定为组件内的 html。

您可以使用选择器来为外部元素设置样式，方法是：

:global(body.dark) {
  background-color: red;
  ...

或者如果样式标签中的所有选择器都应该全局使用

<style global>
  body.dark {
    background-color: red;
    ...

https://svelte.dev/docs#component-format-style

CSS 不改 Svelte + Chota

CSS Not Changing Svelte + Chota

svelte

darkmode