Merge pull request #12565 from dylemma/scaladoc-color-themes

Add dark/light theme swapper, make light theme less harsh, and some other small style changes

Author: smarter

docs/css/dottydoc.css

@@ -43,7 +43,7 @@ ul.post-list {
 
 /* headings anchors */
 a.anchor {
-  color: white;
+  color: transparent;
   margin-left: -23px;
   padding-right: 3px;
   transition: color .4s ease-out;

scaladoc/resources/dotty_res/scripts/theme.js

@@ -0,0 +1,48 @@
+;(function () {
+  const supportsLocalStorage = (() => {
+    try {
+      localStorage.setItem('test', 'test');
+      localStorage.removeItem('test');
+      return true;
+    } catch (e) {
+      return false;
+    }
+  })();
+
+  const settingKey = "use-dark-theme";
+
+  function toggleDarkTheme(isDark) {
+    currentlyDark = isDark
+    // this triggers the `:root.theme-dark` rule from scalastyle.css,
+    // which changes the values of a bunch of CSS color variables
+    document.documentElement.classList.toggle("theme-dark", isDark);
+    supportsLocalStorage && localStorage.setItem(settingKey, isDark);
+  }
+
+  /* Infer a dark/light theme preference from the user's system */
+  const colorSchemePrefMql = window.matchMedia("(prefers-color-scheme: dark)");
+
+  /* This needs to happen ASAP so we don't get a FOUC of bright colors before the dark theme is applied */
+  const initiallyDark = (() => {
+    const storedSetting = supportsLocalStorage && localStorage.getItem(settingKey);
+    return (storedSetting === null) ? colorSchemePrefMql.matches : storedSetting === "true";
+  })();
+  let currentlyDark = initiallyDark;
+  toggleDarkTheme(initiallyDark);
+
+  /* Wait for the DOM to be loaded before we try to attach event listeners to things in the DOM */
+  window.addEventListener("DOMContentLoaded", () => {
+    const themeToggler = document.querySelector('#theme-toggle input');
+    themeToggler.checked = !currentlyDark;
+    themeToggler.addEventListener("change", e => {
+      toggleDarkTheme(!e.target.checked);
+    });
+
+    /* Auto-swap the dark/light theme if the user changes it in their system */
+    colorSchemePrefMql.addEventListener('change', e => {
+      const preferDark = e.matches;
+      themeToggler.checked = !preferDark;
+      toggleDarkTheme(preferDark);
+    });
+  });
+})();

scaladoc/resources/dotty_res/scripts/ux.js

@@ -39,9 +39,14 @@ window.addEventListener("DOMContentLoaded", () => {
   })
 
   if (location.hash) {
-    var selected = document.getElementById(location.hash.substring(1));
-    if (selected){
-      selected.classList.toggle("expand");
+    var target = location.hash.substring(1);
+    // setting the 'expand' class on the top-level container causes undesireable styles
+    // to apply to the top-level docs, so we avoid this logic for that element.
+    if (target != 'container') {
+      var selected = document.getElementById(location.hash.substring(1));
+      if (selected) {
+        selected.classList.toggle("expand");
+      }
     }
   }
 

scaladoc/resources/dotty_res/styles/filter-bar.css

@@ -1,6 +1,6 @@
 .documentableFilter {
   padding: 24px 12px;
-  background-color: var(--leftbar-bg);
+  background-color: var(--code-bg);
 }
 
 .documentableFilter.active .filterToggleButton svg {
@@ -26,13 +26,13 @@
 }
 
 .filterToggleButton svg {
-  fill: var(--code-bg);
+  fill: var(--body-fg);
   transition: fill 0.1s ease-in, transform 0.1s ease-in-out;
 }
 
 .filterToggleButton:hover svg,
 .filterToggleButton:focus svg {
-  fill: var(--active-tab-color);
+  fill: var(--active-fg);
 }
 
 .filterableInput {
@@ -41,7 +41,7 @@
   outline: 0;
   border: 0;
   border-radius: 3px;
-  background-color: var(--code-bg);
+  background-color: var(--body-bg);
 }
 
 .filterLowerContainer {
@@ -50,12 +50,11 @@
 }
 
 .filterGroup {
-  display: flex;
   margin-bottom: 16px;
 }
 
 .filterList {
-  margin-left: 10px;
+  margin: 0.5em;
 }
 
 .filterButtonItem {
@@ -66,12 +65,12 @@
   outline: 0;
   border: 0;
   border-radius: 3px;
-  color: var(--leftbar-bg);
-  background-color: var(--code-bg);
+  color: var(--inactive-fg);
+  background-color: var(--inactive-bg);
   font-size: 12px;
   font-weight: 700;
   cursor: pointer;
-  border-bottom: 2px solid var(--inactive-fg);
+  border-bottom: 2px solid var(--inactive-bg-shadow);
   transition: all 0.1s ease-in;
 }
 
@@ -81,27 +80,29 @@
 }
 
 .filterButtonItem.active {
-  color: var(--code-bg);
-  border-bottom-color: var(--link-fg);
-  background-color: var(--active-tab-color);
+  color: var(--active-fg);
+  border-bottom-color: var(--active-bg-shadow);
+  background-color: var(--active-bg);
 }
 
 .filterButtonItem.visible {
   display: inline-block;
 }
 
 .groupTitle {
-  min-width: 98px;
-  margin-top: 4px;
+  margin-bottom: 4px;
   font-weight: 700;
-  font-size: 14px;
-  color: var(--code-bg);
+  color: var(--body-fg);
+}
+.groupTitle > span {
+  display: inline-block;
+  vertical-align: baseline;
 }
 
 .groupButtonsContainer {
-  display: flex;
-  align-items: center;
-  margin-top: 4px;
+  display: inline-block;
+  vertical-align: baseline;
+  margin-left: 1em;
 }
 
 .selectAll {
@@ -114,16 +115,16 @@
   border: 0;
   background-color: transparent;
   padding: 0;
-  color: var(--code-bg);
-  font-size: 8px;
+  color: var(--active-fg);
+  font-size: 0.7em;
   cursor: pointer;
   transition: all 0.1s ease-in;
 }
 
 .selectAll {
   padding: 4px;
   border-radius: 2px;
-  background-color: var(--active-tab-color);
+  background-color: var(--active-bg);
 }
 
 .selectAll:hover,
@@ -133,5 +134,5 @@
 
 .deselectAll:hover,
 .deselectAll:focus {
-  color: var(--active-tab-color);
+  color: var(--active-bg);
 }

scaladoc/resources/dotty_res/styles/nord-light.css

@@ -1,14 +1,37 @@
 /* Theme inspired by nordtheme. The colors have been darkened to work on light backgrounds. */
+:root {
+  --hljs-bg: var(--code-bg);
+  --hljs-fg: var(--code-fg);
+  --hljs-comment: #90A1C1;
+  --hljs-doctag: #4B6B92;
+  --hljs-meta: hsl(40, 100%, 40%);
+  --hljs-subst: hsl(40, 100%, 40%);
+  --hljs-title: hsl(193, 60%, 42%);
+  --hljs-type: hsl(179, 61%, 30%);
+  --hljs-keyword: hsl(213, 60%, 45%);
+  --hljs-string: hsl(92, 46%, 43%);
+  --hljs-literal: hsl(311, 30%, 47%);
+}
+:root.theme-dark {
+  --hljs-meta: hsl(40, 100%, 49%);
+  --hljs-subst: hsl(40, 100%, 49%);
+  --hljs-title: hsl(193, 60%, 58%);
+  --hljs-keyword: hsl(213, 60%, 60%);
+  --hljs-type: hsl(179, 61%, 45%);
+  --hljs-string: hsl(92, 46%, 68%);
+  --hljs-literal: hsl(311, 30%, 62%);
+}
+
 pre, .hljs {
-  background: #F4F5FA;
-  color: #4C566A;
+  background: var(--hljs-bg);
+  color: var(--code-fg);
 }
 
 .hljs-comment {
-  color: #90A1C1;
+  color: var(--hljs-comment);
 }
 .hljs-doctag {
-  color: #4B6B92;
+  color: var(--hljs-doctag);
   font-weight: 500;
 }
 .hljs-emphasis {
@@ -19,26 +42,26 @@ pre, .hljs {
 }
 
 .hljs-meta {
-  color: #F9A600;
+  color: var(--hljs-meta);
   font-weight: 500;
 }
 .hljs-subst {
-  color: #F9A600;
+  color: var(--hljs-subst);
 }
 .hljs-title {
-  color: #2B8FAC;
+  color: var(--hljs-title);
   font-weight: 500;
 }
 .hljs-type {
-  color: #1E7C7A;
+  color: var(--hljs-type);
 }
 .hljs-keyword {
-  color: #2E6BB8;
+  color: var(--hljs-keyword);
   font-weight: 500;
 }
 .hljs-string {
-  color: #6AA13B;
+  color: var(--hljs-string);
 }
 .hljs-built_in, .hljs-number, .hljs-literal {
-  color: #9D5490;
+  color: var(--hljs-literal);
 }