Merge pull request #33 from rahulbsw/docs/pages-light-dark-theme

docs(pages): Add responsive light and dark theme

Author: rahulbsw

docs/_includes/head_custom.html

@@ -1,7 +1,19 @@
 <link rel="icon" href="{{ '/assets/images/streamforge-mark.svg' | relative_url }}" type="image/svg+xml">
+<script>
+  (function () {
+    var savedTheme = null;
+    try {
+      savedTheme = window.localStorage.getItem("streamforge-theme");
+    } catch (error) {
+      savedTheme = null;
+    }
+    document.documentElement.dataset.theme =
+      savedTheme === "dark" || savedTheme === "light" ? savedTheme : "light";
+  })();
+</script>
 <link rel="stylesheet" href="{{ '/assets/css/streamforge-site.css' | relative_url }}">
 {% if page.permalink == '/404.html' %}<base href="{{ '/' | relative_url }}">{% endif %}
-<meta name="theme-color" content="#0b1117">
+<meta name="theme-color" content="#f6f9fb">
 <meta property="og:type" content="website">
 <meta property="og:title" content="{{ page.title | default: site.title | escape }}">
 <meta property="og:description" content="{{ page.description | default: site.description | escape }}">
@@ -14,3 +26,39 @@
 <meta name="twitter:title" content="{{ page.title | default: site.title | escape }}">
 <meta name="twitter:description" content="{{ page.description | default: site.description | escape }}">
 <meta name="twitter:image" content="{{ '/assets/images/streamforge-social-card.png' | absolute_url }}">
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var themeButton = document.createElement("button");
+    var themeColor = document.querySelector('meta[name="theme-color"]');
+
+    themeButton.type = "button";
+    themeButton.className = "sf-theme-toggle";
+
+    function renderThemeButton() {
+      var isDark = document.documentElement.dataset.theme === "dark";
+      themeButton.setAttribute("aria-label", isDark ? "Use light theme" : "Use dark theme");
+      themeButton.setAttribute("title", isDark ? "Use light theme" : "Use dark theme");
+      themeButton.innerHTML =
+        '<span aria-hidden="true">' + (isDark ? "☀" : "☾") + "</span>" +
+        "<b>" + (isDark ? "Light" : "Dark") + "</b>";
+      if (themeColor) {
+        themeColor.setAttribute("content", isDark ? "#0b131a" : "#f6f9fb");
+      }
+    }
+
+    themeButton.addEventListener("click", function () {
+      var nextTheme =
+        document.documentElement.dataset.theme === "dark" ? "light" : "dark";
+      document.documentElement.dataset.theme = nextTheme;
+      try {
+        window.localStorage.setItem("streamforge-theme", nextTheme);
+      } catch (error) {
+        /* Theme selection remains active for the current page. */
+      }
+      renderThemeButton();
+    });
+
+    renderThemeButton();
+    document.body.appendChild(themeButton);
+  });
+</script>

docs/_sass/color_schemes/streamforge.scss

@@ -1,31 +1,31 @@
-$body-background-color: #101418;
-$sidebar-color: #151b21;
-$search-background-color: #151b21;
-$table-background-color: #101418;
-$code-background-color: #1c252d;
-
-$body-heading-color: #f4f7f9;
-$body-text-color: #d5dde4;
-$link-color: #ff6b4a;
-$nav-child-link-color: #b8c4ce;
-$search-result-preview-color: #8ea0ad;
-
-$border-color: #2c3843;
-$base-button-color: #1c252d;
-$btn-primary-color: #ff6b4a;
+$body-background-color: #f6f9fb;
+$sidebar-color: #ffffff;
+$search-background-color: #ffffff;
+$table-background-color: #ffffff;
+$code-background-color: #edf3f6;
+
+$body-heading-color: #13232d;
+$body-text-color: #344954;
+$link-color: #c8442f;
+$nav-child-link-color: #4f6570;
+$search-result-preview-color: #637782;
+
+$border-color: #d8e2e7;
+$base-button-color: #edf3f6;
+$btn-primary-color: #d9563e;
 
 $feedback-color: darken($sidebar-color, 3%);
 
-$grey-dk-000: #d5dde4;
-$grey-dk-100: #b8c4ce;
-$grey-dk-200: #8ea0ad;
-$grey-dk-250: #657481;
-$grey-dk-300: #2c3843;
+$grey-dk-000: #344954;
+$grey-dk-100: #4f6570;
+$grey-dk-200: #637782;
+$grey-dk-250: #84939b;
+$grey-dk-300: #d8e2e7;
 
-$red-000: #ffd3c7;
-$red-100: #ff9b7f;
-$red-200: #ff6b4a;
-$red-300: #e34a2f;
+$red-000: #ffe1da;
+$red-100: #f5a18e;
+$red-200: #d9563e;
+$red-300: #b93624;
 
 $orange-000: #ffe5c2;
 $orange-100: #ffc46e;