@matdata/yasgui 5.0.1 → 5.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/Tab.ts

@@ -356,8 +356,13 @@ export class Tab extends EventEmitter {
   }
 
   private initYasqe() {
+    // Set theme based on current yasgui theme
+    const currentTheme = this.yasgui.getTheme();
+    const cmTheme = currentTheme === "dark" ? "material-palenight" : "default";
+
     const yasqeConf: Partial<YasqeConfig> = {
       ...this.yasgui.config.yasqe,
+      theme: cmTheme,
       value: this.persistentJson.yasqe.value,
       editorHeight: this.persistentJson.yasqe.editorHeight ? this.persistentJson.yasqe.editorHeight : undefined,
       persistenceId: null, //yasgui handles persistent storing

package/src/TabElements.scss

@@ -18,6 +18,33 @@ $minTabHeight: 35px;
       border-bottom: 2px solid transparent;
       box-sizing: border-box;
     }
+    .themeToggle {
+      cursor: pointer;
+      height: 100%;
+      margin-left: auto;
+      margin-right: 10px;
+      padding: 6px 8px;
+      background: transparent;
+      border: none;
+      color: var(--yasgui-button-text, #505050);
+      fill: var(--yasgui-button-text, #505050);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+
+      &:hover {
+        color: var(--yasgui-button-hover, #000);
+        fill: var(--yasgui-button-hover, #000);
+        background: var(--yasgui-bg-secondary, #f7f7f7);
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
     .addTab {
       cursor: pointer;
       height: 100%;
@@ -80,7 +107,7 @@ $minTabHeight: 35px;
       }
       &.active a {
         border-bottom-color: $activeColor;
-        color: #555;
+        color: var(--yasgui-text-primary, #555);
       }
       input {
         display: none;
@@ -100,7 +127,7 @@ $minTabHeight: 35px;
       }
       a {
         font-weight: 600;
-        color: color.adjust(#555, $lightness: 20%);
+        color: var(--yasgui-text-secondary, color.adjust(#555, $lightness: 20%));
         font-size: 15px;
         line-height: 1.5rem;
         font-weight: 500;
@@ -110,17 +137,17 @@ $minTabHeight: 35px;
         overflow: hidden;
         &:hover {
           border-bottom-color: $hoverColor;
-          color: #555;
+          color: var(--yasgui-text-primary, #555);
         }
         &:focus {
           border-bottom-color: #faa857;
-          color: #555;
+          color: var(--yasgui-text-primary, #555);
         }
         .closeTab {
-          color: #000;
+          color: var(--yasgui-text-primary, #000);
           margin-left: 7px;
           font-size: 15px;
-          text-shadow: 0 1px 0 #fff;
+          text-shadow: 0 1px 0 var(--yasgui-bg-primary, #fff);
           opacity: 0.2;
           font-weight: 700;
           padding: 2px;

package/src/TabElements.ts

@@ -3,6 +3,15 @@ import TabContextMenu from "./TabContextMenu";
 import { hasClass, addClass, removeClass } from "@matdata/yasgui-utils";
 import sortablejs from "sortablejs";
 import "./TabElements.scss";
+
+// Theme toggle icons
+const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
+</svg>`;
+
+const SUN_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
+</svg>`;
 export interface TabList {}
 export class TabListEl {
   private tabList: TabList;

package/src/TabSettingsModal.scss

@@ -1,3 +1,28 @@
+.themeToggle {
+  cursor: pointer;
+  background: transparent;
+  color: inherit;
+  border: none;
+  padding: 6px 8px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+}
+
 .tabPrefixButton {
   cursor: pointer;
   background: transparent;
@@ -35,7 +60,7 @@
 }
 
 .tabSettingsModal {
-  background: white;
+  background: var(--yasgui-bg-primary, white);
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   max-width: 800px;
@@ -51,12 +76,13 @@
   justify-content: space-between;
   align-items: center;
   padding: 20px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
 
   h2 {
     margin: 0;
     font-size: 20px;
     font-weight: 600;
+    color: var(--yasgui-text-primary, #000);
   }
 
   .closeButton {
@@ -65,13 +91,13 @@
     font-size: 32px;
     line-height: 1;
     cursor: pointer;
-    color: #666;
+    color: var(--yasgui-text-secondary, #666);
     padding: 0;
     width: 32px;
     height: 32px;
 
     &:hover {
-      color: #333;
+      color: var(--yasgui-text-primary, #333);
     }
   }
 }
@@ -86,7 +112,7 @@
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
-  border-bottom: 2px solid #e0e0e0;
+  border-bottom: 2px solid var(--yasgui-border-color, #e0e0e0);
 }
 
 .modalTabButton {
@@ -96,18 +122,18 @@
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-  color: #666;
+  color: var(--yasgui-text-secondary, #666);
   border-bottom: 3px solid transparent;
   margin-bottom: -2px;
   transition: all 0.2s;
 
   &:hover {
-    color: #337ab7;
+    color: var(--yasgui-accent-color, #337ab7);
   }
 
   &.active {
-    color: #337ab7;
-    border-bottom-color: #337ab7;
+    color: var(--yasgui-accent-color, #337ab7);
+    border-bottom-color: var(--yasgui-accent-color, #337ab7);
   }
 }
 
@@ -128,11 +154,12 @@
   margin-bottom: 8px;
   font-size: 14px;
   display: block;
+  color: var(--yasgui-text-primary, #000);
 }
 
 .settingsHelp {
   font-size: 12px;
-  color: #666;
+  color: var(--yasgui-text-secondary, #666);
   margin-bottom: 10px;
   font-style: italic;
 }
@@ -140,13 +167,15 @@
 .settingsSelect {
   width: 100%;
   padding: 8px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--yasgui-input-border, #ccc);
   border-radius: 4px;
   font-size: 14px;
+  background-color: var(--yasgui-bg-secondary, white);
+  color: var(--yasgui-text-primary, #000);
 
   &:focus {
     outline: none;
-    border-color: #337ab7;
+    border-color: var(--yasgui-input-focus, #337ab7);
     box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.1);
   }
 }
@@ -154,17 +183,19 @@
 .prefixTextarea {
   width: 100%;
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--yasgui-input-border, #ccc);
   border-radius: 4px;
   font-family: monospace;
   font-size: 13px;
   resize: vertical;
   box-sizing: border-box;
   min-height: 200px;
+  background-color: var(--yasgui-bg-secondary, white);
+  color: var(--yasgui-text-primary, #000);
 
   &:focus {
     outline: none;
-    border-color: #337ab7;
+    border-color: var(--yasgui-input-focus, #337ab7);
     box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.1);
   }
 }
@@ -186,12 +217,13 @@
     font-size: 14px;
     user-select: none;
     margin: 0;
+    color: var(--yasgui-text-primary, #000);
   }
 }
 
 .modalFooter {
   padding: 15px 20px;
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid var(--yasgui-border-color, #e0e0e0);
   display: flex;
   justify-content: flex-end;
   gap: 10px;
@@ -208,19 +240,19 @@
 }
 
 .primaryButton {
-  background: #337ab7;
+  background: var(--yasgui-accent-color, #337ab7);
   color: white;
 
   &:hover {
-    background: #286090;
+    background: var(--yasgui-link-hover, #286090);
   }
 }
 
 .secondaryButton {
-  background: #e0e0e0;
-  color: #333;
+  background: var(--yasgui-bg-tertiary, #e0e0e0);
+  color: var(--yasgui-text-primary, #333);
 
   &:hover {
-    background: #d0d0d0;
+    background: var(--yasgui-border-color, #d0d0d0);
   }
 }

package/src/TabSettingsModal.ts

@@ -1,7 +1,20 @@
-import { addClass, removeClass, drawSvgStringAsElement } from "@matdata/yasgui-utils";
+import { addClass, removeClass } from "@matdata/yasgui-utils";
 import "./TabSettingsModal.scss";
 import Tab from "./Tab";
 
+// Theme toggle icons
+const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
+</svg>`;
+
+const SUN_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
+</svg>`;
+
+const SETTINGS_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-7.43 2.52c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
+</svg>`;
+
 const AcceptOptionsMap: { key: string; value: string }[] = [
   { key: "JSON", value: "application/sparql-results+json" },
   { key: "XML", value: "application/sparql-results+xml" },
@@ -24,6 +37,7 @@ export default class TabSettingsModal {
   private modalOverlay!: HTMLElement;
   private modalContent!: HTMLElement;
   private settingsButton!: HTMLButtonElement;
+  private themeToggleButton!: HTMLButtonElement;
   private prefixButton!: HTMLButtonElement;
   private prefixTextarea!: HTMLTextAreaElement;
   private autoCaptureCheckbox!: HTMLInputElement;
@@ -36,19 +50,26 @@ export default class TabSettingsModal {
   private init(controlBarEl: HTMLElement) {
     // Settings button
     this.settingsButton = document.createElement("button");
+    addClass(this.settingsButton, "tabContextButton");
     this.settingsButton.setAttribute("aria-label", "Settings");
     this.settingsButton.title = "Settings";
-    this.settingsButton.appendChild(
-      drawSvgStringAsElement(
-        `<svg width="100.06" height="100.05" data-name="Layer 1" version="1.1" viewBox="0 0 100.06 100.05" xmlns="http://www.w3.org/2000/svg">
-        <title>Settings</title>
-        <path d="m95.868 58.018-3-3.24a42.5 42.5 0 0 0 0-9.43l3-3.22c1.79-1.91 5-4.44 4-6.85l-4.11-10c-1-2.41-5.08-1.91-7.69-2l-4.43-0.16a43.24 43.24 0 0 0-6.64-6.66l-0.14-4.43c-0.08-2.6 0.43-6.69-2-7.69l-10-4.15c-2.4-1-4.95 2.25-6.85 4l-3.23 3a42.49 42.49 0 0 0-9.44 0l-3.21-3c-1.9-1.78-4.44-5-6.85-4l-10 4.11c-2.41 1-1.9 5.09-2 7.69l-0.16 4.42a43.24 43.24 0 0 0-6.67 6.65l-4.42 0.14c-2.6 0.08-6.69-0.43-7.69 2l-4.15 10c-1 2.4 2.25 4.94 4 6.84l3 3.23a42.49 42.49 0 0 0 0 9.44l-3 3.22c-1.78 1.9-5 4.43-4 6.84l4.11 10c1 2.41 5.09 1.91 7.7 2l4.41 0.15a43.24 43.24 0 0 0 6.66 6.68l0.13 4.41c0.08 2.6-0.43 6.7 2 7.7l10 4.15c2.4 1 4.94-2.25 6.84-4l3.24-3a42.5 42.5 0 0 0 9.42 0l3.22 3c1.91 1.79 4.43 5 6.84 4l10-4.11c2.41-1 1.91-5.08 2-7.7l0.15-4.42a43.24 43.24 0 0 0 6.68-6.65l4.42-0.14c2.6-0.08 6.7 0.43 7.7-2l4.15-10c1.04-2.36-2.22-4.9-3.99-6.82zm-45.74 15.7c-12.66 0-22.91-10.61-22.91-23.7s10.25-23.7 22.91-23.7 22.91 10.61 22.91 23.7-10.25 23.7-22.91 23.7z"/>
-       </svg>`,
-      ),
-    );
-    addClass(this.settingsButton, "tabContextButton");
-    controlBarEl.appendChild(this.settingsButton);
+    this.settingsButton.innerHTML = SETTINGS_ICON;
     this.settingsButton.onclick = () => this.open();
+    controlBarEl.appendChild(this.settingsButton);
+
+    // Theme toggle button (if enabled)
+    if (this.tab.yasgui.config.showThemeToggle) {
+      this.themeToggleButton = document.createElement("button");
+      addClass(this.themeToggleButton, "themeToggle");
+      this.themeToggleButton.setAttribute("aria-label", "Toggle between light and dark theme");
+      this.themeToggleButton.title = "Toggle theme";
+      this.themeToggleButton.innerHTML = this.getThemeToggleIcon();
+      this.themeToggleButton.addEventListener("click", () => {
+        this.tab.yasgui.toggleTheme();
+        this.themeToggleButton.innerHTML = this.getThemeToggleIcon();
+      });
+      controlBarEl.appendChild(this.themeToggleButton);
+    }
 
     // Prefix button
     this.prefixButton = document.createElement("button");
@@ -77,7 +98,7 @@ export default class TabSettingsModal {
     const header = document.createElement("div");
     addClass(header, "modalHeader");
     const title = document.createElement("h2");
-    title.textContent = "Tab Settings";
+    title.textContent = "Settings";
     header.appendChild(title);
 
     const closeBtn = document.createElement("button");
@@ -416,6 +437,13 @@ export default class TabSettingsModal {
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
   }
 
+  private getThemeToggleIcon(): string {
+    const currentTheme = this.tab.yasgui.getTheme();
+    // In dark mode, show moon icon (clicking will switch to light)
+    // In light mode, show sun icon (clicking will switch to dark)
+    return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
+  }
+
   public destroy() {
     if (this.modalOverlay && this.modalOverlay.parentNode) {
       this.modalOverlay.parentNode.removeChild(this.modalOverlay);

package/src/ThemeManager.ts

@@ -0,0 +1,120 @@
+import { Storage as YStorage } from "@matdata/yasgui-utils";
+
+export type Theme = "light" | "dark";
+
+export class ThemeManager {
+  private static STORAGE_KEY = "yasgui_theme";
+  private storage: YStorage;
+  private currentTheme: Theme;
+  private rootElement: HTMLElement;
+
+  constructor(rootElement: HTMLElement) {
+    this.storage = new YStorage("yasgui");
+    this.rootElement = rootElement;
+    this.currentTheme = this.getStoredTheme() || this.getSystemTheme();
+    this.applyTheme(this.currentTheme);
+  }
+
+  /**
+   * Get the currently active theme
+   */
+  public getTheme(): Theme {
+    return this.currentTheme;
+  }
+
+  /**
+   * Set and apply a new theme
+   */
+  public setTheme(theme: Theme): void {
+    this.currentTheme = theme;
+    this.applyTheme(theme);
+    // Store theme preference with 1 year expiration
+    this.storage.set(ThemeManager.STORAGE_KEY, theme, 60 * 60 * 24 * 365, () => {
+      console.warn("Failed to store theme preference due to quota exceeded");
+    });
+  }
+
+  /**
+   * Toggle between light and dark themes
+   */
+  public toggleTheme(): Theme {
+    const newTheme = this.currentTheme === "light" ? "dark" : "light";
+    this.setTheme(newTheme);
+    return newTheme;
+  }
+
+  /**
+   * Apply theme to the DOM
+   */
+  private applyTheme(theme: Theme): void {
+    // Set data-theme attribute on root element
+    this.rootElement.setAttribute("data-theme", theme);
+
+    // Also set on document root for global styles
+    document.documentElement.setAttribute("data-theme", theme);
+
+    // Update Yasqe CodeMirror theme
+    this.updateCodeMirrorTheme(theme);
+  }
+
+  /**
+   * Update CodeMirror theme for all Yasqe editors
+   */
+  private updateCodeMirrorTheme(theme: Theme): void {
+    const cmTheme = theme === "dark" ? "material-palenight" : "default";
+
+    // Find all CodeMirror instances within the root element
+    const cmElements = this.rootElement.querySelectorAll(".CodeMirror");
+    cmElements.forEach((element) => {
+      const cm = (element as any).CodeMirror;
+      if (cm && cm.setOption) {
+        cm.setOption("theme", cmTheme);
+      }
+    });
+  }
+
+  /**
+   * Get theme from localStorage
+   */
+  private getStoredTheme(): Theme | null {
+    const stored = this.storage.get<Theme>(ThemeManager.STORAGE_KEY);
+    if (stored === "light" || stored === "dark") {
+      return stored;
+    }
+    return null;
+  }
+
+  /**
+   * Detect system theme preference
+   */
+  private getSystemTheme(): Theme {
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  }
+
+  /**
+   * Listen for system theme changes
+   */
+  public listenToSystemTheme(): void {
+    if (window.matchMedia) {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      mediaQuery.addEventListener("change", (e) => {
+        // Only update if user hasn't manually set a theme
+        if (!this.storage.get(ThemeManager.STORAGE_KEY)) {
+          const newTheme = e.matches ? "dark" : "light";
+          this.currentTheme = newTheme;
+          this.applyTheme(newTheme);
+        }
+      });
+    }
+  }
+
+  /**
+   * Refresh theme application (useful after new content is loaded)
+   */
+  public refresh(): void {
+    this.applyTheme(this.currentTheme);
+  }
+}

package/src/defaults.ts

@@ -28,6 +28,8 @@ export default function initialize(): Config<CatalogueItem> {
     persistenceLabelConfig: "config",
     yasqe: Yasqe.defaults,
     yasr: Yasr.defaults,
+    theme: undefined,
+    showThemeToggle: true,
     endpointCatalogueOptions: {
       getData: () => {
         return [

package/src/index.ts

@@ -12,8 +12,11 @@ import { default as Yasr, Config as YasrConfig } from "@matdata/yasr";
 import { addClass, removeClass } from "@matdata/yasgui-utils";
 import GeoPlugin from "yasgui-geo-tg";
 import GraphPlugin from "@matdata/yasgui-graph-plugin";
+import { ThemeManager, Theme } from "./ThemeManager";
 import "./index.scss";
+import "./themes.scss";
 import "../../yasr/src/scss/global.scss";
+import "codemirror/theme/material-palenight.css";
 
 // Register plugins to Yasr
 Yasr.registerPlugin("Geo", GeoPlugin);
@@ -50,6 +53,8 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   requestConfig: YasguiRequestConfig;
   contextMenuContainer: HTMLElement | undefined;
   nonSslDomain?: string;
+  theme?: Theme;
+  showThemeToggle?: boolean;
 }
 export type PartialConfig = {
   [P in keyof Config]?: Config[P] extends object ? Partial<Config[P]> : Config[P];
@@ -96,6 +101,7 @@ export class Yasgui extends EventEmitter {
   public tabPanelsEl: HTMLDivElement;
   public config: Config;
   public persistentConfig: PersistentConfig;
+  public themeManager: ThemeManager;
   public static Tab = Tab;
   constructor(parent: HTMLElement, config: PartialConfig) {
     super();
@@ -104,6 +110,13 @@ export class Yasgui extends EventEmitter {
     parent.appendChild(this.rootEl);
 
     this.config = merge({}, Yasgui.defaults, config);
+
+    // Initialize theme manager
+    this.themeManager = new ThemeManager(this.rootEl);
+    if (this.config.theme) {
+      this.themeManager.setTheme(this.config.theme);
+    }
+    this.themeManager.listenToSystemTheme();
     this.persistentConfig = new PersistentConfig(this);
 
     this.tabElements = new TabElements(this);
@@ -348,6 +361,24 @@ export class Yasgui extends EventEmitter {
       this.addTab(true, config.tab, { atIndex: config.index });
     }
   }
+  /**
+   * Get the current theme
+   */
+  public getTheme(): Theme {
+    return this.themeManager.getTheme();
+  }
+  /**
+   * Set the theme
+   */
+  public setTheme(theme: Theme): void {
+    this.themeManager.setTheme(theme);
+  }
+  /**
+   * Toggle between light and dark themes
+   */
+  public toggleTheme(): Theme {
+    return this.themeManager.toggleTheme();
+  }
   public destroy() {
     this.removeAllListeners();
     this.tabElements.destroy();
@@ -370,4 +401,5 @@ export function getRandomId() {
   return Math.random().toString(36).substring(7);
 }
 
+export type { Theme } from "./ThemeManager";
 export default Yasgui;

package/src/tab.scss

@@ -32,9 +32,13 @@
     background: none;
     align-self: center;
     padding-left: 10px;
+    padding-right: 10px;
     cursor: pointer;
-    color: #505050;
-    fill: #505050;
+    color: var(--yasgui-button-text, #505050);
+    fill: var(--yasgui-button-text, #505050);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .svgImg {
       width: 15px;
@@ -43,13 +47,13 @@
     }
     // IE11 Needs this specified otherwise it will not resize the svg
     svg {
-      max-width: 15px;
-      max-height: 15px;
+      width: 20px;
+      height: 20px;
     }
 
     &:hover {
-      color: black;
-      fill: black;
+      color: var(--yasgui-button-hover, black);
+      fill: var(--yasgui-button-hover, black);
     }
   }