Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I override the colors in the dark theme? #3804

Open
alycklama opened this issue Apr 28, 2024 · 0 comments
Open

How do I override the colors in the dark theme? #3804

alycklama opened this issue Apr 28, 2024 · 0 comments

Comments

@alycklama
Copy link

Is it possible to override the colors in the dark theme? I've tried so many things, and I have yet to find a working or maintainable solution.

Naively, I tried to use the following, but it didn't work:

@include cv.system-theme($name: "dark") {
  $primary: hsl(11, 100%, 41%);

  @include cv.register-hsl("shadow", white);
}

Then I tried the code below, which seems to work fine, however, it doesn't seem to work well with contrasting colours. The has-text-primary-invert has the exact same color in the dark theme if the primary color of the light theme is set to #fff. I'm not entirely sure how the dark theme isn't independent of the light theme. I guess because I'm changing a single color and I'm not using generate-on-scheme-colors?

image
@include cv.system-theme($name: "dark") {
  --bulma-primary: hsl(130, 50, 45);
  --bulma-primary-h: 130deg;
  --bulma-primary-s: 50%;
  --bulma-primary-l: 45%;
}

I had a look in the code base to see how the dark theme is constructed. There I noticed the same color palette is used as for the light theme. I copied all the code below and just changed the primary value. However, this doesn't seem to work at all.

$dark-colors: fn.mergeColorMaps(
  (
    "primary": #ff0000,
  ),
  dv.$custom-colors
) !default;

@include cv.system-theme($name: "dark") {
  @each $name, $color in $dark-colors {
    $base: $color;

    @if type-of($color == "list") {
      $base: list.nth($color, 1);
    }

    @include cv.generate-on-scheme-colors($name, $base, $scheme-main);
  }

  @include cv.register-vars(
    (
      "scheme-brightness": "dark",
    )
  );

  @include cv.register-hsl("shadow", white);
}

Any idea how this is supposed to work idiomatically? Any help is greatly appreciated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant