Clarify light + dark theme use comments.

hibbitts-design · Aug 17, 2023 · 2d69f42 · 2d69f42
1 parent 7680f5a
commit 2d69f42
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 15 deletions.
diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css
@@ -156,13 +156,38 @@ body .markdown-section {
 }
 */
 
-/* CSS to better visually match Docsify pages within Sakai LMS (uncomment to use) */
+/* Dark mode colours for use with light + dark themes (uncomment to use) */
+@media (prefers-color-scheme: dark) {
 /*
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
+    :root {
+    --link-color: #1BA1EE!important;
 
-body .markdown-section {
-    font-family: "Open Sans",sans-serif;
-    line-height: 1.3;
-    font-size: 14px;
+    --sidebar-name-color: #1BA1EE!important;
+    --sidebar-nav-link-color--active: #1BA1EE!important;
+    --sidebar-nav-link-border-color--active: #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/assets/css/theme.css b/docs/assets/css/theme.css
@@ -573,19 +573,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,11 +9,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="assets/favicon/favicon.png">
 
-  <!-- Stylesheets -->
+  <!-- Themeable Simple theme -->
   <link rel="stylesheet" href="assets/vendor/themeable/themes/theme-simple.css">
+
+  <!-- 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="assets/vendor/themeable/themes/theme-simple.css"> -->
   <!-- <link rel="stylesheet" media="(prefers-color-scheme: dark)"
     href="assets/vendor/themeable/themes/theme-simple-dark.css"> -->
+
   <link rel="stylesheet" href="assets/css/theme.css">
   <link rel="stylesheet" href="assets/css/custom.css">
 
@@ -245,7 +248,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)) {