gabehf
/
Koito
mirror of https://github.com/gabehf/Koito.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: gabehf:1bceeeb2f615ebc52066121a5f5234096bd0c06b
Branches Tags
gabehf:main
gabehf:feat/login-gate
gabehf:dev
gabehf:feat/custom-artist-sep
...
compare: gabehf:e69ef0cb017de8903f5661c55297bc168f2e644c
Branches Tags
gabehf:main
gabehf:feat/login-gate
gabehf:dev
gabehf:feat/custom-artist-sep

3 Commits
1bceeeb2f6 ... e69ef0cb01

Author SHA1 Message Date
Gabe Farrell e69ef0cb01 fix: revert to default theme if saved theme is invalid
1 week ago
Gabe Farrell 682e543aa5 feat: replace asuka theme with new rosebud theme
1 week ago
Gabe Farrell 20bc343fd8 chore: rm changelog
1 week ago
3 changed files with 236 additions and 250 deletions
Show Stats

16
CHANGELOG.md
Unescape View File

@ -1,16 +0,0 @@
# v0.0.13
## Features
## Enhancements
- Track durations will now be updated using MusicBrainz data where possible, if the duration was not provided by the request. (#27)
- You can now search and merge items by their ID! Just preface the id with `id:`. E.g. `id:123` (#26)
- Hovering over any "hours listened" statistic will now also show the minutes listened.
- An experiemental ARM docker image has been added. (#51)
## Fixes
- Navigating from one page directly to another and then changing the image via drag-and-drop now works as expected. (#25)
- Fixed a bug that caused updated usernames with uppercase letters to create login failures.
## Updates
- Migrations are now embedded to allow for a community AUR package. (#37)

6
client/app/providers/ThemeProvider.tsx
Unescape View File

@ -53,7 +53,9 @@ function getStoredCustomTheme(): Theme | undefined {
export function ThemeProvider({ children }: { children: ReactNode }) { export function ThemeProvider({ children }: { children: ReactNode }) {
let defaultTheme = useAppContext().defaultTheme; let defaultTheme = useAppContext().defaultTheme;
let initialTheme = localStorage.getItem("theme") ?? defaultTheme; let initialTheme = localStorage.getItem("theme") ?? defaultTheme;
const [themeName, setThemeName] = useState(initialTheme); const [themeName, setThemeName] = useState(
themes[initialTheme] ? initialTheme : defaultTheme
);
const [currentTheme, setCurrentTheme] = useState<Theme>(() => { const [currentTheme, setCurrentTheme] = useState<Theme>(() => {
if (initialTheme === "custom") { if (initialTheme === "custom") {
const customTheme = getStoredCustomTheme(); const customTheme = getStoredCustomTheme();
@ -78,6 +80,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
if (foundTheme) { if (foundTheme) {
localStorage.setItem("theme", newThemeName); localStorage.setItem("theme", newThemeName);
setCurrentTheme(foundTheme); setCurrentTheme(foundTheme);
} else {
setTheme(defaultTheme);
} }
} }
}; };

464
client/app/styles/themes.css.ts
Unescape View File

@ -1,243 +1,241 @@
import { globalStyle } from "@vanilla-extract/css" import { globalStyle } from "@vanilla-extract/css";
import { themeVars } from "./vars.css" import { themeVars } from "./vars.css";
export type Theme = { export type Theme = {
bg: string bg: string;
bgSecondary: string bgSecondary: string;
bgTertiary: string bgTertiary: string;
fg: string fg: string;
fgSecondary: string fgSecondary: string;
fgTertiary: string fgTertiary: string;
primary: string primary: string;
primaryDim: string primaryDim: string;
accent: string accent: string;
accentDim: string accentDim: string;
error: string error: string;
warning: string warning: string;
info: string info: string;
success: string success: string;
} };
export const THEME_KEYS = [ export const THEME_KEYS = ["--color"];
'--color'
]
export const themes: Record<string, Theme> = { export const themes: Record<string, Theme> = {
yuu: { yuu: {
bg: "#1e1816", bg: "#1e1816",
bgSecondary: "#2f2623", bgSecondary: "#2f2623",
bgTertiary: "#453733", bgTertiary: "#453733",
fg: "#f8f3ec", fg: "#f8f3ec",
fgSecondary: "#d6ccc2", fgSecondary: "#d6ccc2",
fgTertiary: "#b4a89c", fgTertiary: "#b4a89c",
primary: "#fc9174", primary: "#fc9174",
primaryDim: "#d88b65", primaryDim: "#d88b65",
accent: "#f9db6d", accent: "#f9db6d",
accentDim: "#d9bc55", accentDim: "#d9bc55",
error: "#e26c6a", error: "#e26c6a",
warning: "#f5b851", warning: "#f5b851",
success: "#8fc48f", success: "#8fc48f",
info: "#87b8dd", info: "#87b8dd",
}, },
varia: { varia: {
bg: "rgb(25, 25, 29)", bg: "rgb(25, 25, 29)",
bgSecondary: "#222222", bgSecondary: "#222222",
bgTertiary: "#333333", bgTertiary: "#333333",
fg: "#eeeeee", fg: "#eeeeee",
fgSecondary: "#aaaaaa", fgSecondary: "#aaaaaa",
fgTertiary: "#888888", fgTertiary: "#888888",
primary: "rgb(203, 110, 240)", primary: "rgb(203, 110, 240)",
primaryDim: "#c28379", primaryDim: "#c28379",
accent: "#f0ad0a", accent: "#f0ad0a",
accentDim: "#d08d08", accentDim: "#d08d08",
error: "#f44336", error: "#f44336",
warning: "#ff9800", warning: "#ff9800",
success: "#4caf50", success: "#4caf50",
info: "#2196f3", info: "#2196f3",
}, },
midnight: { midnight: {
bg: "rgb(8, 15, 24)", bg: "rgb(8, 15, 24)",
bgSecondary: "rgb(15, 27, 46)", bgSecondary: "rgb(15, 27, 46)",
bgTertiary: "rgb(15, 41, 70)", bgTertiary: "rgb(15, 41, 70)",
fg: "#dbdfe7", fg: "#dbdfe7",
fgSecondary: "#9ea3a8", fgSecondary: "#9ea3a8",
fgTertiary: "#74787c", fgTertiary: "#74787c",
primary: "#1a97eb", primary: "#1a97eb",
primaryDim: "#2680aa", primaryDim: "#2680aa",
accent: "#f0ad0a", accent: "#f0ad0a",
accentDim: "#d08d08", accentDim: "#d08d08",
error: "#f44336", error: "#f44336",
warning: "#ff9800", warning: "#ff9800",
success: "#4caf50", success: "#4caf50",
info: "#2196f3", info: "#2196f3",
}, },
catppuccin: { catppuccin: {
bg: "#1e1e2e", bg: "#1e1e2e",
bgSecondary: "#181825", bgSecondary: "#181825",
bgTertiary: "#11111b", bgTertiary: "#11111b",
fg: "#cdd6f4", fg: "#cdd6f4",
fgSecondary: "#a6adc8", fgSecondary: "#a6adc8",
fgTertiary: "#9399b2", fgTertiary: "#9399b2",
primary: "#89b4fa", primary: "#89b4fa",
primaryDim: "#739df0", primaryDim: "#739df0",
accent: "#f38ba8", accent: "#f38ba8",
accentDim: "#d67b94", accentDim: "#d67b94",
error: "#f38ba8", error: "#f38ba8",
warning: "#f9e2af", warning: "#f9e2af",
success: "#a6e3a1", success: "#a6e3a1",
info: "#89dceb", info: "#89dceb",
}, },
autumn: { autumn: {
bg: "rgb(44, 25, 18)", bg: "rgb(44, 25, 18)",
bgSecondary: "rgb(70, 40, 18)", bgSecondary: "rgb(70, 40, 18)",
bgTertiary: "#4b2f1c", bgTertiary: "#4b2f1c",
fg: "#fef9f3", fg: "#fef9f3",
fgSecondary: "#dbc6b0", fgSecondary: "#dbc6b0",
fgTertiary: "#a3917a", fgTertiary: "#a3917a",
primary: "#d97706", primary: "#d97706",
primaryDim: "#b45309", primaryDim: "#b45309",
accent: "#8c4c28", accent: "#8c4c28",
accentDim: "#6b3b1f", accentDim: "#6b3b1f",
error: "#d1433f", error: "#d1433f",
warning: "#e38b29", warning: "#e38b29",
success: "#6b8e23", success: "#6b8e23",
info: "#c084fc", info: "#c084fc",
}, },
black: { black: {
bg: "#000000", bg: "#000000",
bgSecondary: "#1a1a1a", bgSecondary: "#1a1a1a",
bgTertiary: "#2a2a2a", bgTertiary: "#2a2a2a",
fg: "#dddddd", fg: "#dddddd",
fgSecondary: "#aaaaaa", fgSecondary: "#aaaaaa",
fgTertiary: "#888888", fgTertiary: "#888888",
primary: "#08c08c", primary: "#08c08c",
primaryDim: "#08c08c", primaryDim: "#08c08c",
accent: "#f0ad0a", accent: "#f0ad0a",
accentDim: "#d08d08", accentDim: "#d08d08",
error: "#f44336", error: "#f44336",
warning: "#ff9800", warning: "#ff9800",
success: "#4caf50", success: "#4caf50",
info: "#2196f3", info: "#2196f3",
}, },
wine: { wine: {
bg: "#23181E", bg: "#23181E",
bgSecondary: "#2C1C25", bgSecondary: "#2C1C25",
bgTertiary: "#422A37", bgTertiary: "#422A37",
fg: "#FCE0B3", fg: "#FCE0B3",
fgSecondary: "#C7AC81", fgSecondary: "#C7AC81",
fgTertiary: "#A78E64", fgTertiary: "#A78E64",
primary: "#EA8A64", primary: "#EA8A64",
primaryDim: "#BD7255", primaryDim: "#BD7255",
accent: "#FAE99B", accent: "#FAE99B",
accentDim: "#C6B464", accentDim: "#C6B464",
error: "#fca5a5", error: "#fca5a5",
warning: "#fde68a", warning: "#fde68a",
success: "#bbf7d0", success: "#bbf7d0",
info: "#bae6fd", info: "#bae6fd",
}, },
pearl: { pearl: {
bg: "#FFFFFF", bg: "#FFFFFF",
bgSecondary: "#EEEEEE", bgSecondary: "#EEEEEE",
bgTertiary: "#E0E0E0", bgTertiary: "#E0E0E0",
fg: "#333333", fg: "#333333",
fgSecondary: "#555555", fgSecondary: "#555555",
fgTertiary: "#777777", fgTertiary: "#777777",
primary: "#007BFF", primary: "#007BFF",
primaryDim: "#0056B3", primaryDim: "#0056B3",
accent: "#28A745", accent: "#28A745",
accentDim: "#1E7E34", accentDim: "#1E7E34",
error: "#DC3545", error: "#DC3545",
warning: "#FFC107", warning: "#FFC107",
success: "#28A745", success: "#28A745",
info: "#17A2B8", info: "#17A2B8",
}, },
asuka: { rosebud: {
bg: "#3B1212", bg: "#260d19",
bgSecondary: "#471B1B", bgSecondary: "#3A1325",
bgTertiary: "#020202", bgTertiary: "#45182D",
fg: "#F1E9E6", fg: "#F3CAD8",
fgSecondary: "#CCB6AE", fgSecondary: "#C88B99",
fgTertiary: "#9F8176", fgTertiary: "#B2677D",
primary: "#F1E9E6", primary: "#d76fa2",
primaryDim: "#CCB6AE", primaryDim: "#b06687",
accent: "#41CE41", accent: "#e79cb8",
accentDim: "#3BA03B", accentDim: "#c27d8c",
error: "#DC143C", error: "#e84b73",
warning: "#FFD700", warning: "#f2b38c",
success: "#32CD32", success: "#6FC4A6",
info: "#1E90FF", info: "#6BAEDC",
}, },
urim: { urim: {
bg: "#101713", bg: "#101713",
bgSecondary: "#1B2921", bgSecondary: "#1B2921",
bgTertiary: "#273B30", bgTertiary: "#273B30",
fg: "#D2E79E", fg: "#D2E79E",
fgSecondary: "#B4DA55", fgSecondary: "#B4DA55",
fgTertiary: "#7E9F2A", fgTertiary: "#7E9F2A",
primary: "#ead500", primary: "#ead500",
primaryDim: "#C1B210", primaryDim: "#C1B210",
accent: "#28A745", accent: "#28A745",
accentDim: "#1E7E34", accentDim: "#1E7E34",
error: "#EE5237", error: "#EE5237",
warning: "#FFC107", warning: "#FFC107",
success: "#28A745", success: "#28A745",
info: "#17A2B8", info: "#17A2B8",
}, },
match: { match: {
bg: "#071014", bg: "#071014",
bgSecondary: "#0A181E", bgSecondary: "#0A181E",
bgTertiary: "#112A34", bgTertiary: "#112A34",
fg: "#ebeaeb", fg: "#ebeaeb",
fgSecondary: "#BDBDBD", fgSecondary: "#BDBDBD",
fgTertiary: "#A2A2A2", fgTertiary: "#A2A2A2",
primary: "#fda827", primary: "#fda827",
primaryDim: "#C78420", primaryDim: "#C78420",
accent: "#277CFD", accent: "#277CFD",
accentDim: "#1F60C1", accentDim: "#1F60C1",
error: "#F14426", error: "#F14426",
warning: "#FFC107", warning: "#FFC107",
success: "#28A745", success: "#28A745",
info: "#17A2B8", info: "#17A2B8",
}, },
lemon: { lemon: {
bg: "#1a171a", bg: "#1a171a",
bgSecondary: "#2E272E", bgSecondary: "#2E272E",
bgTertiary: "#443844", bgTertiary: "#443844",
fg: "#E6E2DC", fg: "#E6E2DC",
fgSecondary: "#B2ACA1", fgSecondary: "#B2ACA1",
fgTertiary: "#968F82", fgTertiary: "#968F82",
primary: "#f5c737", primary: "#f5c737",
primaryDim: "#C29D2F", primaryDim: "#C29D2F",
accent: "#277CFD", accent: "#277CFD",
accentDim: "#1F60C1", accentDim: "#1F60C1",
error: "#F14426", error: "#F14426",
warning: "#FFC107", warning: "#FFC107",
success: "#28A745", success: "#28A745",
info: "#17A2B8", info: "#17A2B8",
} },
}; };
export default themes export default themes;
Object.entries(themes).forEach(([name, theme]) => { Object.entries(themes).forEach(([name, theme]) => {
const selector = `[data-theme="${name}"]` const selector = `[data-theme="${name}"]`;
globalStyle(selector, { globalStyle(selector, {
vars: { vars: {
[themeVars.bg]: theme.bg, [themeVars.bg]: theme.bg,
[themeVars.bgSecondary]: theme.bgSecondary, [themeVars.bgSecondary]: theme.bgSecondary,
[themeVars.bgTertiary]: theme.bgTertiary, [themeVars.bgTertiary]: theme.bgTertiary,
[themeVars.fg]: theme.fg, [themeVars.fg]: theme.fg,
[themeVars.fgSecondary]: theme.fgSecondary, [themeVars.fgSecondary]: theme.fgSecondary,
[themeVars.fgTertiary]: theme.fgTertiary, [themeVars.fgTertiary]: theme.fgTertiary,
[themeVars.primary]: theme.primary, [themeVars.primary]: theme.primary,
[themeVars.primaryDim]: theme.primaryDim, [themeVars.primaryDim]: theme.primaryDim,
[themeVars.accent]: theme.accent, [themeVars.accent]: theme.accent,
[themeVars.accentDim]: theme.accentDim, [themeVars.accentDim]: theme.accentDim,
[themeVars.error]: theme.error, [themeVars.error]: theme.error,
[themeVars.warning]: theme.warning, [themeVars.warning]: theme.warning,
[themeVars.success]: theme.success, [themeVars.success]: theme.success,
[themeVars.info]: theme.info, [themeVars.info]: theme.info,
} },
}) });
}) });

Write Preview
Loading…
Cancel
Save