Clarify light + dark theme use comments.

hibbitts-design · Aug 17, 2023 · 1d61e3e · 1d61e3e
1 parent 15609a9
commit 1d61e3e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 18 deletions.
diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css
@@ -27,11 +27,6 @@ body .markdown-section {
     --sidebar-nav-link-color--active: #CC0633!important;
     --sidebar-nav-link-border-color--active: #CC0633!important;
 
-    --sidebar-nav-pagelink-background:
-        no-repeat 2px calc(50% - 2.5px) / 6px 5px
-        linear-gradient(45deg, transparent 2.75px, #757575 2.75px 4.25px, transparent 4px),
-        no-repeat 2px calc(50% + 2.5px) / 6px 5px
-        linear-gradient(135deg, transparent 2.75px, #757575 2.75px 4.25px, transparent 4px)!important;
     --sidebar-nav-pagelink-background--active:
         no-repeat 0px center / 5px 6px
         linear-gradient(225deg, transparent 2.75px, #CC0633 2.75px 4.25px, transparent 4.25px),
@@ -57,7 +52,7 @@ body .markdown-section {
 }
 */
 
-/* Dark mode colours to match SFU branding visual styling for use with light + dark themes (uncomment to use) */
+/* Dark mode colours to match SFU branding visual styling for use with light + dark theme (uncomment to use) */
 /*
 @media (prefers-color-scheme: dark) {
 :root {
@@ -71,8 +66,6 @@ body .markdown-section {
     --sidebar-nav-link-color--active: #EA7688!important;
     --sidebar-nav-link-border-color--active: #EA7688!important;
 
-    --sidebar-nav-pagelink-background:
-        no-repeat 2px calc(50% - 2.5px) / 6px 5px linear-gradient(45deg, transparent 2.75px, #757575 2.75px 4.25px, transparent 4px), no-repeat 2px calc(50% + 2.5px) / 6px 5px linear-gradient(135deg, transparent 2.75px, #757575 2.75px 4.25px, transparent 4px)!important;
     --sidebar-nav-pagelink-background--active:
         no-repeat 0px center / 5px 6px linear-gradient(225deg, transparent 2.75px, #EA7688 2.75px 4.25px, transparent 4.25px), no-repeat 5px center / 5px 6px linear-gradient(135deg, transparent 2.75px, #EA7688 2.75px 4.25px, transparent 4.25px)!important;
     --sidebar-nav-pagelink-background--collapse:

diff --git a/docs/assets/css/theme.css b/docs/assets/css/theme.css
@@ -472,19 +472,38 @@ body .docsify-pagination-container {
 
 }
 
-/* Dark mode colours for use with light + dark themes */
-/*
+/* Dark mode colours for use with light + dark themes (uncomment to use) */
 @media (prefers-color-scheme: dark) {
-
+/*
   :root {
-    --navbar-root-color--active: #1BA1EE!important;
-    --blockquote-border-color: #1BA1EE!important;
+    --link-color: #1BA1EE!important;
+
     --sidebar-name-color: #1BA1EE!important;
     --sidebar-nav-link-color--active: #1BA1EE!important;
     --sidebar-nav-link-border-color--active: #1BA1EE!important;
-    --link-color: #1BA1EE!important;
+
+    --sidebar-nav-pagelink-background--active:
+        no-repeat 0px center / 5px 6px
+        linear-gradient(225deg, transparent 2.75px, #1BA1EE 2.75px 4.25px, transparent 4.25px),
+        no-repeat 5px center / 5px 6px
+        linear-gradient(135deg, transparent 2.75px, #1BA1EE 2.75px 4.25px, transparent 4.25px)!important;
+    --sidebar-nav-pagelink-background--collapse:
+        no-repeat 2px calc(50% - 2.5px) / 6px 5px
+        linear-gradient(45deg, transparent 2.75px, #1BA1EE 2.75px 4.25px, transparent 4px),
+        no-repeat 2px calc(50% + 2.5px) / 6px 5px
+        linear-gradient(135deg, transparent 2.75px, #1BA1EE 2.75px 4.25px, transparent 4px)!important;
+    --sidebar-nav-pagelink-background--loaded:
+        no-repeat 0px center / 5px 6px
+        linear-gradient(225deg, transparent 2.75px, #1BA1EE 2.75px 4.25px, transparent 4.25px),
+        no-repeat 5px center / 5px 6px
+        linear-gradient(135deg, transparent 2.75px, #1BA1EE 2.75px 4.25px, transparent 4.25px)!important;
+
+    --navbar-root-color--active: #1BA1EE!important;
+    --navbar-root-color--active: #1BA1EE!important;
+
+    --blockquote-border-color: #1BA1EE!important;
+    
     --pagination-title-color: #1BA1EE!important;
   }
-
 }
 */
diff --git a/docs/index.html b/docs/index.html
@@ -9,10 +9,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="assets/favicon/favicon.png">
 
-  <!-- Theme: Simple -->
+  <!-- Themeable Simple theme -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
 
-  <!-- Theme: Simple (light + dark) -->
+  <!-- Themeable Simple light + dark theme (uncomment to use, and comment out the above loading of Simple theme) -->
   <!-- <link rel="stylesheet" media="(prefers-color-scheme: light)"
     href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"> -->
   <!-- <link rel="stylesheet" media="(prefers-color-scheme: dark)"
@@ -254,7 +254,7 @@
               }
             }
 
-            /* JS to change Embedly cards to light or dark theme based on system theme (uncomment to use) */
+            /* JS to change Embedly cards to light or dark theme based on system setting when using the light + dark theme (uncomment to use) */
             /*
             const embeds = Array.from(htmlElement.querySelectorAll('.embedly-card'))
             if (!(embeds.length === 0)) {