[Bug] modo escuro não funciona

Prof, bom dia, eu to tentando fazer como vc fez, mas por algum motivo ele não troca a cor, eu coloquei o nome dark pq pra mim fica mais fácil, mas acho que nome de classe n importa, a e mais uma duvida, pq quando vc definiu os HEX das cores vc colocou em aspas simples? sempre vi colocarem sem aspas

  <main class="columns is-gapless is-multiline dark">
    <div class="column is-one-quarter">
      <BarraLateral />
    </div>
    <div class="column is-three-quarter conteudo">
      <Formulario @aoSalvarTarefa="salvaTarefa" />
      <div class="lista">
        <Box v-if="listaVazia">
          Vamos começar a produzir, rumo ao sucesso, let's bora :)
        </Box>
        <Tarefa  v-for="(tarefa, index) in tarefas" :key="index" :tarefa="tarefa"/>
      </div>
    </div>
  </main>
</template>

main {
  --bg-primario: '#fff';
  --txt-primario: '#000';
}

main.dark {
  --bg-primario: '#2b2d42';
  --txt-primario: '#ddd';
}
.conteudo {
  background-color: var(--bg-primario);
}