Histórico da Página

/* Definições de variáveis para o modo light */
:root {
  --my-custom-color: #0000ff; // azul
}

/* Definições de variáveis para o modo dark */
html.theme-dark {
  --my-custom-color: #ff0000; // vermelho
}

/* uso aplicando a variável em algum elemento */
.my-widget .my-custom-button {
  color: var(--my-custom-color); // se for modo claro será azul, se for modo escuro será vermelho
}