mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-01-16 05:56:47 +01:00
111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
import type { GetThemesResponse } from '@yaakapp-internal/plugins';
|
|
import { invokeCmd } from '../tauri';
|
|
import type { Appearance } from './appearance';
|
|
import { resolveAppearance } from './appearance';
|
|
|
|
export async function getThemes() {
|
|
const themes = (await invokeCmd<GetThemesResponse[]>('cmd_get_themes')).flatMap((t) => t.themes);
|
|
themes.sort((a, b) => a.label.localeCompare(b.label));
|
|
// Remove duplicates, in case multiple plugins provide the same theme
|
|
const uniqueThemes = Array.from(new Map(themes.map((t) => [t.id, t])).values());
|
|
return { themes: [yaakDark, yaakLight, ...uniqueThemes] };
|
|
}
|
|
|
|
export async function getResolvedTheme(
|
|
preferredAppearance: Appearance,
|
|
appearanceSetting: string,
|
|
themeLight: string,
|
|
themeDark: string,
|
|
) {
|
|
const appearance = resolveAppearance(preferredAppearance, appearanceSetting);
|
|
const { themes } = await getThemes();
|
|
|
|
const darkThemes = themes.filter((t) => t.dark);
|
|
const lightThemes = themes.filter((t) => !t.dark);
|
|
|
|
const dark = darkThemes.find((t) => t.id === themeDark) ?? darkThemes[0] ?? yaakDark;
|
|
const light = lightThemes.find((t) => t.id === themeLight) ?? lightThemes[0] ?? yaakLight;
|
|
|
|
const active = appearance === 'dark' ? dark : light;
|
|
|
|
return { dark, light, active };
|
|
}
|
|
|
|
const yaakDark = {
|
|
id: 'yaak-dark',
|
|
label: 'Yaak',
|
|
dark: true,
|
|
base: {
|
|
surface: 'hsl(244,23%,14%)',
|
|
surfaceHighlight: 'hsl(244,23%,20%)',
|
|
text: 'hsl(245,23%,85%)',
|
|
textSubtle: 'hsl(245,18%,58%)',
|
|
textSubtlest: 'hsl(245,18%,45%)',
|
|
border: 'hsl(244,23%,25%)',
|
|
primary: 'hsl(266,100%,79%)',
|
|
secondary: 'hsl(245,23%,60%)',
|
|
info: 'hsl(206,100%,63%)',
|
|
success: 'hsl(150,99%,44%)',
|
|
notice: 'hsl(48,80%,63%)',
|
|
warning: 'hsl(28,100%,61%)',
|
|
danger: 'hsl(342,90%,68%)',
|
|
},
|
|
components: {
|
|
button: {
|
|
primary: 'hsl(266,100%,71.1%)',
|
|
secondary: 'hsl(244,23%,54%)',
|
|
info: 'hsl(206,100%,56.7%)',
|
|
success: 'hsl(150,99%,37.4%)',
|
|
notice: 'hsl(48,80%,50.4%)',
|
|
warning: 'hsl(28,100%,54.9%)',
|
|
danger: 'hsl(342,90%,61.2%)',
|
|
},
|
|
dialog: {
|
|
border: 'hsl(244,23%,24%)',
|
|
},
|
|
sidebar: {
|
|
surface: 'hsl(243,23%,16%)',
|
|
border: 'hsl(244,23%,22%)',
|
|
},
|
|
responsePane: {
|
|
surface: 'hsl(243,23%,16%)',
|
|
border: 'hsl(246,23%,23%)',
|
|
},
|
|
appHeader: {
|
|
surface: 'hsl(244,23%,12%)',
|
|
border: 'hsl(244,23%,21%)',
|
|
},
|
|
},
|
|
};
|
|
|
|
const yaakLight = {
|
|
id: 'yaak-light',
|
|
label: 'Yaak',
|
|
dark: false,
|
|
base: {
|
|
surface: 'hsl(0,0%,100%)',
|
|
surfaceHighlight: 'hsl(218,24%,87%)',
|
|
text: 'hsl(217,24%,10%)',
|
|
textSubtle: 'hsl(217,24%,40%)',
|
|
textSubtlest: 'hsl(217,24%,58%)',
|
|
border: 'hsl(217,22%,90%)',
|
|
primary: 'hsl(266,100%,60%)',
|
|
secondary: 'hsl(220,24%,50%)',
|
|
info: 'hsl(206,100%,40%)',
|
|
success: 'hsl(139,66%,34%)',
|
|
notice: 'hsl(45,100%,34%)',
|
|
warning: 'hsl(30,100%,36%)',
|
|
danger: 'hsl(335,75%,48%)',
|
|
},
|
|
components: {
|
|
sidebar: {
|
|
surface: 'hsl(220,20%,98%)',
|
|
border: 'hsl(217,22%,88%)',
|
|
surfaceHighlight: 'hsl(217,25%,90%)',
|
|
},
|
|
},
|
|
};
|
|
|
|
export const defaultDarkTheme = yaakDark;
|
|
export const defaultLightTheme = yaakLight;
|