bulma/sass/themes/dark.scss

@use "sass:list";

@use "../utilities/initial-variables" as iv;
@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@use "setup";

// The main lightness of this theme
$scheme-main-l: 9%;
$background-l: 14%;
$text-l: 71%;

// The main scheme color, used to make calculations
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);

@mixin dark-theme {
  @each $name, $color in dv.$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",
      "scheme-main-l": $scheme-main-l,
      "scheme-main-bis-l": $scheme-main-l + 2%,
      "scheme-main-ter-l": $scheme-main-l + 4%,
      "soft-l": iv.$dark-l,
      "bold-l": iv.$light-l,
      "soft-invert-l": iv.$light-l,
      "bold-invert-l": iv.$dark-l,
      "background-l": $background-l,
      "border-weak-l": 21%,
      "border-l": 24%,
      "text-weak-l": 53%,
      "text-l": $text-l,
      "text-strong-l": 93%,
      "text-title-l": 100%,
      "hover-background-l-delta": 5%,
      "focus-background-l-delta": 5%,
      "active-background-l-delta": 10%,
      "hover-border-l-delta": 10%,
      "focus-border-l-delta": 10%,
      "active-border-l-delta": 20%,
      "hover-color-l-delta": 5%,
      "focus-color-l-delta": 5%,
      "active-color-l-delta": 10%,
    )
  );

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