support light/dark

index.html

@@ -62,7 +62,7 @@ <h1 id="title"></h1>
           <div class="sampleContainer"></div>
         </div>
         <nav id="code" class="sourceFileNav">
-          <div>
+          <div class="sourceFileScrollContainer">
             <ul id="codeTabs"></ul>
           </div>
         </nav>

public/css/HomePage.css

@@ -1,4 +1,41 @@
+:root {
+  color-scheme: light dark;
+
+  /* these are the light colors */
+  --background: #eee;
+
+  --code-background: #ccc;
+  --link: #045b88;
+
+  --panel-color: #000;
+  --panel-background: #ddd;
+  --panel-emphasis: rgb(20, 62, 84);
+
+  --tooltip-background: #eee;
+  --tooltip-border: rgba(0, 0, 0, 0.1);
+
+  --source-tab-color: white;
+  --source-tab-background: #444;
+  --source-tab-active-background: #282828;
+  --source-tab-active-shadow: rgb(167, 167, 167);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* these are the dark colors */
+    --background: #000;
+
+    --code-background: #555;
+    --link: #02abff;
+
+    --panel-color: #02abff;
+    --panel-background: #222;
+    --panel-emphasis: rgb(115, 206, 255);
+
+    --tooltip-background: #111;
+    --tooltip-border: rgba(255, 255, 255, 0.1);
+  }
+}
+
 .homePage {
-  background: white;
-  color: #222;
 }

public/css/MainLayout.css

@@ -12,9 +12,10 @@
   flex: 1 0 auto;
   max-width: 300px;
   height: 100%;
-  background: #fafafa;
   overflow-y: auto;
   position: relative;
+  color: var(--panel-color);
+  background-color: var(--panel-background);
 }
 
 .exampleList {
@@ -24,7 +25,13 @@
 }
 
 .exampleList h3 {
-  color: rgb(43, 126, 171);
+  color: var(--panel-emphasis);
+}
+
+code {
+  background-color: var(--code-background);
+  border: 2px solid var(--code-background);
+  border-radius: 0.25em;
 }
 
 .exampleList li {
@@ -90,5 +97,6 @@ main {
   .expand {
     display: inline-block;
   }
+
 }
 

public/css/SampleLayout.css

@@ -13,13 +13,15 @@
   height: 100%;
   border: none;
   display: block;
+  /* should should remain white because samples in iframes expect a white background */
+  color-scheme: light;
   background-color: #fff;
 }
 
 .sampleCategory {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  display: inline-block;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+  position: relative;
 }
 
 [data-tooltip] {
@@ -29,8 +31,8 @@
 [data-tooltip]::after {
   pointer-events: none;
   content: attr(data-tooltip);
-  background-color: rgba(255, 255, 255, 1);
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  background-color: var(--tooltip-background);
+  box-shadow: 0 0 2px 2px var(--tooltip-border);
   border-radius: 10px;
   transition: opacity 0.2s ease-in, transform 0.2s ease-out;
   padding: 0.5em;
@@ -45,9 +47,6 @@
   transform: translateY(0.25em);
 }
 
-nav.sourceFileNav {
-}
-
 nav.sourceFileNav ul {
   box-sizing: border-box;
   list-style-type: none;
@@ -98,39 +97,12 @@ nav.sourceFileNav[data-right=true]::after {
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
 }
 
-nav.sourceFileNav div.sourceFileScrollContainer {
-  white-space: nowrap;
-  overflow-x: auto;
-  scrollbar-width: thin;
-}
-
-nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar {
-  display: inline;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  height: 11px;
-  width: 10px;
-}
-
-nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-thumb {
-  background: rgb(200, 200, 200);
-  height: 4px;
-  border-radius: 20px;
-  -webkit-box-shadow: inset 0px 0px 10px rgb(45, 33, 33);
-  border: 0.5px solid transparent;
-  background-clip: content-box;
-}
-
-nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0);
-}
-
 nav.sourceFileNav li a {
   display: block;
   margin: 0;
   padding: 10px;
-  color: white;
-  background-color: #403e3e;
+  color: var(--source-tab-color);
+  background-color: var(--source-tab-background);
 }
 
 nav.sourceFileNav li:hover {
@@ -140,11 +112,11 @@ nav.sourceFileNav li:hover {
 }
 
 nav.sourceFileNav li a[data-active=true] {
-  background-color: #282823;
+  background-color: var(--source-tab-active-background);
 }
 
 nav.sourceFileNav li:has(a[data-active=true]) {
-  box-shadow: 0 -10px 0 0 rgb(167, 167, 167);
+  box-shadow: 0 -10px 0 0 var(--source-tab-active-shadow);
   border-radius: 10px;
 }
 

public/css/styles.css

@@ -2,14 +2,14 @@
 @import url('MainLayout.css');
 @import url('SampleLayout.css');
 
-
 * {
   box-sizing: border-box;
 }
 
 html, body {
   margin: 0;
   height: 100%;
+  background-color: var(--background);
 }
 
 body {
@@ -18,11 +18,7 @@ body {
 
 a {
   text-decoration: none;
-}
-
-a:link,
-a:visited {
-  color: #045b88;
+  color: var(--link)
 }
 
 a:hover {
@@ -34,8 +30,6 @@ main {
   flex-direction: column;
   position: relative;
   flex: 1;
-  background: black;
-  color: #ddd;
   padding-left: 15px;
   padding-right: 15px;
 }