theme moved to plugin

packages/types/extensions.d.ts

@@ -21,6 +21,11 @@ export interface FileFormatDefinition {
   getOutputParams?: (sourceName, values) => any;
 }
 
+export interface ThemeDefinition {
+  className: string;
+  themeName: string;
+}
+
 export interface PluginDefinition {
   packageName: string;
   manifest: any;
@@ -31,4 +36,5 @@ export interface ExtensionsDirectory {
   plugins: PluginDefinition[];
   fileFormats: FileFormatDefinition[];
   drivers: EngineDriver[];
+  themes: ThemeDefinition[];
 }

packages/web/public/index.html

@@ -8,8 +8,6 @@
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/theme-light.css'>
-	<link rel='stylesheet' href='/theme-dark.css'>
 	<link rel='stylesheet' href='/dimensions.css'>
 	<link rel='stylesheet' href='/bulma.css'>
 	<link rel='stylesheet' href='/icon-colors.css'>

packages/web/public/theme-dark.css

@@ -1,56 +0,0 @@
-.theme-dark {
-  --theme-font-1: #ddd;
-  --theme-font-2: #919191;
-  --theme-font-3: #5e5e5e;
-  --theme-font-4: #2b2b2b;
-  --theme-font-hover: #8dcff8; /* blue-9 */
-  --theme-font-link: #65b7f3; /* blue-8 */
-  --theme-font-alt: #b2e58b; /* green-9 */
-
-  /* --theme-bg-0: #000;
-  --theme-bg-1: #333;
-  --theme-bg-2: #4d4d4d;
-  --theme-bg-3: #676767;
-  --theme-bg-4: #818181;
-  --theme-bg-alt: #111d2c; */
-
-  --theme-bg-0: #111;
-  --theme-bg-1: #333;
-  --theme-bg-2: #4d4d4d;
-  --theme-bg-3: #676767;
-  --theme-bg-4: #818181;
-  --theme-bg-alt: #111d2c;
-
-  --theme-bg-gold: #443111; /* gold-2 */
-  --theme-bg-orange: #442a11; /*orange-2 */
-  --theme-bg-green: #1d3712; /* green-2 */
-  --theme-bg-volcano: #441d12; /* volcano-2 */
-
-  --theme-font-inv-1: #FFFFFF;
-  --theme-font-inv-2: #b3b3b3;
-  --theme-font-inv-3: #808080;
-  --theme-font-inv-4: #4d4d4d;
-
-  --theme-bg-inv-1: #222;
-  --theme-bg-inv-2: #3c3c3c;
-  --theme-bg-inv-3: #565656;
-  --theme-bg-inv-4: #707070;
-
-  --theme-border: #555;
-
-  --theme-bg-hover: #112a45;
-  --theme-bg-selected: #15395b; /* blue-3 */
-
-  --theme-bg-statusbar-inv: blue;
-
-
-
-
-
-  --theme-icon-blue: #3c9ae8;
-  --theme-icon-green: #8fd460;
-  --theme-icon-red: #e84749;
-  --theme-icon-gold: #e8b339;
-  --theme-icon-yellow: #e8d639;
-  --theme-icon-magenta: #e0529c;
-}

packages/web/public/theme-light.css

@@ -1,45 +0,0 @@
-.theme-light {
-  --theme-font-1: #000000;
-  --theme-font-2: #4d4d4d;
-  --theme-font-3: #808080;
-  --theme-font-4: #b3b3b3;
-  --theme-font-hover: #061178; /* blue-9 */
-  --theme-font-link: #10239e; /* blue-8 */
-  --theme-font-alt: #135200; /* green-9 */
-
-  --theme-bg-0: #fff;
-  --theme-bg-1: #ededed;
-  --theme-bg-2: #d4d4d4;
-  --theme-bg-3: #bbbbbb;
-  --theme-bg-4: #a2a2a2;
-  --theme-bg-alt: #f0f5ff;
-
-  --theme-bg-gold: #fff1b8; /* gold-2 */
-  --theme-bg-orange: #ffe7ba; /*orange-2 */
-  --theme-bg-green: #d9f7be; /* green-2 */
-  --theme-bg-volcano: #ffd8bf; /* volcano-2 */
-
-  --theme-font-inv-1: #FFFFFF;
-  --theme-font-inv-2: #b3b3b3;
-  --theme-font-inv-3: #808080;
-  --theme-font-inv-4: #4d4d4d;
-
-  --theme-bg-inv-1: #222;
-  --theme-bg-inv-2: #3c3c3c;
-  --theme-bg-inv-3: #565656;
-  --theme-bg-inv-4: #707070;
-
-  --theme-border: #ccc;
-
-  --theme-bg-hover: #bae7ff;
-  --theme-bg-selected: #91d5ff; /* blue-3 */
-
-  --theme-bg-statusbar-inv: blue;
-
-  --theme-icon-blue: #096dd9; /* blue-7 */
-  --theme-icon-green: #237804; /* green-7 */
-  --theme-icon-red: #cf1322; /* red-7 */
-  --theme-icon-gold: #d48806; /* gold-7 */
-  --theme-icon-yellow: #d4b106; /* yellow-7 */
-  --theme-icon-magenta: #c41d7f; /* magenta-7 */
-}

packages/web/src/commands/stdCommands.ts

@@ -1,11 +1,12 @@
-import { currentTheme } from '../stores';
+import { currentTheme, extensions } from '../stores';
 import registerCommand from './registerCommand';
 import { get } from 'svelte/store';
+import { ThemeDefinition } from 'dbgate-types';
 
-function themeCommand(text, css) {
+function themeCommand(theme: ThemeDefinition) {
   return {
-    text: text,
+    text: theme.themeName,
-    onClick: () => currentTheme.set(css),
+    onClick: () => currentTheme.set(theme.className),
     // onPreview: () => {
     //   const old = get(currentTheme);
     //   currentTheme.set(css);
@@ -19,5 +20,5 @@ function themeCommand(text, css) {
 registerCommand({
   id: 'theme.changeTheme',
   text: 'Theme: Change',
-  getSubCommands: () => [themeCommand('Light', 'theme-light'), themeCommand('Dark', 'theme-dark')],
+  getSubCommands: () => get(extensions).themes.map(themeCommand),
 });

packages/web/src/plugins/PluginsProvider.svelte

@@ -38,6 +38,7 @@
     const extensions = {
       plugins,
       fileFormats: buildFileFormats(plugins),
+      themes: buildThemes(plugins),
       drivers: buildDrivers(plugins),
     };
     return extensions;
@@ -50,6 +51,7 @@
   import axios from '../utility/axios';
   import { useInstalledPlugins } from '../utility/metadataLoaders';
   import { buildFileFormats } from './fileformats';
+  import { buildThemes } from './themes';
 
   let pluginsDict = {};
   const installedPlugins = useInstalledPlugins();

packages/web/src/plugins/ThemeDark.svelte

@@ -0,0 +1,59 @@
+<script context="module">
+  export const className = 'theme-dark';
+  export const themeName = 'Dark';
+</script>
+
+<style>
+  :global(.theme-dark) {
+    --theme-font-1: #ddd;
+    --theme-font-2: #919191;
+    --theme-font-3: #5e5e5e;
+    --theme-font-4: #2b2b2b;
+    --theme-font-hover: #8dcff8; /* blue-9 */
+    --theme-font-link: #65b7f3; /* blue-8 */
+    --theme-font-alt: #b2e58b; /* green-9 */
+
+    /* --theme-bg-0: #000;
+  --theme-bg-1: #333;
+  --theme-bg-2: #4d4d4d;
+  --theme-bg-3: #676767;
+  --theme-bg-4: #818181;
+  --theme-bg-alt: #111d2c; */
+
+    --theme-bg-0: #111;
+    --theme-bg-1: #333;
+    --theme-bg-2: #4d4d4d;
+    --theme-bg-3: #676767;
+    --theme-bg-4: #818181;
+    --theme-bg-alt: #111d2c;
+
+    --theme-bg-gold: #443111; /* gold-2 */
+    --theme-bg-orange: #442a11; /*orange-2 */
+    --theme-bg-green: #1d3712; /* green-2 */
+    --theme-bg-volcano: #441d12; /* volcano-2 */
+
+    --theme-font-inv-1: #ffffff;
+    --theme-font-inv-2: #b3b3b3;
+    --theme-font-inv-3: #808080;
+    --theme-font-inv-4: #4d4d4d;
+
+    --theme-bg-inv-1: #222;
+    --theme-bg-inv-2: #3c3c3c;
+    --theme-bg-inv-3: #565656;
+    --theme-bg-inv-4: #707070;
+
+    --theme-border: #555;
+
+    --theme-bg-hover: #112a45;
+    --theme-bg-selected: #15395b; /* blue-3 */
+
+    --theme-bg-statusbar-inv: blue;
+
+    --theme-icon-blue: #3c9ae8;
+    --theme-icon-green: #8fd460;
+    --theme-icon-red: #e84749;
+    --theme-icon-gold: #e8b339;
+    --theme-icon-yellow: #e8d639;
+    --theme-icon-magenta: #e0529c;
+  }
+</style>

packages/web/src/plugins/ThemeLight.svelte

@@ -0,0 +1,52 @@
+<script context="module">
+  export const className = 'theme-light';
+  export const themeName = 'Light';
+</script>
+
+<style>
+  :global(.theme-light) {
+    --theme-font-1: #000000;
+    --theme-font-2: #4d4d4d;
+    --theme-font-3: #808080;
+    --theme-font-4: #b3b3b3;
+    --theme-font-hover: #061178; /* blue-9 */
+    --theme-font-link: #10239e; /* blue-8 */
+    --theme-font-alt: #135200; /* green-9 */
+
+    --theme-bg-0: #fff;
+    --theme-bg-1: #ededed;
+    --theme-bg-2: #d4d4d4;
+    --theme-bg-3: #bbbbbb;
+    --theme-bg-4: #a2a2a2;
+    --theme-bg-alt: #f0f5ff;
+
+    --theme-bg-gold: #fff1b8; /* gold-2 */
+    --theme-bg-orange: #ffe7ba; /*orange-2 */
+    --theme-bg-green: #d9f7be; /* green-2 */
+    --theme-bg-volcano: #ffd8bf; /* volcano-2 */
+
+    --theme-font-inv-1: #ffffff;
+    --theme-font-inv-2: #b3b3b3;
+    --theme-font-inv-3: #808080;
+    --theme-font-inv-4: #4d4d4d;
+
+    --theme-bg-inv-1: #222;
+    --theme-bg-inv-2: #3c3c3c;
+    --theme-bg-inv-3: #565656;
+    --theme-bg-inv-4: #707070;
+
+    --theme-border: #ccc;
+
+    --theme-bg-hover: #bae7ff;
+    --theme-bg-selected: #91d5ff; /* blue-3 */
+
+    --theme-bg-statusbar-inv: blue;
+
+    --theme-icon-blue: #096dd9; /* blue-7 */
+    --theme-icon-green: #237804; /* green-7 */
+    --theme-icon-red: #cf1322; /* red-7 */
+    --theme-icon-gold: #d48806; /* gold-7 */
+    --theme-icon-yellow: #d4b106; /* yellow-7 */
+    --theme-icon-magenta: #c41d7f; /* magenta-7 */
+  }
+</style>

packages/web/src/plugins/themes.js

@@ -0,0 +1,11 @@
+import * as light from './ThemeLight.svelte';
+import * as dark from './ThemeDark.svelte';
+
+export function buildThemes(plugins) {
+  const res = [light, dark];
+  for (const { content } of plugins) {
+    const { themes } = content;
+    if (themes) res.push(...themes);
+  }
+  return res;
+}