mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fixed theme selector

Browse Source
This commit is contained in:
Jan Prochazka 2022-04-03 11:21:38 +02:00
parent cbb38b8edc
commit 5ea6c56752
1 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/web/src/settings/ThemeSkeleton.svelte
View File

@ -2,27 +2,32 @@
import { ThemeDefinition } from 'dbgate-types'; import { ThemeDefinition } from 'dbgate-types';
import FontIcon from '../icons/FontIcon.svelte'; import FontIcon from '../icons/FontIcon.svelte';
import { currentTheme } from '../stores'; import { currentTheme } from '../stores';
import _ from 'lodash';
function extractThemeColors(theme: ThemeDefinition) {
if (!theme.themeCss) return {};
return _.fromPairs(
[...theme.themeCss.matchAll(/(--theme-[a-z0-9\-]+)\s*\:\s*(\#[0-9a-fA-F]{6})/g)].map(x => [x[1], x[2]])
);
}
export let theme: ThemeDefinition; export let theme: ThemeDefinition;
// export let theme;
function getThemeStyle(val: ThemeDefinition) { $: colors = extractThemeColors(theme);
return `<style id="themePlugin">${val.themeCss}</style>`; $: cssVarColors = Object.entries(colors)
} .map(([key, value]) => `${key}:${value}`)
.join(';');
</script> </script>
{#if theme.themeCss}
{@html getThemeStyle(theme)}
{/if}
<div <div
style={theme?.themeCss || ''} style={cssVarColors}
class={`container ${theme.themeClassName}`} class={`container ${theme.themeClassName}`}
on:click={() => { on:click={() => {
$currentTheme = theme.themeClassName; $currentTheme = theme.themeClassName;
}} }}
> >
<div class="iconbar"> <div class="iconbar-settings-modal">
<div class="icon"> <div class="icon">
<FontIcon icon="icon database" /> <FontIcon icon="icon database" />
</div> </div>
@ -32,7 +37,7 @@
<div class="icon"><FontIcon icon="icon plugin" /></div> <div class="icon"><FontIcon icon="icon plugin" /></div>
</div> </div>
<div class="titlebar" /> <div class="titlebar-settings-modal" />
<div class="content"> <div class="content">
<div class:current={$currentTheme == theme.themeClassName}> <div class:current={$currentTheme == theme.themeClassName}>
@ -51,7 +56,7 @@
margin: 10px; margin: 10px;
cursor: pointer; cursor: pointer;
} }
.iconbar { .iconbar-settings-modal {
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -63,7 +68,7 @@
background: var(--theme-bg-inv-1); background: var(--theme-bg-inv-1);
color: var(--theme-font-inv-2); color: var(--theme-font-inv-2);
} }
.titlebar { .titlebar-settings-modal {
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;