bulma/docs/bulma-dark.sass

@import "../sass/utilities/initial-variables.sass"

@media (prefers-color-scheme: light)
  .bd-scheme-dark
    display: none

@media (prefers-color-scheme: dark)
  // General colors
  $scheme-main: $black
  $scheme-main-bis: $black-bis
  $scheme-main-ter: $black-ter
  $scheme-invert: $white
  $scheme-invert-bis: $white-bis
  $scheme-invert-ter: $white-ter
  $background: $black-ter
  $border: $grey-darker
  $border-hover: $grey-dark
  $border-light: $grey-darker
  $border-light-hover: $grey-dark
  // Text colors
  $text: $grey-light
  $text-invert: $grey-darker
  $text-light: $grey
  $text-strong: $white
  // Code colors
  $code: $red
  $code-background: $background
  $pre: $text
  $pre-background: $background
  // Link colors
  $link-hover: $white
  $link-hover-border: $grey-dark
  $link-focus: $white
  $link-focus-border: $blue
  $link-active: $white
  $link-active-border: $grey-light
  .bd-scheme-light
    display: none
  \:root
    --#{$prefix}scheme-main: #{$scheme-main}
    --#{$prefix}scheme-main-bis: #{$scheme-main-bis}
    --#{$prefix}scheme-main-ter: #{$scheme-main-ter}
    --#{$prefix}scheme-invert: #{$scheme-invert}
    --#{$prefix}scheme-invert-bis: #{$scheme-invert-bis}
    --#{$prefix}scheme-invert-ter: #{$scheme-invert-ter}
    --#{$prefix}background: #{$background}
    --#{$prefix}border: #{$border}
    --#{$prefix}border-hover: #{$border-hover}
    --#{$prefix}border-light: #{$border-light}
    --#{$prefix}border-light-hover: #{$border-light-hover}
    --#{$prefix}text: #{$text}
    --#{$prefix}text-invert: #{$text-invert}
    --#{$prefix}text-light: #{$text-light}
    --#{$prefix}text-strong: #{$text-strong}
    --#{$prefix}code: #{$code}
    --#{$prefix}code-background: #{$code-background}
    --#{$prefix}pre: #{$pre}
    --#{$prefix}pre-background: #{$pre-background}
    --#{$prefix}link: #{$link}
    --#{$prefix}link-invert: #{$link-invert}
    --#{$prefix}link-light: #{$link-light}
    --#{$prefix}link-dark: #{$link-dark}
    --#{$prefix}link-visited: #{$link-visited}
    --#{$prefix}link-hover: #{$link-hover}
    --#{$prefix}link-hover-border: #{$link-hover-border}
    --#{$prefix}link-focus: #{$link-focus}
    --#{$prefix}link-focus-border: #{$link-focus-border}
    --#{$prefix}link-active: #{$link-active}
    --#{$prefix}link-active-border: #{$link-active-border}
  .bd-navbar
    background-color: $scheme-main-bis
    &.has-shadow
      box-shadow: none
    .navbar-burger
      color: $text
    .navbar-item,
    .navbar-link
      color: $text
    a.navbar-item,
    .navbar-link
      &:focus,
      &:focus-within,
      &:hover,
      &.is-active
        background-color: $scheme-main-bis
        color: $link
    .navbar-divider
      background-color: $background
    +until($navbar-breakpoint)
      .navbar-menu
        background-color: $scheme-main
        box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
    +from($navbar-breakpoint)
      .navbar-dropdown
        background-color: $scheme-main-bis
        border-top-color: $border
        box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
        a.navbar-item
          &:focus,
          &:hover
            background-color: $background
            color: $scheme-invert
          &.is-active
            background-color: $background
            color: $white
      a.navbar-item,
      .navbar-link
        &.is-active
          color: $white
        &.is-active:not(:focus)
          background-color: $background
      .navbar-item.has-dropdown
        &:focus,
        &:hover,
        &.is-active
          .navbar-link
            background-color: $background
  .card
    background-color: $scheme-main-bis
    box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
  .card-header
    box-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1)
  .dropdown-content
    background-color: $scheme-main-bis
    box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
  .media .media,
  .media + .media
    border-top-color: rgba($border, 0.5)
  .pagination-previous,
  .pagination-next,
  .pagination-link
    &:active
      box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2)
  .panel
    background-color: $scheme-main-bis
    box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
  .box
    box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
  a.box
    &:hover,
    &:focus
      box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link
    &:active
      box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
  .delete
    background-color: rgba($scheme-invert, 0.2)
    &::before,
    &::after
      background-color: $scheme-main
    &:hover,
    &:focus
      background-color: rgba($scheme-invert, 0.3)
    &:active
      background-color: rgba($scheme-invert, 0.4)
  .notification
    background-color: $background
  .progress
    &::-webkit-progress-bar
      background-color: $border-light
    &::-webkit-progress-value
      background-color: $text
    &::-moz-progress-bar
      background-color: $text
    &::-ms-fill
      background-color: $text
    @each $name, $pair in $colors
      $color: nth($pair, 1)
      &.is-#{$name}
        &:indeterminate
          background-image: linear-gradient(to right, $color 30%, $border-light 30%)
    &:indeterminate
      background-color: $border-light
      background-image: linear-gradient(to right, $text 30%, $border-light 30%)

html
  background-color: var(--#{$prefix}scheme-main)

body
  color: var(--#{$prefix}text)

a
  color: var(--#{$prefix}link)

  &:hover
    color: var(--#{$prefix}link-hover)

code
  background-color: var(--#{$prefix}code-background)
  color: var(--#{$prefix}code)

hr
  background-color: var(--#{$prefix}background)

strong
  color: var(--#{$prefix}text-strong)

pre
  background-color: var(--#{$prefix}pre-background)
  color: var(--#{$prefix}pre)

table
  th
    color: var(--#{$prefix}text-strong)

// Components
.breadcrumb
  a
    color: var(--#{$prefix}link)
    &:hover
      color: var(--#{$prefix}link-hover)
  li
    &.is-active
      a
        color: var(--#{$prefix}text-strong)
    & + li::before
      color: var(--#{$prefix}border-hover)

.card
  // background-color: var(--#{$prefix}scheme-main)
  color: var(--#{$prefix}text)

.card-header-title
  color: var(--#{$prefix}text-strong)

.card-footer
  border-top-color: var(--#{$prefix}border-light)

.card-footer-item
  &:not(:last-child)
    border-right-color: var(--#{$prefix}border-light)

.dropdown-content
  // background-color: var(--#{$prefix}scheme-main)

.dropdown-item
  color: var(--#{$prefix}text)

a.dropdown-item,
button.dropdown-item
  &:hover
    background-color: var(--#{$prefix}background)
    color: var(--#{$prefix}scheme-invert)
  &.is-active
    background-color: var(--#{$prefix}link)
    color: var(--#{$prefix}link-invert)

.dropdown-divider
  background-color: var(--#{$prefix}border-light)

.menu-list
  a
    color: var(--#{$prefix}text)
    &:hover
      background-color: var(--#{$prefix}background)
      color: var(--#{$prefix}text-strong)
    &.is-active
      background-color: var(--#{$prefix}link)
      color: var(--#{$prefix}link-invert)
  li
    ul
      border-left-color: var(--#{$prefix}border)

.menu-label
  color: var(--#{$prefix}text-light)

// .message
//   background-color: var(--#{$prefix}background)

// .message-header
//   background-color: var(--#{$prefix}text)
//   color: var(--#{$prefix}text-invert)

// .message-body
//   border-color: var(--#{$prefix}border)
//   color: var(--#{$prefix}text)
//   code,
//   pre
//     background-color: var(--#{$prefix}scheme-main)

.modal-card-head,
.modal-card-foot
  background-color: var(--#{$prefix}background)

.modal-card-head
  border-bottom-color: var(--#{$prefix}border)

.modal-card-title
  color: var(--#{$prefix}text-strong)

.modal-card-foot
  border-top-color: var(--#{$prefix}border)

.modal-card-body
  background-color: var(--#{$prefix}scheme-main)

// .navbar
//   background-color: var(--#{$prefix}scheme-main)

// .navbar-burger
//   color: var(--#{$prefix}text)

// .navbar-item,
// .navbar-link
//   color: var(--#{$prefix}text)

// a.navbar-item,
// .navbar-link
//   cursor: pointer
//   &:focus,
//   &:focus-within,
//   &:hover,
//   &.is-active
//     background-color: var(--#{$prefix}scheme-main-bis)
//     color: var(--#{$prefix}link)

.pagination-previous,
.pagination-next,
.pagination-link
  border-color: var(--#{$prefix}border)
  color: var(--#{$prefix}text-strong)
  &:hover
    border-color: var(--#{$prefix}link-hover-border)
    color: var(--#{$prefix}link-hover)
  &:focus
    border-color: var(--#{$prefix}link-focus-border)
  &[disabled]
    background-color: var(--#{$prefix}border)
    border-color: var(--#{$prefix}border)
    color: var(--#{$prefix}text-light)

.pagination-link
  &.is-current
    background-color: var(--#{$prefix}link)
    border-color: var(--#{$prefix}link)
    color: var(--#{$prefix}link-invert)

.pagination-ellipsis
  color: var(--#{$prefix}border-hover)

.panel-tabs,
.panel-block
  &:not(:last-child)
    border-bottom-color: var(--#{$prefix}border-light)

.panel-heading
  background-color: var(--#{$prefix}border-light)
  color: var(--#{$prefix}text-strong)

.panel-tabs
  a
    border-bottom-color: var(--#{$prefix}border)
    &.is-active
      border-bottom-color: var(--#{$prefix}link-active-border)
      color: var(--#{$prefix}link-active)

.panel-list
  a
    color: var(--#{$prefix}text)
    &:hover
      color: var(--#{$prefix}link)

.panel-block
  color: var(--#{$prefix}text-strong)
  &.is-active
    border-left-color: var(--#{$prefix}link)
    color: var(--#{$prefix}link-active)
    .panel-icon
      color: var(--#{$prefix}link)

a.panel-block,
label.panel-block
  &:hover
    background-color: var(--#{$prefix}background)

.panel-icon
  color: var(--#{$prefix}text-light)

.tabs
  a
    border-bottom-color: var(--#{$prefix}border)
    color: var(--#{$prefix}text)
    &:hover
      border-bottom-color: var(--#{$prefix}text-strong)
      color: var(--#{$prefix}text-strong)
  li
    &.is-active
      a
        border-bottom-color: var(--#{$prefix}link)
        color: var(--#{$prefix}link)
  ul
    border-bottom-color: var(--#{$prefix}border)
  &.is-boxed
    a
      &:hover
        background-color: var(--#{$prefix}background)
        border-bottom-color: var(--#{$prefix}border)
    li
      &.is-active
        a
          background-color: var(--#{$prefix}scheme-main)
          border-color: var(--#{$prefix}border)
  &.is-toggle
    a
      border-color: var(--#{$prefix}border)
      &:hover
        background-color: var(--#{$prefix}background)
        border-color: var(--#{$prefix}border-hover)
    li
      &.is-active
        a
          background-color: var(--#{$prefix}link)
          border-color: var(--#{$prefix}link)
          color: var(--#{$prefix}link-invert)

// Elements
.box
  background-color: var(--#{$prefix}scheme-main)
  color: var(--#{$prefix}text)

.content
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    color: var(--#{$prefix}text-strong)
  blockquote
    background-color: var(--#{$prefix}background)
    border-left-color: var(--#{$prefix}border)
  table
    td,
    th
      border-color: var(--#{$prefix}border)
    th
      color: var(--#{$prefix}text-strong)
    thead
      td,
      th
        color: var(--#{$prefix}text-strong)
    tfoot
      td,
      th
        color: var(--#{$prefix}text-strong)

.table
  background-color: var(--#{$prefix}scheme-main)
  color: var(--#{$prefix}text-strong)
  td,
  th
    border-color: var(--#{$prefix}border)
    &.is-selected
      background-color: var(--#{$prefix}primary)
      color: var(--#{$prefix}primary-invert)
  th
    color: var(--#{$prefix}text-strong)
  tr
    &.is-selected
      background-color: var(--#{$prefix}primary)
      color: var(--#{$prefix}primary-invert)
      td,
      th
        border-color: var(--#{$prefix}primary-invert)
  thead
    td,
    th
      color: var(--#{$prefix}text-strong)
  tfoot
    td,
    th
      color: var(--#{$prefix}text-strong)
  &.is-hoverable
    tbody
      tr:not(.is-selected)
        &:hover
          background-color: var(--#{$prefix}scheme-main-bis)
    &.is-striped
      tbody
        tr:not(.is-selected)
          &:hover
            background-color: var(--#{$prefix}scheme-main-bis)
            &:nth-child(even)
              background-color: var(--#{$prefix}scheme-main-ter)
  &.is-striped
    tbody
      tr:not(.is-selected)
        &:nth-child(even)
          background-color: var(--#{$prefix}scheme-main-bis)

.tag:not(body)
  background-color: var(--tag-background-color) !important
  color: var(--tag-color) !important
  --tag-background-color: var(--#{$prefix}background)
  --tag-color: var(--#{$prefix}text)
  @each $name, $color in $cssvar-colors
    $base: "#{$prefix}#{$name}"
    &.is-#{$name}
      --tag-background-color: var(--#{$base})
      --tag-color: var(--#{$base}-invert)
      &.is-light
        --tag-background-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 7%)
        --tag-color: var(--#{$base})

.title
  color: var(--#{$prefix}text-strong)

.subtitle
  color: var(--#{$prefix}text)
  strong
    color: var(--#{$prefix}text-strong)

.footer
  background-color: var(--#{$prefix}scheme-main-bis)