Multi-theme support with css variables (and auto dark-mode) (WIP)

sass/base/generic.sass

@@ -1,14 +1,14 @@
 @import "../utilities/mixins"
 
-$body-background-color: $scheme-main !default
+$body-background-color: var(--scheme-main) !default
 $body-size: 16px !default
 $body-min-width: 300px !default
 $body-rendering: optimizeLegibility !default
 $body-family: $family-primary !default
 $body-overflow-x: hidden !default
 $body-overflow-y: scroll !default
 
-$body-color: $text !default
+$body-color: var(--text) !default
 $body-font-size: 1em !default
 $body-weight: $weight-normal !default
 $body-line-height: 1.5 !default
@@ -20,11 +20,11 @@ $code-size: 0.875em !default
 
 $small-font-size: 0.875em !default
 
-$hr-background-color: $background !default
+$hr-background-color: var(--background) !default
 $hr-height: 2px !default
 $hr-margin: 1.5rem 0 !default
 
-$strong-color: $text-strong !default
+$strong-color: var(--text-strong) !default
 $strong-weight: $weight-bold !default
 
 $pre-font-size: 0.875em !default
@@ -74,17 +74,17 @@ body
 // Inline
 
 a
-  color: $link
+  color: var(--link)
   cursor: pointer
   text-decoration: none
   strong
     color: currentColor
   &:hover
-    color: $link-hover
+    color: var(--link-hover)
 
 code
-  background-color: $code-background
-  color: $code
+  background-color: var(--code-background)
+  color: var(--code)
   font-size: $code-size
   font-weight: $code-weight
   padding: $code-padding
@@ -122,8 +122,8 @@ fieldset
 
 pre
   +overflow-touch
-  background-color: $pre-background
-  color: $pre
+  background-color: var(--pre-background)
+  color: var(--pre)
   font-size: $pre-font-size
   overflow-x: auto
   padding: $pre-padding
@@ -142,4 +142,4 @@ table
     &:not([align])
       text-align: inherit
   th
-    color: $text-strong
+    color: var(--text-strong)

sass/components/breadcrumb.sass

@@ -1,13 +1,13 @@
 @import "../utilities/mixins"
 
-$breadcrumb-item-color: $link !default
-$breadcrumb-item-hover-color: $link-hover !default
-$breadcrumb-item-active-color: $text-strong !default
+$breadcrumb-item-color: var(--link) !default
+$breadcrumb-item-hover-color: var(--link-hover) !default
+$breadcrumb-item-active-color: var(--text-strong) !default
 
 $breadcrumb-item-padding-vertical: 0 !default
 $breadcrumb-item-padding-horizontal: 0.75em !default
 
-$breadcrumb-item-separator-color: $border-hover !default
+$breadcrumb-item-separator-color: var(--border-hover) !default
 
 .breadcrumb
   @extend %block

sass/components/card.sass

@@ -1,21 +1,21 @@
 @import "../utilities/mixins"
 
-$card-color: $text !default
-$card-background-color: $scheme-main !default
-$card-shadow: $shadow !default
+$card-color: var(--text) !default
+$card-background-color: var(--scheme-main) !default
+$card-shadow: var(--shadow) !default
 $card-radius: 0.25rem !default
 
 $card-header-background-color: transparent !default
-$card-header-color: $text-strong !default
+$card-header-color: var(--text-strong) !default
 $card-header-padding: 0.75rem 1rem !default
-$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
+$card-header-shadow: 0 0.125em 0.25em rgba(var(--scheme-invert), 0.1) !default
 $card-header-weight: $weight-bold !default
 
 $card-content-background-color: transparent !default
 $card-content-padding: 1.5rem !default
 
 $card-footer-background-color: transparent !default
-$card-footer-border-top: 1px solid $border-light !default
+$card-footer-border-top: 1px solid var(--border-light) !default
 $card-footer-padding: 0.75rem !default
 
 $card-media-margin: $block-spacing !default

sass/components/dropdown.sass

@@ -2,22 +2,22 @@
 
 $dropdown-menu-min-width: 12rem !default
 
-$dropdown-content-background-color: $scheme-main !default
-$dropdown-content-arrow: $link !default
+$dropdown-content-background-color: var(--scheme-main) !default
+$dropdown-content-arrow: var(--link) !default
 $dropdown-content-offset: 4px !default
 $dropdown-content-padding-bottom: 0.5rem !default
 $dropdown-content-padding-top: 0.5rem !default
 $dropdown-content-radius: $radius !default
-$dropdown-content-shadow: $shadow !default
+$dropdown-content-shadow: var(--shadow) !default
 $dropdown-content-z: 20 !default
 
-$dropdown-item-color: $text !default
-$dropdown-item-hover-color: $scheme-invert !default
-$dropdown-item-hover-background-color: $background !default
-$dropdown-item-active-color: $link-invert !default
-$dropdown-item-active-background-color: $link !default
+$dropdown-item-color: var(--text) !default
+$dropdown-item-hover-color: var(--scheme-invert) !default
+$dropdown-item-hover-background-color: var(--background) !default
+$dropdown-item-active-color: var(--link-invert) !default
+$dropdown-item-active-background-color: var(--link) !default
 
-$dropdown-divider-background-color: $border-light !default
+$dropdown-divider-background-color: var(--border-light) !default
 
 .dropdown
   display: inline-flex

sass/components/media.sass

@@ -1,6 +1,6 @@
 @import "../utilities/mixins"
 
-$media-border-color: bulmaRgba($border, 0.5) !default
+$media-border-color: rgba(var(--border), 0.5) !default
 $media-border-size: 1px !default
 $media-spacing: 1rem !default
 $media-spacing-large: 1.5rem !default

sass/components/menu.sass

@@ -1,19 +1,19 @@
 @import "../utilities/mixins"
 
-$menu-item-color: $text !default
+$menu-item-color: var(--text) !default
 $menu-item-radius: $radius-small !default
-$menu-item-hover-color: $text-strong !default
-$menu-item-hover-background-color: $background !default
-$menu-item-active-color: $link-invert !default
-$menu-item-active-background-color: $link !default
+$menu-item-hover-color: var(--text-strong) !default
+$menu-item-hover-background-color: var(--background) !default
+$menu-item-active-color: var(--link-invert) !default
+$menu-item-active-background-color: var(--link) !default
 
-$menu-list-border-left: 1px solid $border !default
+$menu-list-border-left: 1px solid var(--border) !default
 $menu-list-line-height: 1.25 !default
 $menu-list-link-padding: 0.5em 0.75em !default
 $menu-nested-list-margin: 0.75em !default
 $menu-nested-list-padding-left: 0.75em !default
 
-$menu-label-color: $text-light !default
+$menu-label-color: var(--text-light) !default
 $menu-label-font-size: 0.75em !default
 $menu-label-letter-spacing: 0.1em !default
 $menu-label-spacing: 1em !default

sass/components/message.sass

@@ -1,21 +1,21 @@
 @import "../utilities/mixins"
 
-$message-background-color: $background !default
+$message-background-color: var(--background) !default
 $message-radius: $radius !default
 
-$message-header-background-color: $text !default
-$message-header-color: $text-invert !default
+$message-header-background-color: var(--text) !default
+$message-header-color: var(--text-invert) !default
 $message-header-weight: $weight-bold !default
 $message-header-padding: 0.75em 1em !default
 $message-header-radius: $radius !default
 
-$message-body-border-color: $border !default
+$message-body-border-color: var(--border) !default
 $message-body-border-width: 0 0 0 4px !default
-$message-body-color: $text !default
+$message-body-color: var(--text) !default
 $message-body-padding: 1.25em 1.5em !default
 $message-body-radius: $radius !default
 
-$message-body-pre-background-color: $scheme-main !default
+$message-body-pre-background-color: var(--scheme-main) !default
 $message-body-pre-code-background-color: transparent !default
 
 $message-header-body-border-width: 0 !default

sass/components/modal.sass

@@ -2,7 +2,7 @@
 
 $modal-z: 40 !default
 
-$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
+$modal-background-background-color: rgba(var(--scheme-invert), 0.86) !default
 
 $modal-content-width: 640px !default
 $modal-content-margin-mobile: 20px !default
@@ -15,19 +15,19 @@ $modal-close-top: 20px !default
 
 $modal-card-spacing: 40px !default
 
-$modal-card-head-background-color: $background !default
-$modal-card-head-border-bottom: 1px solid $border !default
+$modal-card-head-background-color: var(--background) !default
+$modal-card-head-border-bottom: 1px solid var(--border) !default
 $modal-card-head-padding: 20px !default
 $modal-card-head-radius: $radius-large !default
 
-$modal-card-title-color: $text-strong !default
+$modal-card-title-color: var(--text-strong) !default
 $modal-card-title-line-height: 1 !default
 $modal-card-title-size: $size-4 !default
 
 $modal-card-foot-radius: $radius-large !default
-$modal-card-foot-border-top: 1px solid $border !default
+$modal-card-foot-border-top: 1px solid var(--border) !default
 
-$modal-card-body-background-color: $scheme-main !default
+$modal-card-body-background-color: var(--scheme-main) !default
 $modal-card-body-padding: 20px !default
 
 $modal-breakpoint: $tablet !default

sass/components/navbar.sass

@@ -1,47 +1,47 @@
 @import "../utilities/mixins"
 
-$navbar-background-color: $scheme-main !default
+$navbar-background-color: var(--scheme-main) !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
-$navbar-box-shadow-color: $background !default
+$navbar-box-shadow-color: var(--background) !default
 $navbar-height: 3.25rem !default
 $navbar-padding-vertical: 1rem !default
 $navbar-padding-horizontal: 2rem !default
 $navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
 
-$navbar-item-color: $text !default
-$navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $scheme-main-bis !default
-$navbar-item-active-color: $scheme-invert !default
+$navbar-item-color: var(--text) !default
+$navbar-item-hover-color: var(--link) !default
+$navbar-item-hover-background-color: var(--scheme-main-bis) !default
+$navbar-item-active-color: var(--scheme-invert) !default
 $navbar-item-active-background-color: transparent !default
 $navbar-item-img-max-height: 1.75rem !default
 
 $navbar-burger-color: $navbar-item-color !default
 
 $navbar-tab-hover-background-color: transparent !default
-$navbar-tab-hover-border-bottom-color: $link !default
-$navbar-tab-active-color: $link !default
+$navbar-tab-hover-border-bottom-color: var(--link) !default
+$navbar-tab-active-color: var(--link) !default
 $navbar-tab-active-background-color: transparent !default
-$navbar-tab-active-border-bottom-color: $link !default
+$navbar-tab-active-border-bottom-color: var(--link) !default
 $navbar-tab-active-border-bottom-style: solid !default
 $navbar-tab-active-border-bottom-width: 3px !default
 
-$navbar-dropdown-background-color: $scheme-main !default
-$navbar-dropdown-border-top: 2px solid $border !default
+$navbar-dropdown-background-color: var(--scheme-main) !default
+$navbar-dropdown-border-top: 2px solid var(--border) !default
 $navbar-dropdown-offset: -4px !default
-$navbar-dropdown-arrow: $link !default
+$navbar-dropdown-arrow: var(--link) !default
 $navbar-dropdown-radius: $radius-large !default
 $navbar-dropdown-z: 20 !default
 
 $navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px rgba(var(--scheme-invert), 0.1), 0 0 0 1px rgba(var(--scheme-invert), 0.1) !default
 
-$navbar-dropdown-item-hover-color: $scheme-invert !default
-$navbar-dropdown-item-hover-background-color: $background !default
-$navbar-dropdown-item-active-color: $link !default
-$navbar-dropdown-item-active-background-color: $background !default
+$navbar-dropdown-item-hover-color: var(--scheme-invert) !default
+$navbar-dropdown-item-hover-background-color: var(--background) !default
+$navbar-dropdown-item-active-color: var(--link) !default
+$navbar-dropdown-item-active-background-color: var(--background) !default
 
-$navbar-divider-background-color: $background !default
+$navbar-divider-background-color: var(--background) !default
 $navbar-divider-height: 2px !default
 
 $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
@@ -249,7 +249,7 @@ a.navbar-item,
       display: none
   .navbar-menu
     background-color: $navbar-background-color
-    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
+    box-shadow: 0 8px 16px rgba(var(--scheme-invert), 0.1)
     padding: 0.5rem 0
     &.is-active
       display: block
@@ -261,7 +261,7 @@ a.navbar-item,
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px rgba(var(--scheme-invert), 0.1)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
@@ -334,7 +334,7 @@ a.navbar-item,
         border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -8px 8px rgba(var(--scheme-invert), 0.1)
         top: auto
     &.is-active,
     &.is-hoverable:focus,
@@ -361,7 +361,7 @@ a.navbar-item,
     border-bottom-left-radius: $navbar-dropdown-radius
     border-bottom-right-radius: $navbar-dropdown-radius
     border-top: $navbar-dropdown-border-top
-    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
+    box-shadow: 0 8px 8px rgba(var(--scheme-invert), 0.1)
     display: none
     font-size: 0.875rem
     +ltr-position(0, false)
@@ -412,7 +412,7 @@ a.navbar-item,
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px rgba(var(--scheme-invert), 0.1)
     &.is-fixed-top-desktop
       top: 0
   html,