From b7daba62bbfe8306bc62f71606667e0bb1510dde Mon Sep 17 00:00:00 2001
From: jfhr <me@jfhr.de>
Date: Fri, 9 Jun 2023 22:19:18 +0200
Subject: [PATCH] Add CSS variable example

---
 src/default.sass | 10 ++++++++++
 src/solar.sass   | 11 +++++++++++
 src/styles.sass  |  6 ++++++
 src/united.scss  | 12 ++++++++++++
 src/vapor.scss   | 11 +++++++++++
 5 files changed, 50 insertions(+)

diff --git a/src/default.sass b/src/default.sass
index 95fbb0d..c8dbb6f 100644
--- a/src/default.sass
+++ b/src/default.sass
@@ -1 +1,11 @@
 @import '~bootstrap/scss/bootstrap'
+
+// Set the CSS variable --primary to the value of the bootstrap variable $primary.
+// The value of a bootstrap variable is determined at build time. After building, this
+// file will be converted to a file default.css with the content:
+//   * {
+//     --primary: #0d6efd
+//   }
+
+*
+  --primary: #{$primary}
diff --git a/src/solar.sass b/src/solar.sass
index 70e3151..af2f671 100644
--- a/src/solar.sass
+++ b/src/solar.sass
@@ -189,3 +189,14 @@ $btn-close-color:                       $body-color !default
 $pre-color:                         inherit !default
 
 @import '~bootstrap/scss/bootstrap'
+
+// Set the CSS variable --primary to the value of the bootstrap variable $primary.
+// The value of a bootstrap variable is determined at build time. After building, this
+// file will be converted to a file default.css with the content:
+//   * {
+//     --primary: #b58900
+//   }
+
+
+*
+  --primary: #{$primary}
diff --git a/src/styles.sass b/src/styles.sass
index 90d4ee0..fb210d9 100644
--- a/src/styles.sass
+++ b/src/styles.sass
@@ -1 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
+
+// Set the background color to the value of the CSS variable --primary. 
+// The value of a CSS variable may change at runtime if a different stylesheet is loaded.
+
+body
+  background-color: var(--primary) !important
diff --git a/src/united.scss b/src/united.scss
index 55e0d86..075bf53 100644
--- a/src/united.scss
+++ b/src/united.scss
@@ -56,3 +56,15 @@ $table-dark-bg:               $dark !default;
 $table-dark-border-color:     darken($dark, 5%) !default;
 
 @import '~bootstrap/scss/bootstrap';
+
+// Set the CSS variable --primary to the value of the bootstrap variable $primary.
+// The value of a bootstrap variable is determined at build time. After building, this
+// file will be converted to a file default.css with the content:
+//   * {
+//     --primary: #e95420
+//   }
+
+
+* {
+  --primary: #{$primary};
+}
diff --git a/src/vapor.scss b/src/vapor.scss
index 5b735ed..0dd2106 100644
--- a/src/vapor.scss
+++ b/src/vapor.scss
@@ -168,3 +168,14 @@ hr:not([size]) {
 }
 
 @import '~bootstrap/scss/bootstrap';
+
+// Set the CSS variable --primary to the value of the bootstrap variable $primary.
+// The value of a bootstrap variable is determined at build time. After building, this
+// file will be converted to a file default.css with the content:
+//   * {
+//     --primary: #6f42c1
+//   }
+
+* {
+  --primary: #{$primary};
+}