Add additional variables for dialog colors.

Author: nojaf

RELEASE_NOTES.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 20.0.0-alpha-013 - 2023-11-21
+
+### Added
+* Add more options to customize colors.
+
+### Removed
+- `--fsdocs-theme-toggle-light-color` and `--fsdocs-theme-toggle-dark-color` are now deprecated. Use `--header-link-color` instead.
+
 ## 20.0.0-alpha-012 - 2023-11-17
 
 ### Added

docs/content/fsdocs-default.css

@@ -1,6 +1,7 @@
 :root {
     --monospace-font: "Fira Code", monospace;
     --system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    --heading-font-family: var(--system-font);
 
     --spacing-50: 4px;
     --spacing-100: 8px;
@@ -57,7 +58,9 @@
     --code-color: #1a4b0b;
     --header-background: #f9fbfc;
     --header-border: #e8ecf1;
+    --header-link-color: var(--text-color);
     --mobile-menu-background: var(--header-background);
+    --menu-color: var(--text-color);
     --menu-item-hover-background: #eff0f1;
     --menu-item-hover-color: var(--menu-color);
     --doc-tip-background: #F7F7F7;
@@ -71,21 +74,20 @@
     --shadow-color: hsla(0, 0%, 0%, .1);
     --main-shadow-color: hsla(0, 0%, 0%, .025);
     --aside-background: var(--header-background);
-    --menu-color: var(--text-color);
-    --fsdocs-theme-toggle-light-color: var(--text-color);
-    --fsdocs-theme-toggle-dark-color: #FFF;
-    --header-link-color: var(--text-color);
     --blockquote-bacground-color: var(--header-background);
     --blockquote-color: var(--text-color);
-    --on-this-page-color: var(--text-color);
+    --on-this-page-color: var(--menu-color);
     --page-menu-background-color: var(--header-background);
     --page-menu-background-border-color: var(--header-border);
     --page-menu-background-hover-border-color: var(--text-color);
     --nav-item-border-color: var(--header-border);
     --nav-item-active-border-color: var(--text-color);
     --dialog-background-color: var(--header-background);
+    --dialog-empty-color: var(--nav-category);
     --dialog-icon-color: var(--text-color);
     --dialog-link-color: var(--link-color);
+    --dialog-link-hover-color: var(--header-background);
+    --dialog-link-hover-background-color: var(--link-hover);
     --code-fence-border-color: transparent;
 
     --header-brand-text-transform: none;
@@ -592,6 +594,10 @@ main {
 }
 
 /* Headings */
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--heading-font-family);
+}
+
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     color: var(--heading-color);
     text-decoration: none;
@@ -1145,7 +1151,7 @@ dialog {
     }
 
     .empty {
-        color: var(--nav-category);
+        color: var(--dialog-empty-color);
         text-align: center;
         font-size: var(--font-100);
         margin: var(--spacing-100);
@@ -1164,8 +1170,8 @@ dialog {
 
             &:hover {
                 & a, & a iconify-icon {
-                    background-color: var(--link-hover);
-                    color: var(--header-background);
+                    background-color: var(--dialog-link-hover-background-color);
+                    color: var(--dialog-link-hover-color);
                 }
             }
 

docs/content/fsdocs-theme-toggle.js

@@ -32,10 +32,8 @@ export class ThemeToggle extends LitElement {
 
     render() {
         const icon = this._theme === 'light' ? 'basil:moon-solid' : 'basil:sun-solid';
-        const color = this._theme === 'light' ? '--fsdocs-theme-toggle-light-color' : '--fsdocs-theme-toggle-dark-color';
-        
         return html`
-            <iconify-icon width="30" height="30" icon="${icon}" style="color:var(${color})" @click=${this.changeTheme}></iconify-icon>
+            <iconify-icon width="30" height="30" icon="${icon}" style="color:var(--header-link-color)" @click=${this.changeTheme}></iconify-icon>
         `;
     }
 }