¿Cuál es la forma más fácil de hacer un tema claro usando un tema oscuro con mucha personalización?

[hipp0]

Estoy usando el tema Foundation con una paleta oscura que he personalizado mucho con CSS.

Me pregunto cuál sería el método más fácil para hacer una versión clara que siga todas las mismas reglas de CSS.

[Moin]

Puede agregar una paleta de colores claros a su tema

Puede actualizar los colores según se utilice el tema claro u oscuro:

@awesomerobot

Entonces, en color_definitions.scss puede hacer:

$my-theme-color: dark-light-choose($primary, red);

:root {
  --my-theme-color: #{$my-theme-color};
}

y luego usaría la nueva propiedad personalizada que cambia entre oscuro/claro en su tema:

body {
  color: var(--my-theme-color);
}

[hipp0]

De acuerdo, necesito ajustar cada cambio con el tema oscuro o claro (estoy usando el oscuro/claro predeterminado)

[Moin]

Depende. Solo necesitas hacer eso si usaste colores codificados de forma rígida. Siempre y cuando te refieras a colores como var(--primary-300) o var(--danger), estos cambian automáticamente según la paleta de colores.