dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-26 20:16:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark theme detect, startup with dark theme

Browse Source
This commit is contained in:
SPRINX0\prochazka
2025-03-17 15:43:33 +01:00
parent e371081a1d
commit 5511ea1887
2 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/web/src/stores.ts
View File

@@ -26,6 +26,10 @@ export interface TabDefinition {
focused?: boolean; focused?: boolean;
} }
function getSystemTheme() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light';
}
export function writableWithStorage<T>(defaultValue: T, storageName) { export function writableWithStorage<T>(defaultValue: T, storageName) {
const init = localStorage.getItem(storageName); const init = localStorage.getItem(storageName);
const res = writable<T>(init ? safeJsonParse(init, defaultValue, true) : defaultValue); const res = writable<T>(init ? safeJsonParse(init, defaultValue, true) : defaultValue);
@@ -100,8 +104,8 @@ export const extensions = writable<ExtensionsDirectory>(null);
export const visibleCommandPalette = writable(null); export const visibleCommandPalette = writable(null);
export const commands = writable({}); export const commands = writable({});
export const currentTheme = getElectron() export const currentTheme = getElectron()
? writableSettingsValue('theme-light', 'currentTheme') ? writableSettingsValue(getSystemTheme(), 'currentTheme')
: writableWithStorage('theme-light', 'currentTheme'); : writableWithStorage(getSystemTheme(), 'currentTheme');
export const currentEditorTheme = getElectron() export const currentEditorTheme = getElectron()
? writableSettingsValue(null, 'currentEditorTheme') ? writableSettingsValue(null, 'currentEditorTheme')
: writableWithStorage(null, 'currentEditorTheme'); : writableWithStorage(null, 'currentEditorTheme');
@@ -194,8 +198,13 @@ export const connectionAppObjectSearchSettings = writableWithStorage(
); );
export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) => export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) =>
$extensions.themes.find(x => x.themeClassName == $currentTheme) $extensions?.themes?.find(x => x.themeClassName == $currentTheme)
); );
currentThemeDefinition.subscribe(value => {
if (value?.themeType) {
localStorage.setItem('currentThemeType', value?.themeType);
}
});
export const openedConnectionsWithTemporary = derived( export const openedConnectionsWithTemporary = derived(
[openedConnections, temporaryOpenedConnections, openedSingleDatabaseConnections], [openedConnections, temporaryOpenedConnections, openedSingleDatabaseConnections],
([$openedConnections, $temporaryOpenedConnections, $openedSingleDatabaseConnections]) => ([$openedConnections, $temporaryOpenedConnections, $openedSingleDatabaseConnections]) =>

23
packages/web/src/widgets/AppStartInfo.svelte
View File

@@ -1,8 +1,14 @@
<script lang="ts"> <script lang="ts">
export let message; export let message;
const isDark =
localStorage.getItem('currentThemeType') === 'dark' ||
(!localStorage.getItem('currentThemeType') &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches);
</script> </script>
<div class="starting-dbgate"> <div class="starting-dbgate" class:isDark>
<div class="inner-flex"> <div class="inner-flex">
<div class="lds-ellipsis"> <div class="lds-ellipsis">
<div /> <div />
@@ -15,21 +21,34 @@
</div> </div>
<style> <style>
@media (prefers-color-scheme: dark) {
#starting-dbgate {
background-color: #111;
color: #e3e3e3;
}
}
.lds-ellipsis { .lds-ellipsis {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
.isDark {
background-color: #111;
color: #e3e3e3;
}
.lds-ellipsis div { .lds-ellipsis div {
position: absolute; position: absolute;
top: 33px; top: 33px;
width: 13px; width: 13px;
height: 13px; height: 13px;
border-radius: 50%; border-radius: 50%;
background: #000; background: #262626;
animation-timing-function: cubic-bezier(0, 1, 1, 0); animation-timing-function: cubic-bezier(0, 1, 1, 0);
} }
.isDark .lds-ellipsis div {
background: #e3e3e3;
}
.lds-ellipsis div:nth-child(1) { .lds-ellipsis div:nth-child(1) {
left: 8px; left: 8px;
animation: lds-ellipsis1 0.6s infinite; animation: lds-ellipsis1 0.6s infinite;