diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index dad9bfb5985e..44a5bb933664 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -17,14 +17,14 @@ - Make sure to follow the [themes documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/THEMES.md) - [ ] Add theme to `packages/schemas/src/themes.ts` - [ ] Add theme to `frontend/src/ts/constants/themes.ts` - - [ ] Add theme css file to `frontend/static/themes` + - [ ] (optional) Add theme css file to `frontend/static/themes` - [ ] Add some screenshots of the theme, especially with different test settings (colorful, flip colors) to your pull request - [ ] Adding a layout? - [ ] Make sure to follow the [layouts documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LAYOUTS.md) - [ ] Add layout to `packages/schemas/src/layouts.ts` - [ ] Add layout json file to `frontend/static/layouts` - [ ] Adding a font? - - Make sure to follow the [themes documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md) + - Make sure to follow the [fonts documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md) - [ ] Add font file to `frontend/static/webfonts` - [ ] Add font to `packages/schemas/src/fonts.ts` - [ ] Add font to `frontend/src/ts/constants/fonts.ts` diff --git a/docs/THEMES.md b/docs/THEMES.md index d796d4b55e19..b80eebc684c7 100644 --- a/docs/THEMES.md +++ b/docs/THEMES.md @@ -13,55 +13,68 @@ First you will have to make a personal copy of the Monkeytype repository, also k ## Creating Themes -After you have forked the repository you can now add your theme. Create a CSS file in `./frontend/static/themes/`. Call it whatever you want but make sure that it is all lowercase and replace spaces with underscores. It should look something like this: -`theme_name.css`. - -Then add this code to your file: - -```css -:root { - --bg-color: #ffffff; - --main-color: #ffffff; - --caret-color: #ffffff; - --sub-color: #ffffff; - --sub-alt-color: #ffffff; - --text-color: #ffffff; - --error-color: #ffffff; - --error-extra-color: #ffffff; - --colorful-error-color: #ffffff; - --colorful-error-extra-color: #ffffff; -} -``` - -Here is an image showing what all the properties correspond to: -Screenshot showing the page elements controlled by each color property +Pick a name for your theme. It must be all lowercase, with spaces replaced by underscores. -Change the corresponding hex codes to create your theme. -Then, go to `./packages/schemas/src/themes.ts` and add your new theme name at the _end_ of the `ThemeNameSchema` enum. Make sure to end the line with a comma. +Go to `./packages/schemas/src/themes.ts` and add your new theme name to the __end__ of the `ThemeNameSchema` enum. Make sure to end the line with a comma. ```typescript export const ThemeNameSchema = z.enum([ "8008", "80s_after_dark", - ... + ... all existing theme names "your_theme_name", +]); +``` + +Then, go to `./frontend/src/ts/constants/themes.ts` and add the following code to the __end__ of the `themes` object near to the very end of the file: + +```typescript +export const themes: Record = { + ... all existing themes + your_theme_name: { + bg: "#ffffff", + caret: "#ffffff", + main: "#ffffff", + sub: "#ffffff", + subAlt: "#ffffff", + text: "#ffffff", + error: "#ffffff", + errorExtra: "#ffffff", + colorfulError: "#ffffff", + colorfulErrorExtra: "#ffffff", + }, +} ``` -Then, go to `./frontend/src/ts/constants/themes.ts` and add the following code to the _end_ of the `themes` object near to the very end of the file: +Here is an image showing what all the properties correspond to: +Screenshot showing the page elements controlled by each color property + +If you don't want to add any custom styling you can skip the next section. + + +#### Adding custom CSS (optional) + +Create a CSS file in `./frontend/static/themes/` matching the name you picked earlier. Update the theme configuration in `./frontend/src/ts/constants/themes.ts` and add `hasCss: true` like this: ```typescript -export const themes: Record> = { - ... +export const themes: Record = { + ... all existing themes your_theme_name: { - bgColor: "#ffffff", - mainColor: "#ffffff", - subColor: "#ffffff", - textColor: "#ffffff", + bg: "#ffffff", + caret: "#ffffff", + main: "#ffffff", + sub: "#ffffff", + subAlt: "#ffffff", + text: "#ffffff", + error: "#ffffff", + errorExtra: "#ffffff", + colorfulError: "#ffffff", + colorfulErrorExtra: "#ffffff", + hasCss: true, }, } ``` -Make sure the name you put matches the name of the file you created (without the `.css` file extension). Add the text color and background color of your theme to their respective fields. ### Committing Themes diff --git a/frontend/__tests__/components/core/Theme.spec.tsx b/frontend/__tests__/components/core/Theme.spec.tsx new file mode 100644 index 000000000000..c98f119e30e7 --- /dev/null +++ b/frontend/__tests__/components/core/Theme.spec.tsx @@ -0,0 +1,137 @@ +import { render, fireEvent } from "@solidjs/testing-library"; +import { createSignal } from "solid-js"; +import { describe, it, expect, vi, beforeEach } from "vitest"; + +import { Theme } from "../../../src/ts/components/core/Theme"; +import { ThemeWithName } from "../../../src/ts/constants/themes"; +import * as Notifications from "../../../src/ts/elements/notifications"; +import * as Loader from "../../../src/ts/signals/loader-bar"; +import * as ThemeSignal from "../../../src/ts/signals/theme"; + +vi.mock("../../../src/ts/constants/themes", () => ({ + themes: { + dark: { hasCss: true }, + light: {}, + }, +})); + +vi.mock("./FavIcon", () => ({ + FavIcon: () =>
, +})); + +describe("Theme component", () => { + const [themeSignal, setThemeSignal] = createSignal({} as any); + const themeSignalMock = vi.spyOn(ThemeSignal, "getTheme"); + const loaderShowMock = vi.spyOn(Loader, "showLoaderBar"); + const loaderHideMock = vi.spyOn(Loader, "hideLoaderBar"); + const notificationAddMock = vi.spyOn(Notifications, "add"); + + beforeEach(() => { + vi.useFakeTimers(); + vi.clearAllMocks(); + loaderShowMock.mockClear(); + loaderHideMock.mockClear(); + notificationAddMock.mockClear(); + themeSignalMock.mockImplementation(() => themeSignal()); + setThemeSignal({ + name: "dark", + bg: "#000", + main: "#fff", + caret: "#fff", + sub: "#aaa", + subAlt: "#888", + text: "#fff", + error: "#f00", + errorExtra: "#c00", + colorfulError: "#f55", + colorfulErrorExtra: "#c55", + }); + }); + + it("injects CSS variables based on theme", () => { + const { style } = renderComponent(); + + expect(style.innerHTML).toEqual(` +:root { + --bg-color: #000; + --main-color: #fff; + --caret-color: #fff; + --sub-color: #aaa; + --sub-alt-color: #888; + --text-color: #fff; + --error-color: #f00; + --error-extra-color: #c00; + --colorful-error-color: #f55; + --colorful-error-extra-color: #c55; +}`); + }); + + it("updates CSS variables based on signal", () => { + setThemeSignal({ name: "light", bg: "#f00" } as any); + const { style } = renderComponent(); + + expect(style.innerHTML).toContain("--bg-color: #f00;"); + }); + + it("loads CSS file and shows loader when theme has CSS", () => { + const { css } = renderComponent(); + + expect(css.getAttribute("href")).toBe("/themes/dark.css"); + expect(loaderShowMock).toHaveBeenCalledOnce(); + fireEvent.load(css); + expect(loaderHideMock).toHaveBeenCalledOnce(); + }); + + it("removes CSS when theme has no CSS", async () => { + themeSignalMock.mockImplementation(() => ({ name: "light" }) as any); + const { css } = renderComponent(); + expect(css.getAttribute("href")).toBe(""); + }); + + it("removes CSS when theme is custom", async () => { + themeSignalMock.mockImplementation(() => ({ name: "custom" }) as any); + const { css } = renderComponent(); + expect(css.getAttribute("href")).toBe(""); + }); + + it("handles CSS load error", () => { + const { css } = renderComponent(); + expect(loaderShowMock).toHaveBeenCalledOnce(); + fireEvent.error(css); + expect(loaderHideMock).toHaveBeenCalledOnce(); + expect(notificationAddMock).toHaveBeenCalledWith("Failed to load theme", 0); + }); + + it("renders favicon", () => { + const { favIcon } = renderComponent(); + + expect(favIcon).toBeInTheDocument(); + expect(favIcon).toBeEmptyDOMElement(); //mocked + }); + + function renderComponent(): { + style: HTMLStyleElement; + css: HTMLLinkElement; + metaThemeColor: HTMLMetaElement; + favIcon: HTMLElement; + } { + render(() => ); + + //wait for debounce + vi.runAllTimers(); + + //make sure content is rendered to the head, not the body + const head = document.head; + + return { + // oxlint-disable-next-line typescript/no-non-null-assertion + style: head.querySelector("style#theme")!, + // oxlint-disable-next-line typescript/no-non-null-assertion + css: head.querySelector("link#currentTheme")!, + // oxlint-disable-next-line typescript/no-non-null-assertion + metaThemeColor: head.querySelector("meta#metaThemeColor")!, + // oxlint-disable-next-line typescript/no-non-null-assertion + favIcon: head.querySelector("#favicon")!, + }; + } +}); diff --git a/frontend/package.json b/frontend/package.json index 3d7999b67043..ac913df2bbf3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,6 +29,7 @@ "@monkeytype/util": "workspace:*", "@sentry/browser": "9.14.0", "@sentry/vite-plugin": "3.3.1", + "@solidjs/meta": "0.29.4", "@ts-rest/core": "3.52.1", "animejs": "4.2.2", "balloon-css": "1.2.0", diff --git a/frontend/scripts/check-assets.ts b/frontend/scripts/check-assets.ts index 881d2e720d43..dff3c69a10c3 100644 --- a/frontend/scripts/check-assets.ts +++ b/frontend/scripts/check-assets.ts @@ -17,7 +17,7 @@ import { Layout, ThemeName } from "@monkeytype/schemas/configs"; import { LayoutsList } from "../src/ts/constants/layouts"; import { KnownFontName } from "@monkeytype/schemas/fonts"; import { Fonts } from "../src/ts/constants/fonts"; -import { ThemesList } from "../src/ts/constants/themes"; +import { themes, ThemeSchema, ThemesList } from "../src/ts/constants/themes"; import { z } from "zod"; import { ChallengeSchema, Challenge } from "@monkeytype/schemas/challenges"; import { LayoutObject, LayoutObjectSchema } from "@monkeytype/schemas/layouts"; @@ -381,13 +381,14 @@ async function validateThemes(): Promise { //no missing files const themeFiles = fs.readdirSync("./static/themes"); - //missing theme files - ThemesList.filter((it) => !themeFiles.includes(it.name + ".css")).forEach( - (it) => - problems.add( - it.name, - `missing file frontend/static/themes/${it.name}.css`, - ), + //missing or additional theme files (mismatch in hasCss) + ThemesList.filter( + (it) => themeFiles.includes(it.name + ".css") !== (it.hasCss ?? false), + ).forEach((it) => + problems.add( + it.name, + `${it.hasCss ? "missing" : "additional"} file frontend/static/themes/${it.name}.css`, + ), ); //additional theme files @@ -395,6 +396,17 @@ async function validateThemes(): Promise { .filter((it) => !ThemesList.some((theme) => theme.name + ".css" === it)) .forEach((it) => problems.add("_additional", it)); + //validate theme colors are valid hex colors, not covered by typescipt + const themeNameSchema = z.string().regex(/^[a-z0-9_]+$/, { + message: + "theme name can only contain lowercase letters, digits and underscore", + }); + for (const name of Object.keys(themes)) { + const theme = themes[name as ThemeName]; + problems.addValidation(name as ThemeName, ThemeSchema.safeParse(theme)); + problems.addValidation(name as ThemeName, themeNameSchema.safeParse(name)); + } + console.log(problems.toString()); if (problems.hasError()) { diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html index 64bc55ee89c1..ac53517ccbb4 100644 --- a/frontend/src/html/head.html +++ b/frontend/src/html/head.html @@ -26,7 +26,7 @@ Monkeytype | A minimalistic, customizable typing test - + + + + + + + `; + return "data:image/svg+xml;base64," + btoa(svgPre); + }); + + return ( + + ); +} diff --git a/frontend/src/ts/components/core/Theme.tsx b/frontend/src/ts/components/core/Theme.tsx new file mode 100644 index 000000000000..3f624f3b4de6 --- /dev/null +++ b/frontend/src/ts/components/core/Theme.tsx @@ -0,0 +1,81 @@ +import { Link, Meta, MetaProvider, Style } from "@solidjs/meta"; +import { createEffect, createMemo, JSXElement } from "solid-js"; + +import { themes } from "../../constants/themes"; +import * as Notifications from "../../elements/notifications"; +import { createDebouncedEffectOn } from "../../hooks/effects"; +import { useRefWithUtils } from "../../hooks/useRefWithUtils"; +import { hideLoaderBar, showLoaderBar } from "../../signals/loader-bar"; +import { getTheme } from "../../signals/theme"; + +import { FavIcon } from "./FavIcon"; + +export function Theme(): JSXElement { + // Refs are assigned by SolidJS via the ref attribute + const [styleRef, styleEl] = useRefWithUtils(); + const [linkRef, linkEl] = useRefWithUtils(); + + //Use memo to ignore signals without changes, needed for the css loading + const getThemeName = createMemo(() => getTheme().name); + + const onLoad = (e: Event): void => { + hideLoaderBar(); + const target = e.target as HTMLLinkElement; + if (target.href !== "") { + console.debug( + `Theme component loaded style for theme ${target.dataset["name"]}`, + ); + } + }; + + const onError = (e: Event): void => { + hideLoaderBar(); + const target = e.target as HTMLLinkElement; + const name = target.dataset["name"]; + console.debug("Theme component failed to load style", name, e); + console.error(`Failed to load theme ${name}`, e); + Notifications.add("Failed to load theme", 0); + }; + + createDebouncedEffectOn(125, getTheme, (colors) => { + styleEl()?.setHtml(` +:root { + --bg-color: ${colors.bg}; + --main-color: ${colors.main}; + --caret-color: ${colors.caret}; + --sub-color: ${colors.sub}; + --sub-alt-color: ${colors.subAlt}; + --text-color: ${colors.text}; + --error-color: ${colors.error}; + --error-extra-color: ${colors.errorExtra}; + --colorful-error-color: ${colors.colorfulError}; + --colorful-error-extra-color: ${colors.colorfulErrorExtra}; +}`); + }); + + createEffect(() => { + const name = getThemeName(); + const hasCss = name !== "custom" && (themes[name].hasCss ?? false); + console.debug( + `Theme component ${hasCss ? "loading style" : "removing style"} for theme ${name}`, + ); + if (hasCss) showLoaderBar(); + linkEl()?.setAttribute("href", hasCss ? `/themes/${name}.css` : ""); + }); + + return ( + + - - - - -`; - - qs("#favicon")?.setAttribute( - "href", - "data:image/svg+xml;base64," + btoa(svgPre), - ); - }, 125); +export function applyPreset(name: ThemeName): void { + void apply(name); } -function clearCustomTheme(): void { - console.debug("Theme controller clearing custom theme"); - for (const e of colorVars) { - document.documentElement.style.setProperty(e, ""); - } +export function convertCustomColorsToTheme(colors: CustomThemeColors): Theme { + return { + bg: colors[0], + main: colors[1], + caret: colors[2], + sub: colors[3], + subAlt: colors[4], + text: colors[5], + error: colors[6], + errorExtra: colors[7], + colorfulError: colors[8], + colorfulErrorExtra: colors[9], + }; } - -let loadStyleLoaderTimeouts: NodeJS.Timeout[] = []; - -export async function loadStyle(name: string): Promise { - return new Promise((resolve) => { - function swapCurrentToNext(): void { - console.debug("Theme controller swapping elements"); - const current = qs("#currentTheme"); - const next = qs("#nextTheme"); - if (current === null || next === null) { - console.debug( - "Theme controller failed to swap elements, next or current is missing", - ); - return; - } - current.remove(); - next.setAttribute("id", "currentTheme"); - } - - console.debug("Theme controller loading style", name); - loadStyleLoaderTimeouts.push( - setTimeout(() => { - showLoaderBar(); - }, 100), - ); - qs("#nextTheme")?.remove(); - const headScript = document.querySelector("#currentTheme"); - const link = document.createElement("link"); - link.type = "text/css"; - link.rel = "stylesheet"; - link.id = "nextTheme"; - link.onload = (): void => { - console.debug("Theme controller loaded style", name); - hideLoaderBar(); - swapCurrentToNext(); - loadStyleLoaderTimeouts.map((t) => clearTimeout(t)); - loadStyleLoaderTimeouts = []; - qsa("#keymap .keymapKey")?.setStyle({}); - resolve(); - }; - link.onerror = (e): void => { - console.debug("Theme controller failed to load style", name, e); - console.error(`Failed to load theme ${name}`, e); - hideLoaderBar(); - Notifications.add("Failed to load theme", 0); - swapCurrentToNext(); - loadStyleLoaderTimeouts.map((t) => clearTimeout(t)); - loadStyleLoaderTimeouts = []; - qsa("#keymap .keymapKey")?.setStyle({}); - resolve(); - }; - if (name === "custom") { - link.href = `/themes/serika_dark.css`; - } else { - link.href = `/themes/${name}.css`; - } - - if (headScript === null) { - console.debug("Theme controller appending link to the head", link); - document.head.appendChild(link); - } else { - console.debug( - "Theme controller inserting link after current theme", - link, - ); - headScript.after(link); - } - }); +export function convertThemeToCustomColors(theme: Theme): CustomThemeColors { + return [ + theme.bg, + theme.main, + theme.caret, + theme.sub, + theme.subAlt, + theme.text, + theme.error, + theme.errorExtra, + theme.colorfulError, + theme.colorfulErrorExtra, + ]; } -// export function changeCustomTheme(themeId: string, nosave = false): void { -// const customThemes = DB.getSnapshot().customThemes; -// const colors = customThemes.find((e) => e._id === themeId) -// ?.colors as string[]; -// UpdateConfig.setConfig("customThemeColors", colors,nosave); -// } - async function apply( - themeName: string, - customColorsOverride?: string[], + themeName: ThemeIdentifier, + customColorsOverride?: CustomThemeColors, isPreview = false, ): Promise { - console.debug( - "Theme controller applying theme", - themeName, + console.debug(`Theme controller applying theme ${themeName}`, { customColorsOverride, isPreview, - ); - - const name = customColorsOverride ? "custom" : themeName; - - if ((Config.customTheme && !isPreview) || customColorsOverride) { - const colors = customColorsOverride ?? Config.customThemeColors; + }); - for (let i = 0; i < colorVars.length; i++) { - const colorVar = colorVars[i] as string; - document.documentElement.style.setProperty(colorVar, colors[i] as string); - } - } + const isCustom = themeName === "custom"; - qsa("#keymap .keymapKey")?.setStyle({}); - await loadStyle(name); + const themeColors = isCustom + ? convertCustomColorsToTheme( + customColorsOverride ?? Config.customThemeColors, + ) + : themes[themeName]; - if (name !== "custom") { - clearCustomTheme(); - } + setTheme({ ...themeColors, name: themeName }); - ThemeColors.update(); + updateThemeIndicator(isPreview ? themeName : undefined); - // if (!isPreview) { - const colors = await ThemeColors.getAll(); - qsa("#keymap .keymapKey")?.setStyle({}); - ChartController.updateAllChartColors(); - void updateFavicon(); - qs("#metaThemeColor")?.setAttribute("content", colors.bg); - updateFooterIndicator(isPreview ? themeName : undefined); - - if (isColorDark(await ThemeColors.get("bg"))) { + if (isColorDark(themeColors.bg)) { qs("body")?.addClass("darkMode"); } else { qs("body")?.removeClass("darkMode"); } } -function updateFooterIndicator(nameOverride?: string): void { +function updateThemeIndicator(nameOverride?: string): void { //text let str: string = Config.theme; if (randomTheme !== null) str = randomTheme; @@ -215,15 +98,15 @@ function updateFooterIndicator(nameOverride?: string): void { } type PreviewState = { - theme: string; - colors?: string[]; + theme: ThemeIdentifier; + colors?: CustomThemeColors; } | null; let previewState: PreviewState = null; export function preview( - themeIdentifier: string, - customColorsOverride?: string[], + themeIdentifier: ThemeIdentifier, + customColorsOverride?: CustomThemeColors, ): void { previewState = { theme: themeIdentifier, colors: customColorsOverride }; debouncedPreview(); @@ -237,14 +120,12 @@ const debouncedPreview = debounce<() => void>(250, () => { }); async function set( - themeIdentifier: string, + themeIdentifier: ThemeIdentifier, isAutoSwitch = false, ): Promise { - console.debug( - "Theme controller setting theme", - themeIdentifier, + console.debug("Theme controller setting theme", themeIdentifier, { isAutoSwitch, - ); + }); await apply(themeIdentifier, undefined, isAutoSwitch); if (!isAutoSwitch && Config.autoSwitchTheme) { @@ -277,13 +158,9 @@ async function changeThemeList(): Promise { if (Config.randomTheme === "fav" && Config.favThemes.length > 0) { themesList = Config.favThemes; } else if (Config.randomTheme === "light") { - themesList = themes - .filter((t) => isColorLight(t.bgColor)) - .map((t) => t.name); + themesList = themes.filter((t) => isColorLight(t.bg)).map((t) => t.name); } else if (Config.randomTheme === "dark") { - themesList = themes - .filter((t) => isColorDark(t.bgColor)) - .map((t) => t.name); + themesList = themes.filter((t) => isColorDark(t.bg)).map((t) => t.name); } else if (Config.randomTheme === "on" || Config.randomTheme === "auto") { themesList = themes.map((t) => { return t.name; @@ -308,16 +185,16 @@ export async function randomizeTheme(): Promise { let nextTheme = null; do { - randomTheme = themesList[randomThemeIndex] as string; + randomTheme = themesList[randomThemeIndex] as ThemeIdentifier; nextTheme = themes[themesList[randomThemeIndex] as ThemeName]; randomThemeIndex++; if (randomThemeIndex >= themesList.length) { Arrays.shuffle(themesList); randomThemeIndex = 0; } - } while (!filter(nextTheme.bgColor)); + } while (!filter(nextTheme.bg)); - let colorsOverride: string[] | undefined; + let colorsOverride: CustomThemeColors | undefined; if (Config.randomTheme === "custom") { const theme = DB.getSnapshot()?.customThemes?.find( @@ -495,7 +372,7 @@ ConfigEvent.subscribe(async ({ key, newValue, nosave }) => { if (key === "theme") { await clearRandom(); await clearPreview(false); - await set(newValue as string); + await set(newValue); } if (key === "randomTheme" && newValue === "off") await clearRandom(); if (key === "customBackground") await applyCustomBackground(); @@ -538,7 +415,7 @@ ConfigEvent.subscribe(async ({ key, newValue, nosave }) => { "favThemes", ].includes(key) ) { - updateFooterIndicator(); + updateThemeIndicator(); } }); diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts index 25155e8401a6..19e0add7bf91 100644 --- a/frontend/src/ts/elements/keymap.ts +++ b/frontend/src/ts/elements/keymap.ts @@ -1,5 +1,4 @@ import Config from "../config"; -import * as ThemeColors from "./theme-colors"; import * as ConfigEvent from "../observables/config-event"; import * as KeymapEvent from "../observables/keymap-event"; import * as Misc from "../utils/misc"; @@ -18,6 +17,9 @@ import { LayoutObject } from "@monkeytype/schemas/layouts"; import { animate } from "animejs"; import { ElementsWithUtils, qsr } from "../utils/dom"; import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame"; +import { getTheme } from "../signals/theme"; + +import { createEffectOn } from "../hooks/effects"; export const keyDataDelimiter = "\uE000"; const keymap = qsr("#keymap"); @@ -61,6 +63,11 @@ const stenoKeys: LayoutObject = { }, }; +createEffectOn(getTheme, () => { + //reset calculated style on all keys + keymap.qsa(".keymapKey").setStyle({}); +}); + function findKeyElements(char: string): ElementsWithUtils | null { if (char === "\n") return null; @@ -106,7 +113,7 @@ async function flashKey(key: string, correct?: boolean): Promise { const elements = findKeyElements(key); if (elements === null || elements.length === 0) return; - const themecolors = await ThemeColors.getAll(); + const themecolors = getTheme(); try { let startingStyle = { diff --git a/frontend/src/ts/elements/monkey-power.ts b/frontend/src/ts/elements/monkey-power.ts index c5529b4c628e..3878f52f3b66 100644 --- a/frontend/src/ts/elements/monkey-power.ts +++ b/frontend/src/ts/elements/monkey-power.ts @@ -1,9 +1,9 @@ -import * as ThemeColors from "./theme-colors"; import * as SlowTimer from "../states/slow-timer"; import Config from "../config"; import { isSafeNumber } from "@monkeytype/util/numbers"; import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame"; import { ElementWithUtils, qsr } from "../utils/dom"; +import { getTheme } from "../signals/theme"; const html = qsr("html"); const body = qsr("body"); @@ -238,11 +238,12 @@ export async function addPower(good = true, extra = false): Promise { i > 0; i-- ) { + const { caret, error } = getTheme(); const color = ["2", "4"].includes(Config.monkeyPowerLevel) ? randomColor() : good - ? await ThemeColors.get("caret") - : await ThemeColors.get("error"); + ? caret + : error; ctx.particles.push( createParticle(...(coords as [x: number, y: number]), color), ); diff --git a/frontend/src/ts/elements/result-batches.ts b/frontend/src/ts/elements/result-batches.ts index 9f129de2b1f4..500c63545abe 100644 --- a/frontend/src/ts/elements/result-batches.ts +++ b/frontend/src/ts/elements/result-batches.ts @@ -1,8 +1,8 @@ import * as DB from "../db"; import * as ServerConfiguration from "../ape/server-configuration"; import { blendTwoHexColors } from "../utils/colors"; -import * as ThemeColors from "../elements/theme-colors"; import { mapRange } from "@monkeytype/util/numbers"; +import { getTheme } from "../signals/theme"; export function hide(): void { $(".pageAccount .resultBatches").addClass("hidden"); @@ -56,7 +56,7 @@ export async function update(): Promise { `${results?.length} / ${completedTests} (${percentageDownloaded}%)`, ); - const colors = await ThemeColors.getAll(); + const colors = getTheme(); bars.limit.fill.css({ width: Math.min(percentageLimit, 100) + "%", diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts index 611c9ba30ddd..8d779f3b62e3 100644 --- a/frontend/src/ts/elements/settings/theme-picker.ts +++ b/frontend/src/ts/elements/settings/theme-picker.ts @@ -3,17 +3,16 @@ import * as ThemeController from "../../controllers/theme-controller"; import * as Misc from "../../utils/misc"; import * as Colors from "../../utils/colors"; import * as Notifications from "../notifications"; -import * as ThemeColors from "../theme-colors"; -import * as ChartController from "../../controllers/chart-controller"; import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar"; import * as DB from "../../db"; import * as ConfigEvent from "../../observables/config-event"; import { isAuthenticated } from "../../firebase"; import { getActivePage } from "../../signals/core"; -import { CustomThemeColors, ThemeName } from "@monkeytype/schemas/configs"; +import { ThemeName } from "@monkeytype/schemas/configs"; import { captureException } from "../../sentry"; -import { ThemesListSorted } from "../../constants/themes"; -import { qs } from "../../utils/dom"; +import { ColorName, ThemesListSorted } from "../../constants/themes"; +import { qs, qsa, qsr } from "../../utils/dom"; +import { getTheme, updateThemeColor } from "../../signals/theme"; function updateActiveButton(): void { let activeThemeName: string = Config.theme; @@ -37,85 +36,16 @@ function updateActiveButton(): void { ?.classList.add("active"); } -function updateColors( - colorPicker: JQuery, - color: string, - onlyStyle = false, - noThemeUpdate = false, -): void { - if (onlyStyle) { - const colorID = colorPicker.find("input.color").attr("id"); - if (colorID === undefined) console.error("Could not find color ID!"); - if (!noThemeUpdate && colorID !== undefined) { - document.documentElement.style.setProperty(colorID, color); - } - const pickerButton = colorPicker.find("label"); - pickerButton.val(color); - pickerButton.attr("value", color); - if (pickerButton.attr("for") !== "--bg-color") { - pickerButton.css("background-color", color); - } - colorPicker.find("input.input").val(color); - colorPicker.find("input.color").attr("value", color); - colorPicker.find("input.color").val(color); - return; - } - const colorREGEX = [ - { - rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/, - start: "rgb(", - end: ")", - }, - { - rule: /\b[A-Z, a-z, 0-9]{6}\b/, - start: "#", - end: "", - }, - { - rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/, - start: "hsl(", - end: ")", - }, - ]; - - color = color.replace("°", ""); - - for (const regex of colorREGEX) { - if (color.match(regex.rule)) { - color = regex.start + color + regex.end; - break; - } - } - - color = color.replace("##", "#"); - - $(".colorConverter").css("color", color); - const hexColor: string | undefined = Colors.rgbStringtoHex( - $(".colorConverter").css("color"), - ); - if (hexColor === undefined) { - return; +function updateColorPicker(key: ColorName, color: string): void { + const colorPicker = qsr(`.colorPicker[data-key="${key}"]`); + const pickerButton = colorPicker.qsr("label"); + pickerButton.setAttribute("value", color); + if (key !== "bg") { + //don't update the color for the background picker + pickerButton.setStyle({ backgroundColor: color }); } - - color = hexColor; - - const colorID = colorPicker.find("input.color").attr("id"); - - if (colorID === undefined) console.error("Could not find color ID!"); - if (!noThemeUpdate && colorID !== undefined) { - document.documentElement.style.setProperty(colorID, color); - } - - const pickerButton = colorPicker.find("label"); - - pickerButton.val(color); - pickerButton.attr("value", color); - if (pickerButton.attr("for") !== "--bg-color") { - pickerButton.css("background-color", color); - } - colorPicker.find("input.input").val(color); - colorPicker.find("input.color").attr("value", color); - colorPicker.find("input.color").val(color); + colorPicker.qsr("input.input").setValue(color); + colorPicker.qsr("input.color").setAttribute("value", color); } export async function fillPresetButtons(): Promise { @@ -161,23 +91,17 @@ export async function fillPresetButtons(): Promise { const activeTheme = activeThemeName === theme.name ? "active" : ""; favThemesElHTML += `
+ }' style="background: ${theme.bg}; color: ${ + theme.main + };outline: 0 solid ${theme.main};">
${theme.name.replace(/_/g, " ")}
-
-
-
+ theme.bg + };outline: 0.25rem solid ${theme.bg};"> +
+
+
`; @@ -196,17 +120,17 @@ export async function fillPresetButtons(): Promise { const activeTheme = activeThemeName === theme.name ? "active" : ""; themesElHTML += `
+ }' style="background: ${theme.bg}; color: ${ + theme.main + };outline: 0 solid ${theme.main};">
${theme.name.replace(/_/g, " ")}
-
-
-
+ theme.bg + };outline: 0.25rem solid ${theme.bg};"> +
+
+
`; @@ -257,16 +181,16 @@ export async function fillCustomButtons(): Promise { } } -export function setCustomInputs(noThemeUpdate = false): void { - $( +export function setCustomInputs(): void { + const theme = ThemeController.convertCustomColorsToTheme( + Config.customThemeColors, + ); + qsa( ".pageSettings .section.themes .tabContainer .customTheme .colorPicker", - ).each((_index, element: HTMLElement) => { - const currentColor = Config.customThemeColors[ - ThemeController.colorVars.indexOf( - $(element).find("input.color").attr("id") as string, - ) - ] as string; - updateColors($(element), currentColor, false, noThemeUpdate); + ).forEach((element) => { + const key = element.getAttribute("data-key") as ColorName; + const color = Colors.convertStringToHex(theme[key]); + updateColorPicker(key, color); }); } @@ -287,15 +211,9 @@ function toggleFavourite(themeName: ThemeName): void { } function saveCustomThemeColors(): void { - const newColors: string[] = []; - for (const color of ThemeController.colorVars) { - newColors.push( - $(`.pageSettings .tabContent.customTheme #${color}[type='color']`).attr( - "value", - ) as string, - ); - } - setConfig("customThemeColors", newColors as CustomThemeColors); + const colors = ThemeController.convertThemeToCustomColors(getTheme()); + + setConfig("customThemeColors", colors); Notifications.add("Custom theme saved", 1); } @@ -390,85 +308,71 @@ $(".pageSettings").on("click", ".section.themes .theme.button", (e) => { } }); -$( - ".pageSettings .section.themes .tabContainer .customTheme input[type=color]", -).on("input", (e) => { - const $colorVar = $(e.currentTarget).attr("id") as string; - const $pickedColor = $(e.currentTarget).val() as string; +function handleColorInput(props: { + convertColor: boolean; +}): (e: Event) => void { + return (e) => { + const target = e.target as HTMLInputElement; + const key = target + ?.closest(".colorPicker") + ?.getAttribute("data-key") as ColorName; + + let color: string; + + if (props.convertColor) { + try { + color = Colors.convertStringToHex(target.value); + } catch { + Notifications.add("Invalid color format", 0); + color = "#000000"; + } + } else { + color = target.value; + } - updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor, true); -}); + updateColorPicker(key, color); + updateThemeColor(key, color); + }; +} -$( - ".pageSettings .section.themes .tabContainer .customTheme input[type=color]", -).on("change", (e) => { - const $colorVar = $(e.currentTarget).attr("id") as string; - const $pickedColor = $(e.currentTarget).val() as string; +const convertColorAndUpdate = handleColorInput({ convertColor: true }); +/*const pickerInputDebounced = debounce( + 100, + handleColorInput({ convertColor: false }), +); +*/ +const pickerInputDebounced = handleColorInput({ convertColor: false }); - updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor); -}); +qsa( + ".pageSettings .section.themes .tabContainer .customTheme input[type=color]", +) + .on("input", pickerInputDebounced) + .on("change", convertColorAndUpdate); -$(".pageSettings .section.themes .tabContainer .customTheme input.input") +qsa(".pageSettings .section.themes .tabContainer .customTheme input.input") .on("blur", (e) => { - if (e.target.id === "name") return; - const $colorVar = $(e.currentTarget).attr("id") as string; - const $pickedColor = $(e.currentTarget).val() as string; - - updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor); + if ((e.target as HTMLInputElement).id === "name") return; + convertColorAndUpdate(e); }) .on("keypress", function (e) { - if (e.target.id === "name") return; + const target = e.target as HTMLInputElement; + if (target.id === "name") return; if (e.code === "Enter") { - $(this).attr("disabled", "disabled"); - const $colorVar = $(e.currentTarget).attr("id") as string; - const $pickedColor = $(e.currentTarget).val() as string; - - updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor); - $(this).removeAttr("disabled"); + target.setAttribute("disabled", "disabled"); + convertColorAndUpdate(e); + target.removeAttribute("disabled"); } }); $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => { - // previewTheme(Config.theme); - // $("#currentTheme").attr("href", `themes/${Config.theme}.css`); - await ThemeController.loadStyle(Config.theme); - - ThemeController.colorVars.forEach((e) => { - document.documentElement.style.setProperty(e, ""); - }); + ThemeController.applyPreset(Config.theme); + const themeColors = getTheme(); - // setTimeout(async () => { - ChartController.updateAllChartColors(); - - const themeColors = await ThemeColors.getAll(); - - ThemeController.colorVars.forEach((colorName) => { - let color; - if (colorName === "--bg-color") { - color = themeColors.bg; - } else if (colorName === "--main-color") { - color = themeColors.main; - } else if (colorName === "--sub-color") { - color = themeColors.sub; - } else if (colorName === "--sub-alt-color") { - color = themeColors.subAlt; - } else if (colorName === "--caret-color") { - color = themeColors.caret; - } else if (colorName === "--text-color") { - color = themeColors.text; - } else if (colorName === "--error-color") { - color = themeColors.error; - } else if (colorName === "--error-extra-color") { - color = themeColors.errorExtra; - } else if (colorName === "--colorful-error-color") { - color = themeColors.colorfulError; - } else if (colorName === "--colorful-error-extra-color") { - color = themeColors.colorfulErrorExtra; - } - - updateColors($(".colorPicker #" + colorName).parent(), color as string); - }); - // }, 250); + Misc.typedKeys(themeColors) + .filter((key) => key !== "hasCss" && key !== "name") + .forEach((key) => + updateColorPicker(key, Colors.convertStringToHex(themeColors[key])), + ); }); $(".pageSettings #saveCustomThemeButton").on("click", async () => { diff --git a/frontend/src/ts/elements/theme-colors.ts b/frontend/src/ts/elements/theme-colors.ts deleted file mode 100644 index d95dc042c912..000000000000 --- a/frontend/src/ts/elements/theme-colors.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { - ColorName, - getThemeColors, - setThemeColors, - ThemeColors, -} from "../signals/theme"; - -export async function get(color: ColorName): Promise { - return getThemeColors()[color]; -} - -export async function getAll(): Promise { - return getThemeColors(); -} - -export function update(): void { - const st = getComputedStyle(document.body); - - setThemeColors({ - bg: st.getPropertyValue("--bg-color").replace(" ", ""), - main: st.getPropertyValue("--main-color").replace(" ", ""), - caret: st.getPropertyValue("--caret-color").replace(" ", ""), - sub: st.getPropertyValue("--sub-color").replace(" ", ""), - subAlt: st.getPropertyValue("--sub-alt-color").replace(" ", ""), - text: st.getPropertyValue("--text-color").replace(" ", ""), - error: st.getPropertyValue("--error-color").replace(" ", ""), - errorExtra: st.getPropertyValue("--error-extra-color").replace(" ", ""), - colorfulError: st - .getPropertyValue("--colorful-error-color") - .replace(" ", ""), - colorfulErrorExtra: st - .getPropertyValue("--colorful-error-extra-color") - .replace(" ", ""), - }); -} diff --git a/frontend/src/ts/elements/xp-bar.ts b/frontend/src/ts/elements/xp-bar.ts index 453ff8fc068f..1fcfd41950cc 100644 --- a/frontend/src/ts/elements/xp-bar.ts +++ b/frontend/src/ts/elements/xp-bar.ts @@ -1,9 +1,9 @@ import * as Misc from "../utils/misc"; import * as Levels from "../utils/levels"; -import { getAll } from "./theme-colors"; import { XpBreakdown } from "@monkeytype/schemas/results"; import { isSafeNumber } from "@monkeytype/util/numbers"; import { animate } from "animejs"; +import { getTheme } from "../signals/theme"; let breakdownVisible = false; let skip = false; @@ -409,7 +409,7 @@ async function animateXpBar( } async function flashLevel(): Promise { - const themecolors = await getAll(); + const themecolors = getTheme(); levelEl.textContent = `${parseInt(levelEl.textContent ?? "0") + 1}`; diff --git a/frontend/src/ts/hooks/effects.ts b/frontend/src/ts/hooks/effects.ts new file mode 100644 index 000000000000..dfee2e45e72e --- /dev/null +++ b/frontend/src/ts/hooks/effects.ts @@ -0,0 +1,38 @@ +import { createEffect, on } from "solid-js"; +import { debounce } from "throttle-debounce"; + +type Accessor = () => T; + +type OnValue = T extends readonly Accessor[] + ? //@ts-expect-error huh? + { [K in keyof T]: ReturnType } + : T extends Accessor + ? ReturnType + : never; + +export function createEffectOn< + T extends Accessor | readonly Accessor[], + U = void, +>( + deps: T, + fn: (value: OnValue, prev: OnValue | undefined, prevValue?: U) => U, + options: { defer?: boolean } = {}, +): void { + //@ts-expect-error huh? + createEffect(on(deps as unknown, fn as unknown, options)); +} + +export function createDebouncedEffectOn< + T extends Accessor | readonly Accessor[], + U = void, +>( + delay: number, + deps: T, + fn: (value: OnValue, prev: OnValue | undefined, prevValue?: U) => U, + options: { defer?: boolean } = {}, + debounceOptions: { atBegin?: boolean } = {}, +): void { + const debouncedFn = debounce(delay, fn, debounceOptions); + //@ts-expect-error huh? + createEffect(on(deps as unknown, debouncedFn as unknown, options)); +} diff --git a/frontend/src/ts/modals/mini-result-chart.ts b/frontend/src/ts/modals/mini-result-chart.ts index 81388b1cc309..14a090d215d9 100644 --- a/frontend/src/ts/modals/mini-result-chart.ts +++ b/frontend/src/ts/modals/mini-result-chart.ts @@ -38,8 +38,6 @@ function updateData(data: ChartData): void { ChartController.miniResult.getScale("wpm").min = 0; ChartController.miniResult.getScale("burst").min = 0; } - - void ChartController.miniResult.updateColors(); } export function show(data: ChartData): void { diff --git a/frontend/src/ts/modals/share-custom-theme.ts b/frontend/src/ts/modals/share-custom-theme.ts index e50185823474..14133066e408 100644 --- a/frontend/src/ts/modals/share-custom-theme.ts +++ b/frontend/src/ts/modals/share-custom-theme.ts @@ -2,7 +2,7 @@ import * as ThemeController from "../controllers/theme-controller"; import Config from "../config"; import * as Notifications from "../elements/notifications"; import AnimatedModal from "../utils/animated-modal"; -import { qsr } from "../utils/dom"; +import { getTheme } from "../signals/theme"; type State = { includeBackground: boolean; @@ -28,12 +28,7 @@ async function generateUrl(): Promise { s?: string; //size f?: object; //filter } = { - c: ThemeController.colorVars.map( - (color) => - qsr( - `.pageSettings .tabContent.customTheme #${color}[type='color']`, - ).getValue() as string, - ), + c: ThemeController.convertThemeToCustomColors(getTheme()), }; if (state.includeBackground) { diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts index 8c9f5e6bc616..b9742fda1503 100644 --- a/frontend/src/ts/modals/simple-modals.ts +++ b/frontend/src/ts/modals/simple-modals.ts @@ -27,7 +27,6 @@ import { } from "../utils/misc"; import * as CustomTextState from "../states/custom-text-name"; import * as ThemeController from "../controllers/theme-controller"; -import { CustomThemeColors } from "@monkeytype/schemas/configs"; import * as AccountSettings from "../pages/account-settings"; import { ExecReturn, @@ -46,8 +45,8 @@ import { goToPage } from "../pages/leaderboards"; import FileStorage from "../utils/file-storage"; import { z } from "zod"; import { remoteValidation } from "../utils/remote-validation"; -import { qsr } from "../utils/dom"; import { list, PopupKey, showPopup } from "./simple-modals-base"; +import { getTheme } from "../signals/theme"; export { list, showPopup }; export type { PopupKey }; @@ -1091,22 +1090,14 @@ list.updateCustomTheme = new SimpleModal({ }; } - let newColors: string[] = []; - if (updateColors === "true") { - for (const color of ThemeController.colorVars) { - newColors.push( - qsr( - `.pageSettings .tabContent.customTheme #${color}[type='color']`, - ).getValue() as string, - ); - } - } else { - newColors = customTheme.colors; - } + let newColors = + updateColors === "true" + ? ThemeController.convertThemeToCustomColors(getTheme()) + : customTheme.colors; const newTheme = { name: name.replaceAll(" ", "_"), - colors: newColors as CustomThemeColors, + colors: newColors, }; const validation = await DB.editCustomTheme(customTheme._id, newTheme); if (!validation) { @@ -1115,7 +1106,7 @@ list.updateCustomTheme = new SimpleModal({ message: "Failed to update custom theme", }; } - setConfig("customThemeColors", newColors as CustomThemeColors); + setConfig("customThemeColors", newColors); void ThemePicker.fillCustomButtons(); return { diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts index 10bd0ee800fe..87ad92d7d22a 100644 --- a/frontend/src/ts/pages/account.ts +++ b/frontend/src/ts/pages/account.ts @@ -184,15 +184,6 @@ function buildResultRow(result: SnapshotResult): HTMLTableRowElement { return element; } -async function updateChartColors(): Promise { - await ChartController.accountHistory.updateColors(); - await Misc.sleep(0); - await ChartController.accountActivity.updateColors(); - await Misc.sleep(0); - await ChartController.accountHistogram.updateColors(); - await Misc.sleep(0); -} - function reset(): void { historyTable.setData([]); historyTable.updateBody(); @@ -1271,7 +1262,6 @@ export const page = new Page({ }); await update().then(() => { - void updateChartColors(); qs(".pageAccount .content .accountVerificatinNotice")?.remove(); if (getAuthenticatedUser()?.emailVerified === false) { qs(".pageAccount .content")?.prependHtml( diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index 9fab875178a8..e28ce4e2a464 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -30,7 +30,7 @@ import { getActiveFunboxNames } from "../test/funbox/list"; import { SnapshotPreset } from "../constants/default-snapshot"; import { LayoutsList } from "../constants/layouts"; import { DataArrayPartial, Optgroup, OptionOptional } from "slim-select/store"; -import { Theme, ThemesList } from "../constants/themes"; +import { ThemesList, ThemeWithName } from "../constants/themes"; import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays"; import { LayoutName } from "@monkeytype/schemas/layouts"; import { LanguageGroupNames, LanguageGroups } from "../constants/languages"; @@ -614,7 +614,7 @@ export async function update( setActiveFunboxButton(); await Misc.sleep(0); ThemePicker.updateActiveTab(); - ThemePicker.setCustomInputs(true); + ThemePicker.setCustomInputs(); await CustomBackgroundPicker.updateUI(); await updateFilterSectionVisibility(); await CustomFontPicker.updateUI(); @@ -927,7 +927,7 @@ function getLayoutfluidDropdownData(): DataArrayPartial { } function getThemeDropdownData( - isActive: (theme: Theme) => boolean, + isActive: (theme: ThemeWithName) => boolean, ): DataArrayPartial { return ThemesList.map((theme) => ({ value: theme.name, diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts index ff04891be873..8204b30eba81 100644 --- a/frontend/src/ts/signals/core.ts +++ b/frontend/src/ts/signals/core.ts @@ -11,10 +11,14 @@ export const [getVersion, setVersion] = createSignal<{ }); export const [getThemeIndicator, setThemeIndicator] = createSignal<{ + /** + * human readable display name, this is not the ThemeName. + * e.g. the display is `serika dark` for the ThemeName `serika_dark` + */ text: string; isFavorite: boolean; }>({ - text: "unknown", + text: "serika dark", isFavorite: false, }); diff --git a/frontend/src/ts/signals/loader-bar.ts b/frontend/src/ts/signals/loader-bar.ts index cbefe5071230..c82bade1362e 100644 --- a/frontend/src/ts/signals/loader-bar.ts +++ b/frontend/src/ts/signals/loader-bar.ts @@ -8,20 +8,10 @@ type LoaderSignal = null | { const [getLoaderBarSignal, set] = createSignal(null); export function showLoaderBar(instant = false): void { - const current = getLoaderBarSignal(); - // Don't update if already showing (unless instant flag changed) - if (current?.visible && current.instant === instant) { - return; - } set({ visible: true, instant }); } export function hideLoaderBar(): void { - const current = getLoaderBarSignal(); - // Don't update if already hidden - if (current?.visible === false) { - return; - } set({ visible: false }); } diff --git a/frontend/src/ts/signals/theme.ts b/frontend/src/ts/signals/theme.ts index ab8f58adb607..0e1f5e75b743 100644 --- a/frontend/src/ts/signals/theme.ts +++ b/frontend/src/ts/signals/theme.ts @@ -1,6 +1,10 @@ import { createSignal } from "solid-js"; +import { ColorName, Theme } from "../constants/themes"; +import { ThemeName } from "@monkeytype/schemas/configs"; -const defaultTheme: ThemeColors = { +export type ThemeIdentifier = ThemeName | "custom"; +const defaultTheme: Theme & { name: ThemeIdentifier } = { + name: "serika_dark", bg: "#323437", main: "#e2b714", caret: "#e2b714", @@ -13,19 +17,13 @@ const defaultTheme: ThemeColors = { colorfulErrorExtra: "#7e2a33", }; -export type ThemeColors = { - bg: string; - main: string; - caret: string; - sub: string; - subAlt: string; - text: string; - error: string; - errorExtra: string; - colorfulError: string; - colorfulErrorExtra: string; -}; -export type ColorName = keyof ThemeColors; +export const [getTheme, setTheme] = createSignal< + Theme & { name: ThemeIdentifier } +>(defaultTheme); -export const [getThemeColors, setThemeColors] = - createSignal(defaultTheme); +export function updateThemeColor(key: ColorName, color: string): void { + setTheme((prev) => ({ + ...prev, + [key]: color, + })); +} diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts index 451887f7d296..f87a752c2cca 100644 --- a/frontend/src/ts/test/result.ts +++ b/frontend/src/ts/test/result.ts @@ -8,7 +8,6 @@ import * as DB from "../db"; import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar"; import * as Notifications from "../elements/notifications"; -import * as ThemeColors from "../elements/theme-colors"; import { isAuthenticated } from "../firebase"; import * as quoteRateModal from "../modals/quote-rate"; import * as GlarsesMode from "../states/glarses-mode"; @@ -49,6 +48,7 @@ import * as TestState from "./test-state"; import { blurInputElement } from "../input/input-element"; import * as ConnectionState from "../states/connection"; import { currentQuote } from "./test-words"; +import { getTheme } from "../signals/theme"; let result: CompletedEvent; let minChartVal: number; @@ -138,7 +138,7 @@ async function updateChartData(): Promise { chartData2.pop(); } - const subcolor = await ThemeColors.get("sub"); + const subcolor = getTheme().sub; if (Config.funbox.length > 0) { let content = ""; @@ -282,7 +282,7 @@ function applyFakeChartData(): void { } export async function updateChartPBLine(): Promise { - const themecolors = await ThemeColors.getAll(); + const themecolors = getTheme(); const localPb = await DB.getLocalPB( result.mode, result.mode2, @@ -725,7 +725,7 @@ async function updateTags(dontSave: boolean): Promise { ); // console.log("new pb for tag " + tag.display); } else { - const themecolors = await ThemeColors.getAll(); + const themecolors = getTheme(); resultAnnotation.push({ display: true, type: "line", @@ -1000,7 +1000,6 @@ export async function update( ((ChartController.result.options as PluginChartOptions<"line" | "scatter">) .plugins.annotation.annotations as AnnotationOptions<"line">[]) = resultAnnotation; - void ChartController.result.updateColors(); ChartController.result.resize(); if ( @@ -1333,7 +1332,6 @@ $(".pageTest #result .chart .chartLegend button").on("click", async (event) => { updateResultChartDataVisibility(); updateMinMaxChartValues(); applyMinMaxChartValues(); - void ChartController.result.updateColors(); ChartController.result.update(); }); @@ -1404,7 +1402,6 @@ ConfigEvent.subscribe(async ({ key }) => { ((ChartController.result.options as PluginChartOptions<"line" | "scatter">) .plugins.annotation.annotations as AnnotationOptions<"line">[]) = resultAnnotation; - void ChartController.result.updateColors(); ChartController.result.resize(); } }); diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts index eec120b2a2eb..4c660c1ea6c0 100644 --- a/frontend/src/ts/test/test-screenshot.ts +++ b/frontend/src/ts/test/test-screenshot.ts @@ -4,13 +4,13 @@ import * as Misc from "../utils/misc"; import { isAuthenticated } from "../firebase"; import { getActiveFunboxesWithFunction } from "./funbox/list"; import * as DB from "../db"; -import * as ThemeColors from "../elements/theme-colors"; import { format } from "date-fns/format"; import { getActivePage } from "../signals/core"; import { getHtmlByUserFlags } from "../controllers/user-flag-controller"; import * as Notifications from "../elements/notifications"; import { convertRemToPixels } from "../utils/numbers"; import * as TestState from "./test-state"; +import { getTheme } from "../signals/theme"; let revealReplay = false; let revertCookie = false; @@ -135,7 +135,7 @@ async function generateCanvas(): Promise { // Target the HTML root to include .customBackground const fullCanvas = await domToCanvas(root, { - backgroundColor: await ThemeColors.get("bg"), + backgroundColor: getTheme().bg, // Sharp output scale: window.devicePixelRatio ?? 1, style: { diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index efbe30db3784..9087193af650 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -1,5 +1,4 @@ import * as Notifications from "../elements/notifications"; -import * as ThemeColors from "../elements/theme-colors"; import Config, { setConfig } from "../config"; import * as TestWords from "./test-words"; import * as TestInput from "./test-input"; @@ -58,6 +57,7 @@ import * as ModesNotice from "../elements/modes-notice"; import * as Last10Average from "../elements/last-10-average"; import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer"; import { qsr } from "../utils/dom"; +import { getTheme } from "../signals/theme"; export const updateHintsPositionDebounced = Misc.debounceUntilResolved( updateHintsPosition, @@ -1421,7 +1421,7 @@ export async function applyBurstHeatmap(): Promise { burstlist[index] = Math.round(typingSpeedUnit.fromWpm(burst)); }); - const themeColors = await ThemeColors.getAll(); + const themeColors = getTheme(); let colors = [ themeColors.colorfulError, diff --git a/frontend/src/ts/utils/colors.ts b/frontend/src/ts/utils/colors.ts index 2dc62862085e..2a5d0b1ef294 100644 --- a/frontend/src/ts/utils/colors.ts +++ b/frontend/src/ts/utils/colors.ts @@ -109,7 +109,7 @@ export function hexToRgb(hex: string): * @param a The alpha component (0-1), optional. * @returns The hexadecimal color string (e.g., "#ff0000" for red or "#ff0000ff" for red with full opacity). */ -function rgbToHex(r: number, g: number, b: number, a?: number): string { +export function rgbToHex(r: number, g: number, b: number, a?: number): string { const hexR = Math.round(r).toString(16).padStart(2, "0"); const hexG = Math.round(g).toString(16).padStart(2, "0"); const hexB = Math.round(b).toString(16).padStart(2, "0"); @@ -238,26 +238,78 @@ export function isColorDark(hex: string): boolean { return hsl.lgt < 50; } +export function hslToRgb( + h: number, + s: number, + l: number, +): { r: number; g: number; b: number } { + const c = (1 - Math.abs(2 * l - 1)) * s; + const x = c * (1 - Math.abs(((h / 60) % 2) - 1)); + const m = l - c / 2; + + let r = 0, + g = 0, + b = 0; + + if (h < 60) [r, g, b] = [c, x, 0]; + else if (h < 120) [r, g, b] = [x, c, 0]; + else if (h < 180) [r, g, b] = [0, c, x]; + else if (h < 240) [r, g, b] = [0, x, c]; + else if (h < 300) [r, g, b] = [x, 0, c]; + else [r, g, b] = [c, 0, x]; + + return { + r: Math.round((r + m) * 255), + g: Math.round((g + m) * 255), + b: Math.round((b + m) * 255), + }; +} + /** - * Converts an RGB string (e.g., "rgb(255, 0, 0)") to a hexadecimal color string. - * @param rgb The RGB string. - * @returns The equivalent hexadecimal color string. + * some system color pickers return rgb or hsl values. We need to convert them to hex before storing + * @param color as hex, hsl or rgb + * @returns hex color + * @throws if the input color is not valid */ -export function rgbStringtoHex(rgb: string): string | undefined { - const match: RegExpMatchArray | null = rgb.match( - /^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/, - ); - if (match === null) return; - if (match.length < 3) return; - function hexCode(i: string): string { - // Take the last 2 characters and convert - // them to Hexadecimal. - return ("0" + parseInt(i).toString(16)).slice(-2); +export function convertStringToHex(color: string): string { + const input = color.trim().toLocaleLowerCase(); + if (/^#[0-9a-f]{6}$/i.test(input)) { + return input; + } + + if (/^#[0-9a-f]{3}$/i.test(input)) { + // Expand #rgb → #rrggbb + return ( + "#" + input[1] + input[1] + input[2] + input[2] + input[3] + input[3] + ); + } + + const rgbMatch = + input.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/) ?? + input.match(/^(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})$/); + + if (rgbMatch !== null) { + const clamp = (n: string): number => + Math.max(0, Math.min(255, Number.parseFloat(n))); + + const r = clamp(rgbMatch[1] as string); + const g = clamp(rgbMatch[2] as string); + const b = clamp(rgbMatch[3] as string); + return rgbToHex(r, g, b); + } + + const hslMatch = + input.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/) ?? + input.match(/^(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%$/); + + if (hslMatch) { + const clamp = (n: string): number => + Math.max(0, Math.min(255, Number.parseFloat(n))); + const h = Number.parseFloat(hslMatch[1] as string) % 360; + const s = clamp(hslMatch[2] as string) / 100; + const l = clamp(hslMatch[3] as string) / 100; + const { r, g, b } = hslToRgb(h, s, l); + return rgbToHex(r, g, b); } - return ( - "#" + - hexCode(match[1] as string) + - hexCode(match[2] as string) + - hexCode(match[3] as string) - ); + throw new Error(`Invalid color format: ${color}`); } diff --git a/frontend/static/themes/8008.css b/frontend/static/themes/8008.css deleted file mode 100644 index fd4aca04d459..000000000000 --- a/frontend/static/themes/8008.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #333a45; - --main-color: #f44c7f; - --caret-color: #f44c7f; - --sub-color: #939eae; - --sub-alt-color: #2e343d; - --text-color: #e9ecf0; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #c5da33; - --colorful-error-extra-color: #849224; -} diff --git a/frontend/static/themes/80s_after_dark.css b/frontend/static/themes/80s_after_dark.css deleted file mode 100644 index 77f05fac8b69..000000000000 --- a/frontend/static/themes/80s_after_dark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1b1d36; - --main-color: #fca6d1; - --caret-color: #99d6ea; - --sub-color: #99d6ea; - --sub-alt-color: #17182c; - --text-color: #e1e7ec; - --error-color: #fffb85; - --error-extra-color: #fffb85; - --colorful-error-color: #fffb85; - --colorful-error-extra-color: #fffb85; -} diff --git a/frontend/static/themes/9009.css b/frontend/static/themes/9009.css index 436b004b331a..f8162b7ffc41 100644 --- a/frontend/static/themes/9009.css +++ b/frontend/static/themes/9009.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #eeebe2; - --main-color: #080909; - --caret-color: #7fa480; - --sub-color: #99947f; - --sub-alt-color: #d3cfc1; - --text-color: #080909; - --error-color: #c87e74; - --error-extra-color: #a56961; - --colorful-error-color: #c87e74; - --colorful-error-extra-color: #a56961; -} - .word letter.incorrect { color: var(--error-color); } diff --git a/frontend/static/themes/aether.css b/frontend/static/themes/aether.css index efec89292264..d1e05f8ed290 100644 --- a/frontend/static/themes/aether.css +++ b/frontend/static/themes/aether.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #101820; - --main-color: #eedaea; - --caret-color: #eedaea; - --sub-color: #cf6bdd; - --sub-alt-color: #292136; - --text-color: #eedaea; - --error-color: #ff5253; - --error-extra-color: #e3002b; - --colorful-error-color: #ff5253; - --colorful-error-extra-color: #e3002b; -} - nav > .textButton:nth-child(1) { color: #e4002b; } diff --git a/frontend/static/themes/alduin.css b/frontend/static/themes/alduin.css deleted file mode 100644 index 6bda332f4c94..000000000000 --- a/frontend/static/themes/alduin.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1c1c1c; - --main-color: #dfd7af; - --caret-color: #e3e3e3; - --sub-color: #444444; - --sub-alt-color: #242424; - --text-color: #f5f3ed; - --error-color: #af5f5f; - --error-extra-color: #4d2113; - --colorful-error-color: #af5f5f; - --colorful-error-extra-color: #4d2113; -} diff --git a/frontend/static/themes/alpine.css b/frontend/static/themes/alpine.css deleted file mode 100644 index 63197adbf77d..000000000000 --- a/frontend/static/themes/alpine.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #6c687f; /*Background*/ - --main-color: #ffffff; /*Color after typing, monkeytype logo, WPM Number acc number etc*/ - --caret-color: #585568; /*Cursor Color*/ - --sub-color: #9994b8; - --sub-alt-color: #77738c; /*WPM text color of scrollbar and general color, before typed color*/ - --text-color: #ffffff; /*Color of text after hovering over it*/ - --error-color: #e32b2b; - --error-extra-color: #a62626; - --colorful-error-color: #e32b2b; - --colorful-error-extra-color: #a62626; -} diff --git a/frontend/static/themes/anti_hero.css b/frontend/static/themes/anti_hero.css deleted file mode 100644 index 6924dfa4a09e..000000000000 --- a/frontend/static/themes/anti_hero.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #00002e; - --main-color: #ffadad; - --caret-color: #ffffff; - --sub-color: #ff3d8b; - --sub-alt-color: #060548; - --text-color: #f1deef; - --error-color: #8fecff; - --error-extra-color: #558cab; - --colorful-error-color: #8fecff; - --colorful-error-extra-color: #558cab; -} diff --git a/frontend/static/themes/arch.css b/frontend/static/themes/arch.css deleted file mode 100644 index ad51ec5db202..000000000000 --- a/frontend/static/themes/arch.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0c0d11; - --main-color: #7ebab5; - --caret-color: #7ebab5; - --sub-color: #454864; - --sub-alt-color: #171a25; - --text-color: #f6f5f5; - --error-color: #ff4754; - --error-extra-color: #b02a33; - --colorful-error-color: #ff4754; - --colorful-error-extra-color: #b02a33; -} diff --git a/frontend/static/themes/aurora.css b/frontend/static/themes/aurora.css index 8a1cefa54046..2e22ecfa0e8e 100644 --- a/frontend/static/themes/aurora.css +++ b/frontend/static/themes/aurora.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #011926; - --main-color: #00e980; - --caret-color: #00e980; - --sub-color: #245c69; - --sub-alt-color: #000c13; - --text-color: #fff; - --error-color: #b94da1; - --error-extra-color: #9b3a76; - --colorful-error-color: #b94da1; - --colorful-error-extra-color: #9b3a76; -} - @keyframes aurora { 0% { color: #009fb4; diff --git a/frontend/static/themes/beach.css b/frontend/static/themes/beach.css index a742478206a1..8ed2f112d56f 100644 --- a/frontend/static/themes/beach.css +++ b/frontend/static/themes/beach.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #ffeead; - --main-color: #96ceb4; - --caret-color: #ffcc5c; - --sub-color: #ffcc5c; - --sub-alt-color: #f7dc8f; - --text-color: #5b7869; - --error-color: #ff6f69; - --error-extra-color: #ff6f69; - --colorful-error-color: #ff6f69; - --colorful-error-extra-color: #ff6f69; -} - nav > .textButton:nth-child(1), nav > .textButton:nth-child(2), nav > .textButton:nth-child(3), diff --git a/frontend/static/themes/bento.css b/frontend/static/themes/bento.css deleted file mode 100644 index 0d4e51bef9b1..000000000000 --- a/frontend/static/themes/bento.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #2d394d; - --main-color: #ff7a90; - --caret-color: #ff7a90; - --sub-color: #4a768d; - --sub-alt-color: #263041; - --text-color: #fffaf8; - --error-color: #ee2a3a; - --error-extra-color: #f04040; - --colorful-error-color: #fc2032; - --colorful-error-extra-color: #f04040; -} diff --git a/frontend/static/themes/bingsu.css b/frontend/static/themes/bingsu.css index 9cbd6d133546..fa16bdd1ef2b 100644 --- a/frontend/static/themes/bingsu.css +++ b/frontend/static/themes/bingsu.css @@ -1,17 +1,3 @@ -:root { - /* --bg-color: linear-gradient(215deg, #cbb8ba, #706768); */ - --bg-color: #b8a7aa; - --main-color: #83616e; - --caret-color: #ebe6ea; - --sub-color: #48373d; - --sub-alt-color: #ab989e; - --text-color: #ebe6ea; - --error-color: #921341; - --error-extra-color: #640b2c; - --colorful-error-color: #921341; - --colorful-error-extra-color: #640b2c; -} - /* .word.error{ border-bottom: double 4px var(--error-color); } */ diff --git a/frontend/static/themes/bliss.css b/frontend/static/themes/bliss.css deleted file mode 100644 index f6ea01b99ce7..000000000000 --- a/frontend/static/themes/bliss.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #262727; - --main-color: #f0d3c9; - --caret-color: #f0d3c9; - --sub-color: #665957; - --sub-alt-color: #343231; - --text-color: #fff; - --error-color: #bd4141; - --error-extra-color: #883434; - --colorful-error-color: #bd4141; - --colorful-error-extra-color: #883434; -} diff --git a/frontend/static/themes/blue_dolphin.css b/frontend/static/themes/blue_dolphin.css deleted file mode 100644 index 6328341ba60c..000000000000 --- a/frontend/static/themes/blue_dolphin.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #003950; - --main-color: #ffcefb; - --caret-color: #00bcd4; - --sub-color: #00e4ff; - --sub-alt-color: #014961; - --text-color: #82eaff; - --error-color: #ffbde6; - --error-extra-color: #ff8188; - --colorful-error-color: #d1a5fd; - --colorful-error-extra-color: #ff8188; -} diff --git a/frontend/static/themes/blueberry_dark.css b/frontend/static/themes/blueberry_dark.css index 346702c71f6a..4bb07d9f6a91 100644 --- a/frontend/static/themes/blueberry_dark.css +++ b/frontend/static/themes/blueberry_dark.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #212b42; - --main-color: #add7ff; - --caret-color: #962f7e; - --sub-color: #5c7da5; - --sub-alt-color: #1b2334; - --text-color: #91b4d5; - --error-color: #df4576; - --error-extra-color: #d996ac; - --colorful-error-color: #df4576; - --colorful-error-extra-color: #d996ac; -} - header #logo .bottom { color: #962f7e; } diff --git a/frontend/static/themes/blueberry_light.css b/frontend/static/themes/blueberry_light.css index 5b5e67b937da..c713fe897986 100644 --- a/frontend/static/themes/blueberry_light.css +++ b/frontend/static/themes/blueberry_light.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #dae0f5; - --main-color: #506477; - --caret-color: #df4576; - --sub-color: #92a4be; - --sub-alt-color: #c1c7df; - --text-color: #678198; - --error-color: #df4576; - --error-extra-color: #d996ac; - --colorful-error-color: #df4576; - --colorful-error-extra-color: #d996ac; -} - header #logo .bottom { color: #df4576; } diff --git a/frontend/static/themes/botanical.css b/frontend/static/themes/botanical.css deleted file mode 100644 index 0367232b1e4a..000000000000 --- a/frontend/static/themes/botanical.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #7b9c98; - --main-color: #eaf1f3; - --caret-color: #abc6c4; - --sub-color: #495755; - --sub-alt-color: #72908d; - --text-color: #eaf1f3; - --error-color: #f6c9b4; - --error-extra-color: #f59a71; - --colorful-error-color: #f6c9b4; - --colorful-error-extra-color: #f59a71; -} diff --git a/frontend/static/themes/bouquet.css b/frontend/static/themes/bouquet.css deleted file mode 100644 index e94eae80bf37..000000000000 --- a/frontend/static/themes/bouquet.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #173f35; - --main-color: #eaa09c; - --caret-color: #eaa09c; - --sub-color: #408e7b; - --sub-alt-color: #1f4e43; - --text-color: #e9e0d2; - --error-color: #d44729; - --error-extra-color: #8f2f19; - --colorful-error-color: #d44729; - --colorful-error-extra-color: #8f2f19; -} diff --git a/frontend/static/themes/breeze.css b/frontend/static/themes/breeze.css deleted file mode 100644 index 05b54f679975..000000000000 --- a/frontend/static/themes/breeze.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #e8d5c4; - --main-color: #7d67a9; - --caret-color: #7d67a9; - --sub-color: #3a98b9; - --sub-alt-color: #f6e6da; - --text-color: #1b4c5e; - --error-color: #7d67a9; - --error-extra-color: #9f3e6d; - --colorful-error-color: #f9f871; - --colorful-error-extra-color: #67dfa1; -} diff --git a/frontend/static/themes/bushido.css b/frontend/static/themes/bushido.css deleted file mode 100644 index 6f25cfb1dea7..000000000000 --- a/frontend/static/themes/bushido.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #242933; - --main-color: #ec4c56; - --caret-color: #ec4c56; - --sub-color: #596172; - --sub-alt-color: #1c222d; - --text-color: #f6f0e9; - --error-color: #ec4c56; - --error-extra-color: #9b333a; - --colorful-error-color: #ecdc4c; - --colorful-error-extra-color: #bdb03d; -} diff --git a/frontend/static/themes/cafe.css b/frontend/static/themes/cafe.css deleted file mode 100644 index 402443c17582..000000000000 --- a/frontend/static/themes/cafe.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #ceb18d; - --main-color: #14120f; - --caret-color: #14120f; - --sub-color: #d4d2d1; - --sub-alt-color: #bba180; - --text-color: #14120f; - --error-color: #c82931; - --error-extra-color: #ac1823; - --colorful-error-color: #c82931; - --colorful-error-extra-color: #ac1823; -} diff --git a/frontend/static/themes/camping.css b/frontend/static/themes/camping.css index d00258c20583..fb3dbdd0eea8 100644 --- a/frontend/static/themes/camping.css +++ b/frontend/static/themes/camping.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #faf1e4; - --main-color: #618c56; - --caret-color: #618c56; - --sub-color: #c2b8aa; - --sub-alt-color: #e7dccb; - --text-color: #3c403b; - --error-color: #ad4f4e; - --error-extra-color: #7e3a39; - --colorful-error-color: #ad4f4e; - --colorful-error-extra-color: #7e3a39; -} - header #logo .bottom { color: #ad4f4e; } diff --git a/frontend/static/themes/carbon.css b/frontend/static/themes/carbon.css deleted file mode 100644 index 73724e4070b7..000000000000 --- a/frontend/static/themes/carbon.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #313131; - --main-color: #f66e0d; - --caret-color: #f66e0d; - --sub-color: #616161; - --sub-alt-color: #2b2b2b; - --text-color: #f5e6c8; - --error-color: #e72d2d; - --error-extra-color: #7e2a33; - --colorful-error-color: #e72d2d; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/catppuccin.css b/frontend/static/themes/catppuccin.css index 9c9218f979a7..d3768ebccf6c 100644 --- a/frontend/static/themes/catppuccin.css +++ b/frontend/static/themes/catppuccin.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #1e1e2e; - --caret-color: #f2cdcd; - --main-color: #cba6f7; - --sub-color: #7f849c; - --sub-alt-color: #181825; - --text-color: #cdd6f4; - --error-color: #f38ba8; - --error-extra-color: #eba0ac; - --colorful-error-color: #f38ba8; - --colorful-error-extra-color: #eba0ac; -} - nav .view-start { color: #f38ba8; } diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css index b83c69612526..9f8eb838c9ef 100644 --- a/frontend/static/themes/chaos_theory.css +++ b/frontend/static/themes/chaos_theory.css @@ -1,17 +1,3 @@ -:root { - --bg-color: #141221; - --main-color: #fd77d7; - --caret-color: #dde5ed; - --text-color: #dde5ed; - --error-color: #fd77d7; - --sub-color: #676e8a; - --sub-alt-color: #1e1d2f; - --error-color: #ff5869; - --error-extra-color: #b03c47; - --colorful-error-color: #ff5869; - --colorful-error-extra-color: #b03c47; -} - header #logo .text { transform: rotateY(180deg); unicode-bidi: bidi-override; diff --git a/frontend/static/themes/cheesecake.css b/frontend/static/themes/cheesecake.css index b9f7c0669e51..661de9d00804 100644 --- a/frontend/static/themes/cheesecake.css +++ b/frontend/static/themes/cheesecake.css @@ -1,16 +1,4 @@ -:root { - --bg-color: #fdf0d5; - --main-color: #8e2949; - --caret-color: #892948; - --sub-color: #d91c81; - --sub-alt-color: #f3e2bf; - --text-color: #3a3335; - --error-color: #5cf074; - --error-extra-color: #5cf074; - --colorful-error-color: #5cf074; - --colorful-error-extra-color: #5cf074; -} -@keyframes rgb { +@keyframes cheesecake { 0% { fill: #ff0090; } @@ -44,5 +32,5 @@ } header > div#logo > div.icon > svg path { - animation: 10s linear infinite 0.1s rgb; + animation: 10s linear infinite 0.1s cheesecake; } diff --git a/frontend/static/themes/cherry_blossom.css b/frontend/static/themes/cherry_blossom.css deleted file mode 100644 index 21beeee6ad8f..000000000000 --- a/frontend/static/themes/cherry_blossom.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #323437; - --main-color: #d65ccc; - --caret-color: #ffffff; - --sub-color: #787d82; - --sub-alt-color: #2d2f31; - --text-color: #d1d0c5; - --error-color: #ca4754; - --error-extra-color: #d32738; - --colorful-error-color: #ec182d; - --colorful-error-extra-color: #6e0c16; -} diff --git a/frontend/static/themes/comfy.css b/frontend/static/themes/comfy.css deleted file mode 100644 index 3018531555d6..000000000000 --- a/frontend/static/themes/comfy.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #4a5b6e; - --main-color: #f8cdc6; - --caret-color: #9ec1cc; - --sub-color: #9ec1cc; - --sub-alt-color: #425366; - --text-color: #f5efee; - --error-color: #c9465e; - --error-extra-color: #c9465e; - --colorful-error-color: #c9465e; - --colorful-error-extra-color: #c9465e; -} diff --git a/frontend/static/themes/copper.css b/frontend/static/themes/copper.css deleted file mode 100644 index 0ced080bd018..000000000000 --- a/frontend/static/themes/copper.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #442f29; - --main-color: #b46a55; - --caret-color: #c25c42; - --sub-color: #7ebab5; - --sub-alt-color: #50362e; - --text-color: #e7e0de; - --error-color: #a32424; - --error-extra-color: #ec0909; - --colorful-error-color: #a32424; - --colorful-error-extra-color: #ec0909; -} diff --git a/frontend/static/themes/creamsicle.css b/frontend/static/themes/creamsicle.css deleted file mode 100644 index 49aaad043af6..000000000000 --- a/frontend/static/themes/creamsicle.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #ff9869; - --main-color: #fcfcf8; - --caret-color: #fcfcf8; - --sub-color: #ff661f; - --sub-alt-color: #fe8954; - --text-color: #fcfcf8; - --error-color: #6a0dad; - --error-extra-color: #6a0dad; - --colorful-error-color: #6a0dad; - --colorful-error-extra-color: #6a0dad; -} diff --git a/frontend/static/themes/cy_red.css b/frontend/static/themes/cy_red.css deleted file mode 100644 index 0b41818d3d8a..000000000000 --- a/frontend/static/themes/cy_red.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #6e2626; - --main-color: #e55050; - --caret-color: #541d1d; - --sub-color: #ff6060; - --sub-alt-color: #3f1616; - --text-color: #ffaaaa; - --error-color: #919fd9; - --error-extra-color: #4d5d9e; - --colorful-error-color: #919fd9; - --colorful-error-extra-color: #4d5d9e; -} diff --git a/frontend/static/themes/cyberspace.css b/frontend/static/themes/cyberspace.css deleted file mode 100644 index 6c7b3e30c9b4..000000000000 --- a/frontend/static/themes/cyberspace.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #181c18; - --main-color: #00ce7c; - --caret-color: #00ce7c; - --sub-color: #9578d3; - --sub-alt-color: #131613; - --text-color: #c2fbe1; - --error-color: #ff5f5f; - --error-extra-color: #d22a2a; - --colorful-error-color: #ff5f5f; - --colorful-error-extra-color: #d22a2a; -} diff --git a/frontend/static/themes/dark.css b/frontend/static/themes/dark.css deleted file mode 100644 index 591c1fc5b0ee..000000000000 --- a/frontend/static/themes/dark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #111; - --main-color: #eee; - --caret-color: #eee; - --sub-color: #444; - --sub-alt-color: #191919; - --text-color: #eee; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} diff --git a/frontend/static/themes/dark_magic_girl.css b/frontend/static/themes/dark_magic_girl.css deleted file mode 100644 index 2999ff4fac67..000000000000 --- a/frontend/static/themes/dark_magic_girl.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #091f2c; - --main-color: #f5b1cc; - --caret-color: #a288d9; - --sub-color: #93e8d3; - --sub-alt-color: #071823; - --text-color: #a288d9; - --error-color: #e45c96; - --error-extra-color: #e45c96; - --colorful-error-color: #00b398; - --colorful-error-extra-color: #e45c96; -} diff --git a/frontend/static/themes/dark_note.css b/frontend/static/themes/dark_note.css index 5b156b33ebbf..99fa4f7fd1bf 100644 --- a/frontend/static/themes/dark_note.css +++ b/frontend/static/themes/dark_note.css @@ -1,21 +1,3 @@ -:root { - --bg-color: #1f1f1f; - --main-color: #f2c17b; - --caret-color: #e3dce0; - --sub-color: #768f95; - --sub-alt-color: #141414; - --text-color: #d2dff4; - --error-color: #ff0000; - --error-extra-color: #588498; - --colorful-error-color: var(--error-color); - --colorful-error-extra-color: var(--error-extra-color); - /* custom vars */ - --theme-bg-stripe-color: #434653; - --theme-bg-stripe-opacity: 0.1; - --theme-accent-stripe-color: #bf8200; - --current-color: var(--text-color); -} - .colorfulMode { --current-color: var(--main-color); } diff --git a/frontend/static/themes/darling.css b/frontend/static/themes/darling.css deleted file mode 100644 index bb0ffea13c3d..000000000000 --- a/frontend/static/themes/darling.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #fec8cd; - --main-color: #ffffff; - --caret-color: #ffffff; - --sub-color: #a30000; - --sub-alt-color: #f2babd; - --text-color: #ffffff; - --error-color: #2e7dde; - --error-extra-color: #2e7dde; - --colorful-error-color: #2e7dde; - --colorful-error-extra-color: #2e7dde; -} diff --git a/frontend/static/themes/deku.css b/frontend/static/themes/deku.css deleted file mode 100644 index a321229d6603..000000000000 --- a/frontend/static/themes/deku.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #058b8c; - --main-color: #b63530; - --caret-color: #b63530; - --sub-color: #255458; - --sub-alt-color: #0e7d7e; - --text-color: #f7f2ea; - --error-color: #b63530; - --error-extra-color: #530e0e; - --colorful-error-color: #ddca1f; - --colorful-error-extra-color: #8f8610; -} diff --git a/frontend/static/themes/desert_oasis.css b/frontend/static/themes/desert_oasis.css index 3be4a540b3b5..ade5493f55c3 100644 --- a/frontend/static/themes/desert_oasis.css +++ b/frontend/static/themes/desert_oasis.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #fff2d5; /*Background*/ - --main-color: #d19d01; /*Color after typing, monkeytype logo, WPM Number acc number etc*/ - --caret-color: #3a87fe; /*Cursor Color*/ - --sub-color: #0061fe; /*WPM text color of scrollbar and general color, before typed color*/ - --sub-alt-color: #eddebc; - --text-color: #332800; /*Color of text after hovering over it*/ - --error-color: #76bb40; - --error-extra-color: #4e7a27; - --colorful-error-color: #76bb40; - --colorful-error-extra-color: #4e7a27; -} - nav > .textButton:nth-child(1) { color: #76bb40; } diff --git a/frontend/static/themes/dev.css b/frontend/static/themes/dev.css deleted file mode 100644 index b43a50b429cd..000000000000 --- a/frontend/static/themes/dev.css +++ /dev/null @@ -1,13 +0,0 @@ -/*this theme is based on "Dev theme by KDr3w" color pallet: https://www.deviantart.com/kdr3w/art/Dev-825722799 */ -:root { - --bg-color: #1b2028; - --main-color: #23a9d5; - --caret-color: #4b5975; - --sub-color: #4b5975; - --sub-alt-color: #151a21; - --text-color: #ccccb5; - --error-color: #b81b2c; - --error-extra-color: #84131f; - --colorful-error-color: #b81b2c; - --colorful-error-extra-color: #84131f; -} diff --git a/frontend/static/themes/diner.css b/frontend/static/themes/diner.css deleted file mode 100644 index 9f218e2fbe61..000000000000 --- a/frontend/static/themes/diner.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #537997; - --main-color: #c3af5b; - --caret-color: #ad5145; - --sub-color: #445c7f; - --sub-alt-color: #4d6f8b; - --text-color: #dfdbc8; - --error-color: #ad5145; - --error-extra-color: #7e2a33; - --colorful-error-color: #ad5145; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/dino.css b/frontend/static/themes/dino.css deleted file mode 100644 index 74625a42a5de..000000000000 --- a/frontend/static/themes/dino.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #ffffff; - --main-color: #40d672; - --caret-color: #40d672; - --sub-color: #d5d5d5; - --sub-alt-color: #cafad8; - --text-color: #1d221f; - --error-color: #ff5f5f; - --error-extra-color: #d22a2a; - --colorful-error-color: #ff5f5f; - --colorful-error-extra-color: #d22a2a; -} diff --git a/frontend/static/themes/discord.css b/frontend/static/themes/discord.css deleted file mode 100644 index 7384caf097d4..000000000000 --- a/frontend/static/themes/discord.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #313338; - --main-color: #5a65ea; - --caret-color: #5a65ea; - --sub-color: #565861; - --sub-alt-color: #2b2d31; - --text-color: #dcdee3; - --error-color: #df4f4b; - --error-extra-color: #df4f4b; - --colorful-error-color: #df4f4b; - --colorful-error-extra-color: #df4f4b; -} diff --git a/frontend/static/themes/dmg.css b/frontend/static/themes/dmg.css index 265e47bd1243..342d5acc11b9 100644 --- a/frontend/static/themes/dmg.css +++ b/frontend/static/themes/dmg.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #dadbdc; - --main-color: #ae185e; - --caret-color: #384693; - --sub-color: #3846b1; - --sub-alt-color: #bec1d2; - --text-color: #414141; - --error-color: #ae185e; - --error-extra-color: #93335c; - --colorful-error-color: #80a053; - --colorful-error-extra-color: #306230; -} - nav { gap: 0.5rem; } diff --git a/frontend/static/themes/dollar.css b/frontend/static/themes/dollar.css deleted file mode 100644 index 07511e4ce4be..000000000000 --- a/frontend/static/themes/dollar.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #e4e4d4; - --main-color: #6b886b; - --caret-color: #424643; - --sub-color: #8a9b69; - --sub-alt-color: #cbd0bf; - --text-color: #555a56; - --error-color: #d60000; - --error-extra-color: #f68484; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/dots.css b/frontend/static/themes/dots.css index fc10096afd99..4c6c27df26a7 100644 --- a/frontend/static/themes/dots.css +++ b/frontend/static/themes/dots.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #121520; - --caret-color: #fff; - --main-color: #fff; - --sub-color: #676e8a; - --sub-alt-color: #1b1e2c; - --text-color: #fff; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} - nav { gap: 0.5rem; } diff --git a/frontend/static/themes/dracula.css b/frontend/static/themes/dracula.css index c667d3df568d..67871079376b 100644 --- a/frontend/static/themes/dracula.css +++ b/frontend/static/themes/dracula.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #282a36; - --main-color: #bd93f9; - --caret-color: #bd93f9; - --sub-color: #6272a4; - --sub-alt-color: #20222c; - --text-color: #f8f8f2; - --error-color: #ff5555; - --error-extra-color: #f1fa8c; - --colorful-error-color: #ff5555; - --colorful-error-extra-color: #f1fa8c; -} - nav > .textButton:nth-child(1) { color: #ec75c4; } diff --git a/frontend/static/themes/drowning.css b/frontend/static/themes/drowning.css deleted file mode 100644 index dc1f1228212e..000000000000 --- a/frontend/static/themes/drowning.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #191826; - --main-color: #4a6fb5; - --caret-color: #4f85e8; - --sub-color: #50688c; - --sub-alt-color: #1e1f2f; - --text-color: #9393a7; - --error-color: #be555f; - --error-extra-color: #7e2a33; - --colorful-error-color: #be555f; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/dualshot.css b/frontend/static/themes/dualshot.css index 1fb26f432af5..a33e7487807d 100644 --- a/frontend/static/themes/dualshot.css +++ b/frontend/static/themes/dualshot.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #737373; - --main-color: #212222; - --caret-color: #212222; - --sub-color: #aaaaaa; - --sub-alt-color: #646464; - --text-color: #212222; - --error-color: #c82931; - --error-extra-color: #ac1823; - --colorful-error-color: #c82931; - --colorful-error-extra-color: #ac1823; -} - nav > .textButton:nth-child(1) { color: #2884bb; } diff --git a/frontend/static/themes/earthsong.css b/frontend/static/themes/earthsong.css deleted file mode 100644 index fe2a0dc47b26..000000000000 --- a/frontend/static/themes/earthsong.css +++ /dev/null @@ -1,13 +0,0 @@ -:root { - /*Personal preference: 'flip test colors'= on*/ - --bg-color: #292521; - --main-color: #509452; - --caret-color: #1298ba; - --sub-color: #f5ae2d; - --sub-alt-color: #1d1b18; - --text-color: #e6c7a8; - --error-color: #7e2a33; - --error-extra-color: #ff645a; - --colorful-error-color: #7e2a33; - --colorful-error-extra-color: #ff645a; -} diff --git a/frontend/static/themes/everblush.css b/frontend/static/themes/everblush.css deleted file mode 100644 index 6632386efc6c..000000000000 --- a/frontend/static/themes/everblush.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #141b1e; - --caret-color: #6cbfbf; - --main-color: #8ccf7e; - --sub-color: #838887; - --sub-alt-color: #232a2d; - --text-color: #dadada; - --error-color: #e57474; - --error-extra-color: #ef7e7e; - --colorful-error-color: #e57474; - --colorful-error-extra-color: #ef7e7e; -} diff --git a/frontend/static/themes/evil_eye.css b/frontend/static/themes/evil_eye.css deleted file mode 100644 index 6c69b6c6c907..000000000000 --- a/frontend/static/themes/evil_eye.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0084c2; - --main-color: #f7f2ea; - --caret-color: #f7f2ea; - --sub-color: #01589f; - --sub-alt-color: #0c79be; - --text-color: #171718; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/ez_mode.css b/frontend/static/themes/ez_mode.css index c81d5c1788aa..c84b5bf0bd69 100644 --- a/frontend/static/themes/ez_mode.css +++ b/frontend/static/themes/ez_mode.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #0068c6; - --main-color: #fa62d5; - --caret-color: #4ddb47; - --sub-color: #138bf7; - --sub-alt-color: #005bac; - --text-color: #ffffff; - --error-color: #4ddb47; - --error-extra-color: #42ba3b; - --colorful-error-color: #4ddb47; - --colorful-error-extra-color: #42ba3b; -} - .pageSettings .section h1 { color: var(--text-color); } diff --git a/frontend/static/themes/fire.css b/frontend/static/themes/fire.css index 944e384d9a2b..2b93ce928502 100644 --- a/frontend/static/themes/fire.css +++ b/frontend/static/themes/fire.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #0f0000; - --main-color: #b31313; - --caret-color: #b31313; - --sub-color: #683434; - --sub-alt-color: #200a0a; - --text-color: #ffffff; - --error-color: #2f3cb6; - --error-extra-color: #434a8f; - --colorful-error-color: #2f3cb6; - --colorful-error-extra-color: #434a8f; -} - @keyframes fire { 0% { color: #b31313; diff --git a/frontend/static/themes/fledgling.css b/frontend/static/themes/fledgling.css deleted file mode 100644 index 2fc7ba576eeb..000000000000 --- a/frontend/static/themes/fledgling.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #3b363f; - --main-color: #fc6e83; - --caret-color: #474747; - --sub-color: #8e5568; - --sub-alt-color: #332e38; - --text-color: #e6d5d3; - --error-color: #f52443; - --error-extra-color: #bd001c; - --colorful-error-color: #ff0a2f; - --colorful-error-extra-color: #000000; -} diff --git a/frontend/static/themes/fleuriste.css b/frontend/static/themes/fleuriste.css deleted file mode 100644 index 259db5bc494f..000000000000 --- a/frontend/static/themes/fleuriste.css +++ /dev/null @@ -1,19 +0,0 @@ -:root { - --bg-color: #c6b294; - --main-color: #405a52; - --caret-color: #8a785b; - --sub-color: #64374d; - --sub-alt-color: #b4a389; - --text-color: #091914; - --error-color: #990000; - --error-extra-color: #8a1414; - --colorful-error-color: #a63a3a; - --colorful-error-extra-color: #bd4c4c; -} - -/* nav .textButton:nth-child(1, 3, 5) { - background: #405a52; -} -nav .textButton:nth-child(2, 4) { - background: #64374d; -} */ diff --git a/frontend/static/themes/floret.css b/frontend/static/themes/floret.css deleted file mode 100644 index a070a041105e..000000000000 --- a/frontend/static/themes/floret.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #00272c; - --main-color: #ffdd6d; - --caret-color: #c3bd40; - --sub-color: #779097; - --sub-alt-color: #173033; - --text-color: #e5e5e5; - --error-color: #8a4000; - --error-extra-color: #00708d; - --colorful-error-color: #8a4000; - --colorful-error-extra-color: #628b96; -} diff --git a/frontend/static/themes/froyo.css b/frontend/static/themes/froyo.css index c2852315ebb6..62d3fd73822a 100644 --- a/frontend/static/themes/froyo.css +++ b/frontend/static/themes/froyo.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #e1dacb; - --main-color: #7b7d7d; - --caret-color: #7b7d7d; - --sub-color: #b29c5e; - --sub-alt-color: #d3cdc1; - --text-color: #7b7d7d; - --error-color: #f28578; - --error-extra-color: #d56558; - --colorful-error-color: #f28578; - --colorful-error-extra-color: #d56558; -} - nav > .textButton:nth-child(1) { color: #ff7e73; } diff --git a/frontend/static/themes/frozen_llama.css b/frontend/static/themes/frozen_llama.css deleted file mode 100644 index 7b0d39917d9d..000000000000 --- a/frontend/static/themes/frozen_llama.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #9bf2ea; - --main-color: #6d44a6; - --caret-color: #ffffff; - --sub-color: #b690fd; - --sub-alt-color: #7fe7dd; - --text-color: #ffffff; - --error-color: #e42629; - --error-extra-color: #e42629; - --colorful-error-color: #e42629; - --colorful-error-extra-color: #e42629; -} diff --git a/frontend/static/themes/fruit_chew.css b/frontend/static/themes/fruit_chew.css index 07043e552bf6..e62daddc3e19 100644 --- a/frontend/static/themes/fruit_chew.css +++ b/frontend/static/themes/fruit_chew.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #d6d3d6; - --main-color: #5c1e5f; - --caret-color: #b92221; - --sub-color: #b49cb5; - --sub-alt-color: #cabfca; - --text-color: #282528; - --error-color: #bd2621; - --error-extra-color: #a62626; - --colorful-error-color: #bd2621; - --colorful-error-extra-color: #a62626; -} - nav > .textButton:nth-child(1) { color: #a6bf50; } diff --git a/frontend/static/themes/fundamentals.css b/frontend/static/themes/fundamentals.css index 7c960443ef61..94cb67db41e2 100644 --- a/frontend/static/themes/fundamentals.css +++ b/frontend/static/themes/fundamentals.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #727474; - --main-color: #7fa482; - --caret-color: #196378; - --sub-color: #cac4be; - --sub-alt-color: #666868; - --text-color: #131313; - --error-color: #5e477c; - --error-extra-color: #413157; - --colorful-error-color: #5e477c; - --colorful-error-extra-color: #413157; -} - header #logo .bottom { color: #196378; } diff --git a/frontend/static/themes/future_funk.css b/frontend/static/themes/future_funk.css index ba9e5a5496d0..2be582304cb0 100644 --- a/frontend/static/themes/future_funk.css +++ b/frontend/static/themes/future_funk.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #2e1a47; - --main-color: #f7f2ea; - --caret-color: #f7f2ea; - --sub-color: #c18fff; - --sub-alt-color: #27173c; - --text-color: #f7f2ea; - --error-color: #f04e98; - --error-extra-color: #bd1c66; - --colorful-error-color: #f04e98; - --colorful-error-extra-color: #bd1c66; -} - nav > .textButton:nth-child(1) { color: #f04e98; } diff --git a/frontend/static/themes/github.css b/frontend/static/themes/github.css deleted file mode 100644 index c5a670722837..000000000000 --- a/frontend/static/themes/github.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #212830; - --main-color: #41ce5c; - --caret-color: #41ce5c; - --sub-color: #788386; - --sub-alt-color: #141b23; - --text-color: #ccdae6; - --error-color: #c23e3a; - --error-extra-color: #c23e3a; - --colorful-error-color: #c23e3a; - --colorful-error-extra-color: #c23e3a; -} diff --git a/frontend/static/themes/godspeed.css b/frontend/static/themes/godspeed.css deleted file mode 100644 index 079d593dc57c..000000000000 --- a/frontend/static/themes/godspeed.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #eae4cf; - --main-color: #9abbcd; - --caret-color: #f4d476; - --sub-color: #ada998; - --sub-alt-color: #ded9c9; - --text-color: #646669; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/graen.css b/frontend/static/themes/graen.css index 45cb11e214ec..ba4b2cc72b00 100644 --- a/frontend/static/themes/graen.css +++ b/frontend/static/themes/graen.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #303c36; - --main-color: #a59682; - --caret-color: #601420; - --sub-color: #181d1a; - --sub-alt-color: #36453c; - --text-color: #a59682; - --error-color: #601420; - --error-extra-color: #5f0715; - --colorful-error-color: #601420; - --colorful-error-extra-color: #5f0715; -} - nav > .textButton:nth-child(1), nav > .textButton:nth-child(2), nav > .textButton:nth-child(3), diff --git a/frontend/static/themes/grand_prix.css b/frontend/static/themes/grand_prix.css deleted file mode 100644 index 5a956a0389f9..000000000000 --- a/frontend/static/themes/grand_prix.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #36475c; - --main-color: #c0d036; - --caret-color: #c0d036; - --sub-color: #5c6c80; - --sub-alt-color: #42536b; - --text-color: #c1c7d7; - --error-color: #fc5727; - --error-extra-color: #fc5727; - --colorful-error-color: #fc5727; - --colorful-error-extra-color: #fc5727; -} diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css index 92b6b23b5ccc..aae91a27b7e7 100644 --- a/frontend/static/themes/grape.css +++ b/frontend/static/themes/grape.css @@ -1,17 +1,4 @@ -:root { - --bg-color: #2c003e; - --main-color: #ff8f00; - --caret-color: #ff8f00; - --sub-color: #6e225e; - --sub-alt-color: #1f002d; - --text-color: #fff; - --error-color: #ff4081; - --error-extra-color: #bf2054; - --colorful-error-color: #ff4081; - --colorful-error-extra-color: #bf2054; -} - -@keyframes pastel { +@keyframes grape { 0% { color: #00b8d4; } @@ -29,7 +16,7 @@ } } -@keyframes pastel-bg { +@keyframes grape-bg { 0% { background: #00b8d4; } @@ -52,7 +39,7 @@ .pageSettings .section .buttons .button.active, .pageSettings .section.languages .buttons .language.active, .pageAccount .group.filterButtons .buttons .button.active { - animation: pastel-bg 5s linear infinite; + animation: grape-bg 5s linear infinite; } header.focus .button.discord::after, @@ -69,17 +56,17 @@ header .config .group .buttons .textButton:hover, footer .textButton:hover, footer button.text:hover, a:not(.button):hover { - animation: pastel 5s linear infinite; + animation: grape 5s linear infinite; } #words { - --correct-letter-animation: pastel 5s linear infinite; + --correct-letter-animation: grape 5s linear infinite; } #words.flipped { --untyped-letter-color: var(--sub-color); --correct-letter-animation: none; - --untyped-letter-animation: pastel 5s linear infinite; + --untyped-letter-animation: grape 5s linear infinite; } #words .word.typed letter.correct, @@ -87,7 +74,7 @@ a:not(.button):hover { #words.highlight-next-word .word.typed letter, #words.highlight-next-two-words .word.typed letter, #words.highlight-next-three-words .word.typed letter { - animation: pastel 5s linear infinite; + animation: grape 5s linear infinite; } #words.flipped .word.typed letter { @@ -96,5 +83,5 @@ a:not(.button):hover { #words.highlight-off .word letter, #words.highlight-off .word.typed letter { - animation: pastel 5s linear infinite; + animation: grape 5s linear infinite; } diff --git a/frontend/static/themes/gruvbox_dark.css b/frontend/static/themes/gruvbox_dark.css deleted file mode 100644 index 3f82cb9eb96e..000000000000 --- a/frontend/static/themes/gruvbox_dark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #282828; - --main-color: #d79921; - --caret-color: #fabd2f; - --sub-color: #665c54; - --sub-alt-color: #212121; - --text-color: #ebdbb2; - --error-color: #fb4934; - --error-extra-color: #cc241d; - --colorful-error-color: #cc241d; - --colorful-error-extra-color: #9d0006; -} diff --git a/frontend/static/themes/gruvbox_light.css b/frontend/static/themes/gruvbox_light.css deleted file mode 100644 index 0138fd32865c..000000000000 --- a/frontend/static/themes/gruvbox_light.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #fbf1c7; - --main-color: #689d6a; - --caret-color: #689d6a; - --sub-color: #a89984; - --sub-alt-color: #daceae; - --text-color: #3c3836; - --error-color: #cc241d; - --error-extra-color: #9d0006; - --colorful-error-color: #cc241d; - --colorful-error-extra-color: #9d0006; -} diff --git a/frontend/static/themes/hammerhead.css b/frontend/static/themes/hammerhead.css deleted file mode 100644 index 5eb2d60f5a73..000000000000 --- a/frontend/static/themes/hammerhead.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #030613; - --main-color: #4fcdb9; - --caret-color: #4fcdb9; - --sub-color: #213c53; - --sub-alt-color: #0a1928; - --text-color: #e2f1f5; - --error-color: #e32b2b; - --error-extra-color: #a62626; - --colorful-error-color: #e32b2b; - --colorful-error-extra-color: #a62626; -} diff --git a/frontend/static/themes/hanok.css b/frontend/static/themes/hanok.css deleted file mode 100644 index 5493fb1fc4f3..000000000000 --- a/frontend/static/themes/hanok.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #d8d2c3; - --main-color: #513a2a; - --caret-color: #513a2a; - --sub-color: #8b6f5c; - --sub-alt-color: #cdc0af; - --text-color: #393b3b; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/hedge.css b/frontend/static/themes/hedge.css deleted file mode 100644 index f71bcf40d7c5..000000000000 --- a/frontend/static/themes/hedge.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #415e31; - --main-color: #6a994e; - --caret-color: #f2efbb; - --sub-color: #ede5b4; - --sub-alt-color: #38502a; - --text-color: #f7f1d6; - --error-color: #ca3d3f; - --error-extra-color: #782832; - --colorful-error-color: #e76f51; - --colorful-error-extra-color: #f4a261; -} diff --git a/frontend/static/themes/honey.css b/frontend/static/themes/honey.css deleted file mode 100644 index 91949cbb1e8b..000000000000 --- a/frontend/static/themes/honey.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #f2aa00; - --main-color: #fff546; - --caret-color: #795200; - --sub-color: #a66b00; - --sub-alt-color: #e19e00; - --text-color: #f3eecb; - --error-color: #df3333; - --error-extra-color: #6d1f1f; - --colorful-error-color: #df3333; - --colorful-error-extra-color: #6d1f1f; -} diff --git a/frontend/static/themes/horizon.css b/frontend/static/themes/horizon.css index 701eecedded8..b430fa2d3a05 100644 --- a/frontend/static/themes/horizon.css +++ b/frontend/static/themes/horizon.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #1c1e26; - --main-color: #c4a88a; - --caret-color: #bbbbbb; - --sub-color: #db886f; - --sub-alt-color: #17181f; - --text-color: #bbbbbb; - --error-color: #d55170; - --error-extra-color: #ff3d3d; - --colorful-error-color: #d55170; - --colorful-error-extra-color: #d55170; -} - nav > .textButton:nth-child(1) { color: #d55170; } diff --git a/frontend/static/themes/husqy.css b/frontend/static/themes/husqy.css index 3596750b4503..8eda898afedd 100644 --- a/frontend/static/themes/husqy.css +++ b/frontend/static/themes/husqy.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #000000; - --main-color: #c58aff; - --caret-color: #c58aff; - --sub-color: #972fff; - --sub-alt-color: #1e001e; - --text-color: #ebd7ff; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} - #liveWpm, #liveStatsTextTop { color: #c58aff; diff --git a/frontend/static/themes/iceberg_dark.css b/frontend/static/themes/iceberg_dark.css deleted file mode 100644 index 97f9b5f8d0bb..000000000000 --- a/frontend/static/themes/iceberg_dark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #161821; - --caret-color: #d2d4de; - --main-color: #84a0c6; - --sub-color: #595e76; - --sub-alt-color: #232531; - --text-color: #c6c8d1; - --error-color: #e27878; - --error-extra-color: #e2a478; - --colorful-error-color: #e27878; - --colorful-error-extra-color: #e2a478; -} diff --git a/frontend/static/themes/iceberg_light.css b/frontend/static/themes/iceberg_light.css deleted file mode 100644 index 7ab04ef665fd..000000000000 --- a/frontend/static/themes/iceberg_light.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #e8e9ec; - --caret-color: #262a3f; - --main-color: #2d539e; - --sub-color: #adb1c4; - --sub-alt-color: #ccceda; - --text-color: #33374c; - --error-color: #cc517a; - --error-extra-color: #cc3768; - --colorful-error-color: #cc517a; - --colorful-error-extra-color: #cc3768; -} diff --git a/frontend/static/themes/incognito.css b/frontend/static/themes/incognito.css index 60a014ebcfa1..f51a6bef6930 100644 --- a/frontend/static/themes/incognito.css +++ b/frontend/static/themes/incognito.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #0e0e0e; - --main-color: #ff9900; - --caret-color: #ff9900; - --sub-color: #555555; - --sub-alt-color: #151515; - --text-color: #c6c6c6; - --error-color: #e44545; - --error-extra-color: #e44545; - --colorful-error-color: #b13535; - --colorful-error-extra-color: #b13535; -} - header #logo .text { background: linear-gradient( 90deg, diff --git a/frontend/static/themes/ishtar.css b/frontend/static/themes/ishtar.css index 89b7b8afc7ee..1c0f22be93ed 100644 --- a/frontend/static/themes/ishtar.css +++ b/frontend/static/themes/ishtar.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #202020; - --main-color: #91170c; - --caret-color: #c58940; - --sub-color: #847869; - --sub-alt-color: #272727; - --text-color: #fae1c3; - --error-color: #bb1e10; - --error-extra-color: #791717; - --colorful-error-color: #c5da33; - --colorful-error-extra-color: #849224; -} - header #logo .bottom { color: #fae1c3; } diff --git a/frontend/static/themes/iv_clover.css b/frontend/static/themes/iv_clover.css deleted file mode 100644 index f330cfc12a61..000000000000 --- a/frontend/static/themes/iv_clover.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #a0a0a0; - --main-color: #573e40; - --caret-color: #8d8d8d; - --sub-color: #353535; - --sub-alt-color: #bebebe; - --text-color: #3b2d3b; - --error-color: #937173; - --error-extra-color: #987678; - --colorful-error-color: #ad8d60; - --colorful-error-extra-color: #b7976a; -} diff --git a/frontend/static/themes/iv_spade.css b/frontend/static/themes/iv_spade.css deleted file mode 100644 index 8e9a930b0d42..000000000000 --- a/frontend/static/themes/iv_spade.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0c0c0c; - --main-color: #b7976a; - --caret-color: #bebebe; - --sub-color: #404040; - --sub-alt-color: #121212; - --text-color: #d3c2c3; - --error-color: #9d7b7d; - --error-extra-color: #a78587; - --colorful-error-color: #b7976a; - --colorful-error-extra-color: #c1a174; -} diff --git a/frontend/static/themes/joker.css b/frontend/static/themes/joker.css deleted file mode 100644 index 28daf85e1301..000000000000 --- a/frontend/static/themes/joker.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1a0e25; - --main-color: #99de1e; - --caret-color: #99de1e; - --sub-color: #7554a3; - --sub-alt-color: #14081f; - --text-color: #e9e2f5; - --error-color: #e32b2b; - --error-extra-color: #a62626; - --colorful-error-color: #e32b2b; - --colorful-error-extra-color: #a62626; -} diff --git a/frontend/static/themes/laser.css b/frontend/static/themes/laser.css deleted file mode 100644 index de0c7c54cfc5..000000000000 --- a/frontend/static/themes/laser.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #221b44; - --main-color: #009eaf; - --caret-color: #009eaf; - --sub-color: #b82356; - --sub-alt-color: #1e173b; - --text-color: #dbe7e8; - --error-color: #a8d400; - --error-extra-color: #668000; - --colorful-error-color: #a8d400; - --colorful-error-extra-color: #668000; -} diff --git a/frontend/static/themes/lavender.css b/frontend/static/themes/lavender.css index 4c7b513e3ba8..3b95e05fe667 100644 --- a/frontend/static/themes/lavender.css +++ b/frontend/static/themes/lavender.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #ada6c2; - --main-color: #e4e3e9; - --caret-color: #e4e3e9; - --sub-color: #e4e3e9; - --sub-alt-color: #a19bb9; - --text-color: #2f2a41; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} - nav .textButton { border-radius: 10rem !important; background: var(--text-color); diff --git a/frontend/static/themes/leather.css b/frontend/static/themes/leather.css deleted file mode 100644 index fd92dd4bb944..000000000000 --- a/frontend/static/themes/leather.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #a86948; - --main-color: #ffe4bc; - --caret-color: #ef6d49; - --sub-color: #81482b; - --sub-alt-color: #9a5f3f; - --text-color: #ffe4bc; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/lil_dragon.css b/frontend/static/themes/lil_dragon.css index d5f8fa0e73a2..aeb13923bc6d 100644 --- a/frontend/static/themes/lil_dragon.css +++ b/frontend/static/themes/lil_dragon.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #ebe1ef; - --main-color: #8a5bd6; - --caret-color: #212b43; - --sub-color: #a28db8; - --sub-alt-color: #dac7e2; - --text-color: #212b43; - --error-color: #f794ca; - --error-extra-color: #f279c2; - --colorful-error-color: #f794ca; - --colorful-error-extra-color: #f279c2; -} - nav .textButton { color: #ba96db; } diff --git a/frontend/static/themes/lilac_mist.css b/frontend/static/themes/lilac_mist.css deleted file mode 100644 index 9d8a813d1315..000000000000 --- a/frontend/static/themes/lilac_mist.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #fffbfe; - --main-color: #b94189; - --caret-color: #e099d6; - --sub-color: #e094c2; - --sub-alt-color: #ecdcee; - --text-color: #5c2954; - --error-color: #ff6f69; - --error-extra-color: #ff6f69; - --colorful-error-color: #bc7fc0; - --colorful-error-extra-color: #bc41b1; -} diff --git a/frontend/static/themes/lime.css b/frontend/static/themes/lime.css deleted file mode 100644 index 73243ef94925..000000000000 --- a/frontend/static/themes/lime.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #7c878e; - --main-color: #93c247; - --caret-color: #93c247; - --sub-color: #4b5257; - --sub-alt-color: #737d82; - --text-color: #bfcfdc; - --error-color: #ea4221; - --error-extra-color: #7e2a33; - --colorful-error-color: #ea4221; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/luna.css b/frontend/static/themes/luna.css deleted file mode 100644 index ab5bfc35b550..000000000000 --- a/frontend/static/themes/luna.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #221c35; - --main-color: #f67599; - --caret-color: #f67599; - --sub-color: #5a3a7e; - --sub-alt-color: #2f2346; - --text-color: #ffe3eb; - --error-color: #efc050; - --error-extra-color: #c5972c; - --colorful-error-color: #efc050; - --colorful-error-extra-color: #c5972c; -} diff --git a/frontend/static/themes/macroblank.css b/frontend/static/themes/macroblank.css deleted file mode 100644 index 01390d07c80b..000000000000 --- a/frontend/static/themes/macroblank.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #b2d2c8; - --main-color: #c13117; - --caret-color: #766f71; - --sub-color: #717977; - --sub-alt-color: #c6ddd3; - --text-color: #490909; - --error-color: #c13117; - --error-extra-color: #fff5f5; - --colorful-error-color: #fff5f5; - --colorful-error-extra-color: #ffe9c2; -} diff --git a/frontend/static/themes/magic_girl.css b/frontend/static/themes/magic_girl.css deleted file mode 100644 index 63e7a33b9451..000000000000 --- a/frontend/static/themes/magic_girl.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #ffffff; - --main-color: #f5b1cc; - --caret-color: #e45c96; - --sub-color: #93e8d3; - --sub-alt-color: #f2f2f2; - --text-color: #00ac8c; - --error-color: #ffe495; - --error-extra-color: #e45c96; - --colorful-error-color: #ffe485; - --colorful-error-extra-color: #e45c96; -} diff --git a/frontend/static/themes/mashu.css b/frontend/static/themes/mashu.css deleted file mode 100644 index 7f18b1571f97..000000000000 --- a/frontend/static/themes/mashu.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #2b2b2c; - --main-color: #76689a; - --caret-color: #76689a; - --sub-color: #d8a0a6; - --sub-alt-color: #27242c; - --text-color: #f1e2e4; - --error-color: #d44729; - --error-extra-color: #8f2f19; - --colorful-error-color: #d44729; - --colorful-error-extra-color: #8f2f19; -} diff --git a/frontend/static/themes/matcha_moccha.css b/frontend/static/themes/matcha_moccha.css deleted file mode 100644 index 6adc7f356f69..000000000000 --- a/frontend/static/themes/matcha_moccha.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #523525; - --main-color: #7ec160; - --caret-color: #7ec160; - --sub-color: #9e6749; - --sub-alt-color: #422b1e; - --text-color: #ecddcc; - --error-color: #fb4934; - --error-extra-color: #cc241d; - --colorful-error-color: #fb4934; - --colorful-error-extra-color: #cc241d; -} diff --git a/frontend/static/themes/material.css b/frontend/static/themes/material.css deleted file mode 100644 index e73759a9f3a5..000000000000 --- a/frontend/static/themes/material.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #263238; - --main-color: #80cbc4; - --caret-color: #80cbc4; - --sub-color: #4c6772; - --sub-alt-color: #2e3c43; - --text-color: #e6edf3; - --error-color: #fb4934; - --error-extra-color: #cc241d; - --colorful-error-color: #fb4934; - --colorful-error-extra-color: #cc241d; -} diff --git a/frontend/static/themes/matrix.css b/frontend/static/themes/matrix.css index f6257d885e68..9d39cee42b0e 100644 --- a/frontend/static/themes/matrix.css +++ b/frontend/static/themes/matrix.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #000000; - --main-color: #15ff00; - --caret-color: #15ff00; - --sub-color: #006500; - --sub-alt-color: #032000; - --text-color: #d1ffcd; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} - #liveWpm, #liveStatsTextTop { color: white; diff --git a/frontend/static/themes/menthol.css b/frontend/static/themes/menthol.css deleted file mode 100644 index 9882c0fea175..000000000000 --- a/frontend/static/themes/menthol.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #00c18c; - --main-color: #ffffff; - --caret-color: #99fdd8; - --sub-color: #186544; - --sub-alt-color: #17ae7d; - --text-color: #ffffff; - --error-color: #e03c3c; - --error-extra-color: #b12525; - --colorful-error-color: #e03c3c; - --colorful-error-extra-color: #b12525; -} diff --git a/frontend/static/themes/metaverse.css b/frontend/static/themes/metaverse.css deleted file mode 100644 index 8c0ded1cf7e4..000000000000 --- a/frontend/static/themes/metaverse.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #232323; - --main-color: #d82934; - --caret-color: #d82934; - --sub-color: #5e5e5e; - --sub-alt-color: #1d1d1d; - --text-color: #e8e8e8; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #d7da33; - --colorful-error-extra-color: #737917; -} diff --git a/frontend/static/themes/metropolis.css b/frontend/static/themes/metropolis.css index 319aea9775e5..829a0637ffb8 100644 --- a/frontend/static/themes/metropolis.css +++ b/frontend/static/themes/metropolis.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #0f1f2c; - --main-color: #56c3b7; - --caret-color: #56c3b7; - --sub-color: #326984; - --sub-alt-color: #0b1822; - --text-color: #e4edf1; - --error-color: #d44729; - --error-extra-color: #8f2f19; - --colorful-error-color: #d44729; - --colorful-error-extra-color: #8f2f19; -} - header #logo .bottom { color: #f4bc46; } diff --git a/frontend/static/themes/mexican.css b/frontend/static/themes/mexican.css deleted file mode 100644 index 31f21b94e5f3..000000000000 --- a/frontend/static/themes/mexican.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #f8ad34; - --main-color: #b12189; - --caret-color: #eee; - --sub-color: #333; - --sub-alt-color: #f9b951; - --text-color: #eee; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} diff --git a/frontend/static/themes/miami.css b/frontend/static/themes/miami.css deleted file mode 100644 index 54bc7cf12194..000000000000 --- a/frontend/static/themes/miami.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #f35588; - --main-color: #05dfd7; - --caret-color: #a3f7bf; - --text-color: #f0e9ec; - --sub-color: #94294c; - --sub-alt-color: #db4979; - --error-color: #fff591; - --error-extra-color: #b9b269; - --colorful-error-color: #fff591; - --colorful-error-extra-color: #b9b269; -} diff --git a/frontend/static/themes/miami_nights.css b/frontend/static/themes/miami_nights.css deleted file mode 100644 index 2e9050819f0d..000000000000 --- a/frontend/static/themes/miami_nights.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #18181a; - --main-color: #e4609b; - --caret-color: #e4609b; - --sub-color: #47bac0; - --sub-alt-color: #0f0f10; - --text-color: #fff; - --error-color: #fff591; - --error-extra-color: #b6af68; - --colorful-error-color: #fff591; - --colorful-error-extra-color: #b6af68; -} diff --git a/frontend/static/themes/midnight.css b/frontend/static/themes/midnight.css deleted file mode 100644 index bbc2de204bbf..000000000000 --- a/frontend/static/themes/midnight.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0b0e13; - --main-color: #60759f; - --caret-color: #60759f; - --sub-color: #394760; - --sub-alt-color: #141a24; - --text-color: #9fadc6; - --error-color: #c27070; - --error-extra-color: #c28b70; - --colorful-error-color: #c27070; - --colorful-error-extra-color: #c28b70; -} diff --git a/frontend/static/themes/milkshake.css b/frontend/static/themes/milkshake.css index 8530bc7d6a81..214f374f92d9 100644 --- a/frontend/static/themes/milkshake.css +++ b/frontend/static/themes/milkshake.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #ffffff; - --main-color: #212b43; - --caret-color: #212b43; - --sub-color: #62cfe6; - --sub-alt-color: #ddeff3; - --text-color: #212b43; - --error-color: #f19dac; - --error-extra-color: #e58c9d; - --colorful-error-color: #f19dac; - --colorful-error-extra-color: #e58c9d; -} - nav > .textButton:nth-child(1) { color: #f19dac; } diff --git a/frontend/static/themes/mint.css b/frontend/static/themes/mint.css deleted file mode 100644 index 5970fa0e64a9..000000000000 --- a/frontend/static/themes/mint.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #05385b; - --main-color: #5cdb95; - --caret-color: #5cdb95; - --sub-color: #20688a; - --sub-alt-color: #07324e; - --text-color: #edf5e1; - --error-color: #f35588; - --error-extra-color: #a3385a; - --colorful-error-color: #f35588; - --colorful-error-extra-color: #a3385a; -} diff --git a/frontend/static/themes/mizu.css b/frontend/static/themes/mizu.css deleted file mode 100644 index b454ed416204..000000000000 --- a/frontend/static/themes/mizu.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #afcbdd; - --main-color: #fcfbf6; - --caret-color: #fcfbf6; - --sub-color: #85a5bb; - --sub-alt-color: #9fc1d4; - --text-color: #1a2633; - --error-color: #bf616a; - --error-extra-color: #793e44; - --colorful-error-color: #bf616a; - --colorful-error-extra-color: #793e44; -} diff --git a/frontend/static/themes/modern_dolch.css b/frontend/static/themes/modern_dolch.css deleted file mode 100644 index 227ca55864de..000000000000 --- a/frontend/static/themes/modern_dolch.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #2d2e30; - --main-color: #7eddd3; - --caret-color: #7eddd3; - --sub-color: #54585c; - --sub-alt-color: #242527; - --text-color: #e3e6eb; - --error-color: #d36a7b; - --error-extra-color: #994154; - --colorful-error-color: #d36a7b; - --colorful-error-extra-color: #994154; -} diff --git a/frontend/static/themes/modern_dolch_light.css b/frontend/static/themes/modern_dolch_light.css deleted file mode 100644 index b977e9fbcaba..000000000000 --- a/frontend/static/themes/modern_dolch_light.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #dbdbdb; - --caret-color: #8fd1c3; - --main-color: #8fd1c3; - --sub-color: #a3a2a2; - --sub-alt-color: #e8e8e8; - --text-color: #454545; - --error-color: #ea8a9a; - --error-extra-color: #e0556d; - --colorful-error-color: #ea8a9a; - --colorful-error-extra-color: #e0556d; -} diff --git a/frontend/static/themes/modern_ink.css b/frontend/static/themes/modern_ink.css index e1bfa2c51db1..f36f904cbf12 100644 --- a/frontend/static/themes/modern_ink.css +++ b/frontend/static/themes/modern_ink.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #ffffff; - --main-color: #ff360d; - --caret-color: #ff0000; - --sub-color: #b7b7b7; - --sub-alt-color: #ececec; - --text-color: #000000; - --error-color: #d70000; - --error-extra-color: #b00000; - --colorful-error-color: #000000; - --colorful-error-extra-color: #000000; -} - nav .textButton:nth-child(1) { color: #ff0000; } diff --git a/frontend/static/themes/monokai.css b/frontend/static/themes/monokai.css deleted file mode 100644 index 613507252123..000000000000 --- a/frontend/static/themes/monokai.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #272822; - --main-color: #a6e22e; - --caret-color: #66d9ef; - --sub-color: #e6db74; - --sub-alt-color: #1f201b; - --text-color: #e2e2dc; - --error-color: #f92672; - --error-extra-color: #fd971f; - --colorful-error-color: #f92672; - --colorful-error-extra-color: #fd971f; -} diff --git a/frontend/static/themes/moonlight.css b/frontend/static/themes/moonlight.css index 916bae0336b0..f9991696c686 100644 --- a/frontend/static/themes/moonlight.css +++ b/frontend/static/themes/moonlight.css @@ -1,16 +1,4 @@ /*inspired by GMK MOONLIGHT*/ -:root { - --bg-color: #191f28; - --main-color: #c69f68; - --caret-color: #8f744b; - --sub-color: #4b5975; - --sub-alt-color: #141a22; - --text-color: #ccccb5; - --error-color: #b81b2c; - --error-extra-color: #84131f; - --colorful-error-color: #b81b2c; - --colorful-error-extra-color: #84131f; -} nav { gap: 0.5rem; diff --git a/frontend/static/themes/mountain.css b/frontend/static/themes/mountain.css deleted file mode 100644 index 2d4d7379f663..000000000000 --- a/frontend/static/themes/mountain.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0f0f0f; - --main-color: #e7e7e7; - --caret-color: #f5f5f5; - --sub-color: #4c4c4c; - --sub-alt-color: #1a1a1a; - --text-color: #e7e7e7; - --error-color: #ac8c8c; - --error-extra-color: #c49ea0; - --colorful-error-color: #aca98a; - --colorful-error-extra-color: #c4c19e; -} diff --git a/frontend/static/themes/mr_sleeves.css b/frontend/static/themes/mr_sleeves.css index b1a6fc742be5..231c2cc78082 100644 --- a/frontend/static/themes/mr_sleeves.css +++ b/frontend/static/themes/mr_sleeves.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #d1d7da; - --main-color: #daa99b; - --caret-color: #8fadc9; - --sub-color: #9a9fa1; - --sub-alt-color: #bfcbd1; - --text-color: #1d1d1d; - --error-color: #bf6464; - --error-extra-color: #793e44; - --colorful-error-color: #8fadc9; - --colorful-error-extra-color: #667c91; -} - header #logo .bottom { color: #8fadc9; } diff --git a/frontend/static/themes/ms_cupcakes.css b/frontend/static/themes/ms_cupcakes.css deleted file mode 100644 index a928092cd935..000000000000 --- a/frontend/static/themes/ms_cupcakes.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #ffffff; - --main-color: #5ed5f3; - --caret-color: #303030; - --sub-color: #d64090; - --sub-alt-color: #edf8fa; - --text-color: #0a282f; - --error-color: #a4dd32; - --error-extra-color: #90bd34; - --colorful-error-color: #a4dd32; - --colorful-error-extra-color: #87b330; -} diff --git a/frontend/static/themes/muted.css b/frontend/static/themes/muted.css deleted file mode 100644 index e915fffadee8..000000000000 --- a/frontend/static/themes/muted.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #525252; - --main-color: #c5b4e3; - --caret-color: #b1e4e3; - --sub-color: #939eae; - --sub-alt-color: #494949; - --text-color: #b1e4e3; - --error-color: #edc1cd; - --error-extra-color: #edc1cd; - --colorful-error-color: #edc1cd; - --colorful-error-extra-color: #edc1cd; -} diff --git a/frontend/static/themes/nautilus.css b/frontend/static/themes/nautilus.css deleted file mode 100644 index e64863089df8..000000000000 --- a/frontend/static/themes/nautilus.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #132237; - --main-color: #ebb723; - --caret-color: #ebb723; - --sub-color: #0b4c6c; - --sub-alt-color: #0e1a29; - --text-color: #1cbaac; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} diff --git a/frontend/static/themes/nebula.css b/frontend/static/themes/nebula.css deleted file mode 100644 index 340a64b4feff..000000000000 --- a/frontend/static/themes/nebula.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #212135; - --main-color: #be3c88; - --caret-color: #78c729; - --sub-color: #19b3b8; - --sub-alt-color: #191928; - --text-color: #838686; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/night_runner.css b/frontend/static/themes/night_runner.css deleted file mode 100644 index a9588935f30e..000000000000 --- a/frontend/static/themes/night_runner.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #212121; - --main-color: #feff04; - --caret-color: #feff04; - --sub-color: #5c4a9c; - --sub-alt-color: #1a1a1a; - --text-color: #e8e8e8; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} diff --git a/frontend/static/themes/nord.css b/frontend/static/themes/nord.css deleted file mode 100644 index 6ac6ce15e398..000000000000 --- a/frontend/static/themes/nord.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #242933; - --caret-color: #eceff4; - --main-color: #88c0d0; - --sub-color: #929aaa; - --sub-alt-color: #2e3440; - --text-color: #d8dee9; - --error-color: #bf616a; - --error-extra-color: #793e44; - --colorful-error-color: #bf616a; - --colorful-error-extra-color: #793e44; -} diff --git a/frontend/static/themes/nord_light.css b/frontend/static/themes/nord_light.css deleted file mode 100644 index eafa8b48c889..000000000000 --- a/frontend/static/themes/nord_light.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #eceff4; - --caret-color: #8fbcbb; - --main-color: #8fbcbb; - --sub-color: #6a7791; - --sub-alt-color: #d8dee9; - --text-color: #8fbcbb; - --error-color: #bf616a; - --error-extra-color: #793e44; - --colorful-error-color: #bf616a; - --colorful-error-extra-color: #793e44; -} diff --git a/frontend/static/themes/norse.css b/frontend/static/themes/norse.css deleted file mode 100644 index 7183b1c2f837..000000000000 --- a/frontend/static/themes/norse.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #242425; - --main-color: #2b5f6d; - --caret-color: #2b5f6d; - --sub-color: #505b5e; - --sub-alt-color: #303333; - --text-color: #ccc2b1; - --error-color: #7e2a2a; - --error-extra-color: #771d1d; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/oblivion.css b/frontend/static/themes/oblivion.css index 62fb2d66b85a..70923f48f5ba 100644 --- a/frontend/static/themes/oblivion.css +++ b/frontend/static/themes/oblivion.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #313231; - --main-color: #a5a096; - --caret-color: #a5a096; - --sub-color: #5d6263; - --sub-alt-color: #3a3b3b; - --text-color: #f7f5f1; - --error-color: #dd452e; - --error-extra-color: #9e3423; - --colorful-error-color: #dd452e; - --colorful-error-extra-color: #9e3423; -} - nav > .textButton:nth-child(1) { color: #9a90b4; } diff --git a/frontend/static/themes/olive.css b/frontend/static/themes/olive.css deleted file mode 100644 index 79893a223e58..000000000000 --- a/frontend/static/themes/olive.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #e9e5cc; - --caret-color: #92946f; - --main-color: #92946f; - --sub-color: #b7b39e; - --sub-alt-color: #d4cfbc; - --text-color: #373731; - --error-color: #cf2f2f; - --error-extra-color: #a22929; - --colorful-error-color: #cf2f2f; - --colorful-error-extra-color: #a22929; -} diff --git a/frontend/static/themes/olivia.css b/frontend/static/themes/olivia.css deleted file mode 100644 index 06ade62cc5f6..000000000000 --- a/frontend/static/themes/olivia.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1c1b1d; - --main-color: #deaf9d; - --caret-color: #deaf9d; - --sub-color: #4e3e3e; - --sub-alt-color: #262223; - --text-color: #f2efed; - --error-color: #bf616a; - --error-extra-color: #793e44; - --colorful-error-color: #e03d4e; - --colorful-error-extra-color: #aa2f3b; -} diff --git a/frontend/static/themes/onedark.css b/frontend/static/themes/onedark.css deleted file mode 100644 index 65b5ca176b54..000000000000 --- a/frontend/static/themes/onedark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #2f343f; - --caret-color: #61afef; - --main-color: #61afef; - --sub-color: #eceff4; - --sub-alt-color: #262b34; - --text-color: #98c379; - --error-color: #e06c75; - --error-extra-color: #d62436; - --colorful-error-color: #d62436; - --colorful-error-extra-color: #ff0019; -} diff --git a/frontend/static/themes/our_theme.css b/frontend/static/themes/our_theme.css deleted file mode 100644 index ca52bb7b7b40..000000000000 --- a/frontend/static/themes/our_theme.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #ce1226; - --main-color: #fcd116; - --caret-color: #fcd116; - --sub-color: #6d0f19; - --sub-alt-color: #9f1020; - --text-color: #ffffff; - --error-color: #fcd116; - --error-extra-color: #fcd116; - --colorful-error-color: #1672fc; - --colorful-error-extra-color: #1672fc; -} diff --git a/frontend/static/themes/pale_nimbus.css b/frontend/static/themes/pale_nimbus.css deleted file mode 100644 index ec639f07ee5c..000000000000 --- a/frontend/static/themes/pale_nimbus.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #433e4c; - --main-color: #94ffc2; - --caret-color: #9efffd; - --sub-color: #ffaca3; - --sub-alt-color: #694f5e; - --text-color: #feffdb; - --error-color: #ff5c5c; - --error-extra-color: #ff0000; - --colorful-error-color: #ff3874; - --colorful-error-extra-color: #c2386f; -} diff --git a/frontend/static/themes/paper.css b/frontend/static/themes/paper.css deleted file mode 100644 index f41d06ac26ca..000000000000 --- a/frontend/static/themes/paper.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #eeeeee; - --main-color: #444444; - --caret-color: #444444; - --sub-color: #b2b2b2; - --sub-alt-color: #dddddd; - --text-color: #444444; - --error-color: #d70000; - --error-extra-color: #d70000; - --colorful-error-color: #d70000; - --colorful-error-extra-color: #d70000; -} diff --git a/frontend/static/themes/passion_fruit.css b/frontend/static/themes/passion_fruit.css deleted file mode 100644 index 0644a7aa8324..000000000000 --- a/frontend/static/themes/passion_fruit.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #7c2142; - --main-color: #f4a3b4; - --caret-color: #ffffff; - --sub-color: #9994b8; - --sub-alt-color: #833c5e; - --text-color: #ffffff; - --error-color: #deb80b; - --error-extra-color: #deb80b; - --colorful-error-color: #deb80b; - --colorful-error-extra-color: #deb80b; -} diff --git a/frontend/static/themes/pastel.css b/frontend/static/themes/pastel.css deleted file mode 100644 index fdbba2690e0c..000000000000 --- a/frontend/static/themes/pastel.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #e0b2bd; - --main-color: #fbf4b6; - --caret-color: #fbf4b6; - --sub-color: #b4e9ff; - --sub-alt-color: #d29fab; - --text-color: #6d5c6f; - --error-color: #ff6961; - --error-extra-color: #c23b22; - --colorful-error-color: #ff6961; - --colorful-error-extra-color: #c23b22; -} diff --git a/frontend/static/themes/peach_blossom.css b/frontend/static/themes/peach_blossom.css deleted file mode 100644 index b0ffdffe70bb..000000000000 --- a/frontend/static/themes/peach_blossom.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #292929; - --main-color: #99b898; - --caret-color: #616161; - --sub-color: #616161; - --sub-alt-color: #2a363b; - --text-color: #fecea8; - --error-color: #ff6961; - --error-extra-color: #e84a5f; - --colorful-error-color: #ff6961; - --colorful-error-extra-color: #e84a5f; -} diff --git a/frontend/static/themes/peaches.css b/frontend/static/themes/peaches.css deleted file mode 100644 index bbaddc8c5b4b..000000000000 --- a/frontend/static/themes/peaches.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #e0d7c1; - --main-color: #dd7a5f; - --caret-color: #dd7a5f; - --sub-color: #e7b28e; - --sub-alt-color: #e2caaf; - --text-color: #5f4c41; - --error-color: #ff6961; - --error-extra-color: #c23b22; - --colorful-error-color: #ff6961; - --colorful-error-extra-color: #c23b22; -} diff --git a/frontend/static/themes/phantom.css b/frontend/static/themes/phantom.css index 718de9968d02..eba732d3098e 100644 --- a/frontend/static/themes/phantom.css +++ b/frontend/static/themes/phantom.css @@ -1,17 +1,4 @@ -:root { - --bg-color: #001; - --main-color: #7aa2f7; - --caret-color: #bb9af7; - --sub-color: #414868; - --sub-alt-color: #24283b; - --text-color: #c0caf5; - --error-color: #f7768e; - --error-extra-color: #db4b4b; - --colorful-error-color: #ff7a93; - --colorful-error-extra-color: #ff9e64; -} - -@keyframes tokyo-glow { +@keyframes phantom-glow { 0% { color: #c0caf5; text-shadow: @@ -32,7 +19,7 @@ } } -@keyframes tokyo-glow-incorrect { +@keyframes phantom-glow-incorrect { 0% { text-shadow: 0 0 5px #f7768e, @@ -50,7 +37,7 @@ } } -@keyframes tokyo-bg { +@keyframes phantom-bg { 0% { background: #7aa2f7; } @@ -69,7 +56,7 @@ header:not(.focus) #logo .text { color: var(--text-color); - animation: tokyo-glow 3s infinite alternate; + animation: phantom-glow 3s infinite alternate; } header #logo .text .top { @@ -95,11 +82,11 @@ button.text.active, button.text:hover, .textButton:hover { - animation: tokyo-glow 5s linear infinite; + animation: phantom-glow 5s linear infinite; } .word .active { - animation: tokyo-glow 5s linear infinite; + animation: phantom-glow 5s linear infinite; } button:hover, @@ -117,7 +104,7 @@ input[type="submit"]:hover { } #caret { - animation: tokyo-bg 3s linear infinite; + animation: phantom-bg 3s linear infinite; } #logo .bottom, @@ -129,7 +116,7 @@ header .config .group .buttons .textButton:hover, footer .textButton:hover, footer button.text:hover, a:not(.button):hover { - animation: tokyo-glow 3s linear infinite; + animation: phantom-glow 3s linear infinite; } .afk, @@ -140,7 +127,7 @@ a:not(.button):hover { #words.highlight-next-word .word.typed letter, #words.highlight-next-two-words .word.typed letter, #words.highlight-next-three-words .word.typed letter { - animation: tokyo-glow 5s linear infinite; + animation: phantom-glow 5s linear infinite; } #words.flipped .word.typed letter { @@ -148,10 +135,10 @@ a:not(.button):hover { } .incorrect { - animation: tokyo-glow-incorrect 5s linear infinite; + animation: phantom-glow-incorrect 5s linear infinite; } #words.highlight-off .word letter, #words.highlight-off .word.typed letter { - animation: tokyo-glow 5s linear infinite; + animation: phantom-glow 5s linear infinite; } diff --git a/frontend/static/themes/pink_lemonade.css b/frontend/static/themes/pink_lemonade.css deleted file mode 100644 index 19f5424d2c13..000000000000 --- a/frontend/static/themes/pink_lemonade.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #f6d992; - --main-color: #f6a192; - --caret-color: #fcfcf8; - --sub-color: #f6b092; - --sub-alt-color: #f6cc93; - --text-color: #fcfcf8; - --error-color: #ff6f69; - --error-extra-color: #ff6f69; - --colorful-error-color: #ff6f69; - --colorful-error-extra-color: #ff6f69; -} diff --git a/frontend/static/themes/pulse.css b/frontend/static/themes/pulse.css deleted file mode 100644 index 604ee84a97fa..000000000000 --- a/frontend/static/themes/pulse.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #181818; - --main-color: #17b8bd; - --caret-color: #17b8bd; - --sub-color: #53565a; - --sub-alt-color: #121212; - --text-color: #e5f4f4; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} diff --git a/frontend/static/themes/purpleish.css b/frontend/static/themes/purpleish.css deleted file mode 100644 index d79dc2875e96..000000000000 --- a/frontend/static/themes/purpleish.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1e1e32; - --main-color: #7a52cc; - --caret-color: #7a52cc; - --sub-color: #5c5c99; - --sub-alt-color: #181829; - --text-color: #a3a3cc; - --error-color: #ff6666; - --error-extra-color: #ff6666; - --colorful-error-color: #ff6666; - --colorful-error-extra-color: #ff6666; -} diff --git a/frontend/static/themes/rainbow_trail.css b/frontend/static/themes/rainbow_trail.css index f7a8c466eb24..6165ae82c35c 100644 --- a/frontend/static/themes/rainbow_trail.css +++ b/frontend/static/themes/rainbow_trail.css @@ -1,14 +1,3 @@ -:root { - --bg-color: #f5f5f5; - --main-color: #363636; - --caret-color: #0d0d0d; - --sub-color: #4f4f4f; - --sub-alt-color: #e0e0e0; - --text-color: #1f1f1f; - --error-color: #ff0008; - --colorful-error-color: #ff0008; -} - header #logo .text { background: linear-gradient( 90deg, @@ -96,8 +85,10 @@ button.text:hover, #words { --correct-letter-animation: rainbow-infinite-loop 5s linear infinite; - --incorrect-letter-animation: error-repeat 1s alternate ease-in-out infinite; - --extra-letter-animation: error-repeat 1s alternate ease-in-out infinite; + --incorrect-letter-animation: rainbow-error-repeat 1s alternate ease-in-out + infinite; + --extra-letter-animation: rainbow-error-repeat 1s alternate ease-in-out + infinite; } #words .word.typed letter.correct, @@ -123,7 +114,7 @@ button.text:hover, .button:hover, button:not(.textButton):not(.text):hover { - animation: glowing-button 2s alternate ease-in-out infinite; + animation: rainbow-button 2s alternate ease-in-out infinite; } #words.highlight-off .word letter, @@ -226,7 +217,7 @@ button:not(.textButton):not(.text):hover { } } -@keyframes error-repeat { +@keyframes rainbow-error-repeat { 0% { color: #ff0000; } @@ -262,7 +253,7 @@ button:not(.textButton):not(.text):hover { } } -@keyframes glowing-button { +@keyframes rainbow-button { 0% { box-shadow: 0 0 7.5px 2.5px #60b6ce, diff --git a/frontend/static/themes/red_dragon.css b/frontend/static/themes/red_dragon.css deleted file mode 100644 index 78305aad76d7..000000000000 --- a/frontend/static/themes/red_dragon.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1a0b0c; - --main-color: #ff3a32; - --caret-color: #ff3a32; - --sub-color: #e2a528; - --sub-alt-color: #0e0506; - --text-color: #4a4d4e; - --error-color: #771b1f; - --error-extra-color: #591317; - --colorful-error-color: #771b1f; - --colorful-error-extra-color: #591317; -} diff --git a/frontend/static/themes/red_samurai.css b/frontend/static/themes/red_samurai.css deleted file mode 100644 index 959fc24151ab..000000000000 --- a/frontend/static/themes/red_samurai.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #84202c; - --main-color: #c79e6e; - --caret-color: #c79e6e; - --sub-color: #55131b; - --sub-alt-color: #751d26; - --text-color: #e2dad0; - --error-color: #33bbda; - --error-extra-color: #176b79; - --colorful-error-color: #33bbda; - --colorful-error-extra-color: #176779; -} diff --git a/frontend/static/themes/repose_dark.css b/frontend/static/themes/repose_dark.css deleted file mode 100644 index 9d1bb1cef49d..000000000000 --- a/frontend/static/themes/repose_dark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #2f3338; - --main-color: #d6d2bc; - --caret-color: #d6d2bc; - --sub-color: #8f8e84; - --sub-alt-color: #3a3c3d; - --text-color: #d6d2bc; - --error-color: #ff4a59; - --error-extra-color: #c43c53; - --colorful-error-color: #ff4a59; - --colorful-error-extra-color: #c43c53; -} diff --git a/frontend/static/themes/repose_light.css b/frontend/static/themes/repose_light.css deleted file mode 100644 index 4dc674274818..000000000000 --- a/frontend/static/themes/repose_light.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #efead0; - --main-color: #5f605e; - --caret-color: #5f605e; - --sub-color: #8f8e84; - --sub-alt-color: #dbd6c4; - --text-color: #333538; - --error-color: #c43c53; - --error-extra-color: #a52632; - --colorful-error-color: #c43c53; - --colorful-error-extra-color: #a52632; -} diff --git a/frontend/static/themes/retro.css b/frontend/static/themes/retro.css deleted file mode 100644 index 3bb6dff213d4..000000000000 --- a/frontend/static/themes/retro.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #dad3c1; - --main-color: #1d1b17; - --caret-color: #1d1b17; - --sub-color: #918b7d; - --sub-alt-color: #c8c3b3; - --text-color: #1d1b17; - --error-color: #bf616a; - --error-extra-color: #793e44; - --colorful-error-color: #bf616a; - --colorful-error-extra-color: #793e44; -} diff --git a/frontend/static/themes/retrocast.css b/frontend/static/themes/retrocast.css index 405df18e9c2c..f8b8e4159189 100644 --- a/frontend/static/themes/retrocast.css +++ b/frontend/static/themes/retrocast.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #07737a; - --main-color: #88dbdf; - --caret-color: #88dbdf; - --sub-color: #f3e03b; - --sub-alt-color: #26858b; - --text-color: #ffffff; - --error-color: #ff585d; - --error-extra-color: #c04455; - --colorful-error-color: #ff585d; - --colorful-error-extra-color: #c04455; -} - nav > .textButton:nth-child(1) { color: #88dbdf; } diff --git a/frontend/static/themes/rgb.css b/frontend/static/themes/rgb.css index e0f71d726bda..4e3f9af09641 100644 --- a/frontend/static/themes/rgb.css +++ b/frontend/static/themes/rgb.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #111; - --main-color: #eee; - --caret-color: #eee; - --sub-color: #444; - --sub-alt-color: #1a1a1a; - --text-color: #eee; - --error-color: #eee; - --error-extra-color: #b3b3b3; - --colorful-error-color: #eee; - --colorful-error-extra-color: #b3b3b3; -} - @keyframes rgb { 0% { color: hsl(120, 39%, 49%); diff --git a/frontend/static/themes/rose_pine.css b/frontend/static/themes/rose_pine.css deleted file mode 100644 index 9ad9abbeae25..000000000000 --- a/frontend/static/themes/rose_pine.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1f1d27; /*Background*/ - --main-color: #9ccfd8; /*Color after typing, monkeytype logo, WPM Number acc number etc*/ - --caret-color: #f6c177; /*Cursor Color*/ - --sub-color: #c4a7e7; - --sub-alt-color: #282533; /*WPM text color of scrollbar and general color, before typed color*/ - --text-color: #e0def4; /*Color of text after hovering over it*/ - --error-color: #eb6f92; - --error-extra-color: #ebbcba; - --colorful-error-color: #eb6f92; - --colorful-error-extra-color: #ebbcba; -} diff --git a/frontend/static/themes/rose_pine_dawn.css b/frontend/static/themes/rose_pine_dawn.css deleted file mode 100644 index d3e1eaf2bfe5..000000000000 --- a/frontend/static/themes/rose_pine_dawn.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #fffaf3; /*Background*/ - --main-color: #56949f; /*Color after typing, monkeytype logo, WPM Number acc number etc*/ - --caret-color: #ea9d34; /*Cursor Color*/ - --sub-color: #c4a7e7; - --sub-alt-color: #f0e9df; - --text-color: #286983; /*Color of text after hovering over it*/ - --error-color: #b4637a; - --error-extra-color: #d7827e; - --colorful-error-color: #b4637a; - --colorful-error-extra-color: #d7827e; -} diff --git a/frontend/static/themes/rose_pine_moon.css b/frontend/static/themes/rose_pine_moon.css deleted file mode 100644 index 6985a521a5eb..000000000000 --- a/frontend/static/themes/rose_pine_moon.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #2a273f; /*Background*/ - --main-color: #9ccfd8; /*Color after typing, monkeytype logo, WPM Number acc number etc*/ - --caret-color: #f6c177; /*Cursor Color*/ - --sub-color: #c4a7e7; - --sub-alt-color: #211f32; /*WPM text color of scrollbar and general color, before typed color*/ - --text-color: #e0def4; /*Color of text after hovering over it*/ - --error-color: #eb6f92; - --error-extra-color: #ebbcba; - --colorful-error-color: #eb6f92; - --colorful-error-extra-color: #ebbcba; -} diff --git a/frontend/static/themes/rudy.css b/frontend/static/themes/rudy.css deleted file mode 100644 index 3cef564a370e..000000000000 --- a/frontend/static/themes/rudy.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1a2b3e; - --caret-color: #af8f5c; - --main-color: #af8f5c; - --sub-color: #3a506c; - --sub-alt-color: #152231; - --text-color: #c9c8bf; - --error-color: #bf616a; - --error-extra-color: #793e44; - --colorful-error-color: #bf616a; - --colorful-error-extra-color: #793e44; -} diff --git a/frontend/static/themes/ryujinscales.css b/frontend/static/themes/ryujinscales.css deleted file mode 100644 index 39a8dd1b8658..000000000000 --- a/frontend/static/themes/ryujinscales.css +++ /dev/null @@ -1,14 +0,0 @@ -:root { - --bg-color: #081426; - --main-color: #f17754; - --caret-color: #ef6d49; - --sub-color: #ffbc90; - --sub-alt-color: #040e1d; - --text-color: #ffe4bc; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} - -/* your theme has been added to the _list file and the textColor property is the theme's main color */ diff --git a/frontend/static/themes/serika.css b/frontend/static/themes/serika.css deleted file mode 100644 index 2a335c5329b8..000000000000 --- a/frontend/static/themes/serika.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --main-color: #e2b714; - --caret-color: #e2b714; - --sub-color: #aaaeb3; - --sub-alt-color: #d1d3d8; - --bg-color: #e1e1e3; - --text-color: #323437; - --error-color: #da3333; - --error-extra-color: #791717; - --colorful-error-color: #da3333; - --colorful-error-extra-color: #791717; -} diff --git a/frontend/static/themes/serika_dark.css b/frontend/static/themes/serika_dark.css deleted file mode 100644 index 8fd02012497a..000000000000 --- a/frontend/static/themes/serika_dark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #323437; - --main-color: #e2b714; - --caret-color: #e2b714; - --sub-color: #646669; - --sub-alt-color: #2c2e31; - --text-color: #d1d0c5; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/sewing_tin.css b/frontend/static/themes/sewing_tin.css index d7843ecb2f24..3b0574b50b41 100644 --- a/frontend/static/themes/sewing_tin.css +++ b/frontend/static/themes/sewing_tin.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #241963; - --main-color: #f2ce83; - --caret-color: #fbdb8c; - --sub-color: #446ad5; - --sub-alt-color: #2a277a; - --text-color: #ffffff; - --error-color: #c6915e; - --error-extra-color: #c6915e; - --colorful-error-color: #c6915e; - --colorful-error-extra-color: #c6915e; -} - nav > .textButton { color: #f2ce83; } diff --git a/frontend/static/themes/sewing_tin_light.css b/frontend/static/themes/sewing_tin_light.css index b37243152ccf..1e4fe75292d7 100644 --- a/frontend/static/themes/sewing_tin_light.css +++ b/frontend/static/themes/sewing_tin_light.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #ffffff; - --main-color: #2d2076; - --caret-color: #fbdb8c; - --sub-color: #385eca; - --sub-alt-color: #c8cedf; - --text-color: #2d2076; - --error-color: #f2ce83; - --error-extra-color: #f2ce83; - --colorful-error-color: #f2ce83; - --colorful-error-extra-color: #f2ce83; -} - nav > .textButton { color: #f2ce83; } diff --git a/frontend/static/themes/shadow.css b/frontend/static/themes/shadow.css index 411279afdf6a..87db97316095 100644 --- a/frontend/static/themes/shadow.css +++ b/frontend/static/themes/shadow.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #000; - --main-color: #eee; - --caret-color: #eee; - --sub-color: #444; - --sub-alt-color: #171717; - --text-color: #eee; - --error-color: #fff; - --error-extra-color: #d8d8d8; - --colorful-error-color: #fff; - --colorful-error-extra-color: #d8d8d8; -} - header #logo .icon { color: #8c3230; } diff --git a/frontend/static/themes/shoko.css b/frontend/static/themes/shoko.css deleted file mode 100644 index 6ddb545ec5a8..000000000000 --- a/frontend/static/themes/shoko.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #ced7e0; - --main-color: #81c4dd; - --caret-color: #81c4dd; - --sub-color: #7599b1; - --sub-alt-color: #b7cada; - --text-color: #3b4c58; - --error-color: #bf616a; - --error-extra-color: #793e44; - --colorful-error-color: #bf616a; - --colorful-error-extra-color: #793e44; -} diff --git a/frontend/static/themes/slambook.css b/frontend/static/themes/slambook.css deleted file mode 100644 index d112cb59d18e..000000000000 --- a/frontend/static/themes/slambook.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #fffdde; - --main-color: #03001c; - --caret-color: #367e18; - --sub-color: #1c82adc4; - --sub-alt-color: #c6dce4; - --text-color: #13005a; - --error-color: #f900bf; - --error-extra-color: #ce1212; - --colorful-error-color: #ce1212; - --colorful-error-extra-color: #3ec70b; -} diff --git a/frontend/static/themes/snes.css b/frontend/static/themes/snes.css index 460250393071..2466c7b7d7f0 100644 --- a/frontend/static/themes/snes.css +++ b/frontend/static/themes/snes.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #bfbec2; - --main-color: #553d94; - --caret-color: #523793; - --sub-color: #9f8ad4; - --sub-alt-color: #b5b0c2; - --text-color: #2e2e2e; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} - nav { gap: 0.5rem; } diff --git a/frontend/static/themes/soaring_skies.css b/frontend/static/themes/soaring_skies.css deleted file mode 100644 index a394ed18e370..000000000000 --- a/frontend/static/themes/soaring_skies.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #fff9f2; - --main-color: #55c6f0; - --caret-color: #1e107a; - --sub-color: #1e107a; - --sub-alt-color: #e5ddd4; - --text-color: #1d1e1e; - --error-color: #fb5745; - --error-extra-color: #b03c30; - --colorful-error-color: #fb5745; - --colorful-error-extra-color: #b03c30; -} diff --git a/frontend/static/themes/solarized_dark.css b/frontend/static/themes/solarized_dark.css deleted file mode 100644 index 8af1fe4e5e35..000000000000 --- a/frontend/static/themes/solarized_dark.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #002b36; - --main-color: #859900; - --caret-color: #dc322f; - --sub-color: #2aa198; - --sub-alt-color: #00222b; - --text-color: #268bd2; - --error-color: #d33682; - --error-extra-color: #9b225c; - --colorful-error-color: #d33682; - --colorful-error-extra-color: #9b225c; -} diff --git a/frontend/static/themes/solarized_light.css b/frontend/static/themes/solarized_light.css deleted file mode 100644 index 2705bc764cce..000000000000 --- a/frontend/static/themes/solarized_light.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #fdf6e3; - --main-color: #859900; - --caret-color: #dc322f; - --sub-color: #2aa198; - --sub-alt-color: #e2d8be; - --text-color: #181819; - --error-color: #d33682; - --error-extra-color: #9b225c; - --colorful-error-color: #d33682; - --colorful-error-extra-color: #9b225c; -} diff --git a/frontend/static/themes/solarized_osaka.css b/frontend/static/themes/solarized_osaka.css index c2cfea3469f4..954152ff4daa 100644 --- a/frontend/static/themes/solarized_osaka.css +++ b/frontend/static/themes/solarized_osaka.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #00141a; - --main-color: #859900; - --caret-color: #b58900; - --sub-color: #2aa198; - --sub-alt-color: #00222b; - --text-color: #eee8d5; - --error-color: #dc322f; - --error-extra-color: #9b225c; - --colorful-error-color: #d33682; - --colorful-error-extra-color: #9b225c; -} - #words { --correct-letter-color: var(--text-color); --untyped-letter-color: #586e75; diff --git a/frontend/static/themes/sonokai.css b/frontend/static/themes/sonokai.css deleted file mode 100644 index b644953ce3a0..000000000000 --- a/frontend/static/themes/sonokai.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #2c2e34; - --main-color: #9ed072; - --caret-color: #f38c71; - --sub-color: #e7c664; - --sub-alt-color: #232429; - --text-color: #e2e2e3; - --error-color: #fc5d7c; - --error-extra-color: #ecac6a; - --colorful-error-color: #fc5d7c; - --colorful-error-extra-color: #ecac6a; -} diff --git a/frontend/static/themes/spiderman.css b/frontend/static/themes/spiderman.css deleted file mode 100644 index 33f5c5dffd66..000000000000 --- a/frontend/static/themes/spiderman.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0d1219; - --main-color: #e23636; - --caret-color: #e23636; - --sub-color: #0476f2; - --sub-alt-color: #0b1c2e; - --text-color: #f0f0f0; - --error-color: #0476f2; - --error-extra-color: #0353a8; - --colorful-error-color: #0476f2; - --colorful-error-extra-color: #0353a8; -} diff --git a/frontend/static/themes/stealth.css b/frontend/static/themes/stealth.css index fb132e95ba9b..83c919f8986e 100644 --- a/frontend/static/themes/stealth.css +++ b/frontend/static/themes/stealth.css @@ -1,15 +1,3 @@ -:root { - --bg-color: #010203; - --main-color: #383e42; - --caret-color: #e25303; - --sub-color: #5e676e; - --sub-alt-color: #121212; - --text-color: #383e42; - --error-color: #e25303; - --error-extra-color: #73280c; - --colorful-error-color: #e25303; - --colorful-error-extra-color: #73280c; -} nav .textButton:nth-child(4) { color: #e25303; } diff --git a/frontend/static/themes/strawberry.css b/frontend/static/themes/strawberry.css deleted file mode 100644 index dacd5c190f56..000000000000 --- a/frontend/static/themes/strawberry.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #f37f83; - --main-color: #fcfcf8; - --caret-color: #fcfcf8; - --sub-color: #e53c58; - --sub-alt-color: #ef6e77; - --text-color: #fcfcf8; - --error-color: #fcd23f; - --error-extra-color: #d7ae1e; - --colorful-error-color: #fcd23f; - --colorful-error-extra-color: #d7ae1e; -} diff --git a/frontend/static/themes/striker.css b/frontend/static/themes/striker.css deleted file mode 100644 index 377b8b2cf404..000000000000 --- a/frontend/static/themes/striker.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #124883; - --main-color: #d7dcda; - --caret-color: #d7dcda; - --sub-color: #0f2d4e; - --sub-alt-color: #104176; - --text-color: #d6dbd9; - --error-color: #fb4934; - --error-extra-color: #cc241d; - --colorful-error-color: #fb4934; - --colorful-error-extra-color: #cc241d; -} diff --git a/frontend/static/themes/suisei.css b/frontend/static/themes/suisei.css index 5923984d8ed8..4f7af8777a88 100644 --- a/frontend/static/themes/suisei.css +++ b/frontend/static/themes/suisei.css @@ -1,17 +1,4 @@ -:root { - --bg-color: #3b4a62; - --main-color: #bef0ff; - --caret-color: #bef0ff; - --sub-color: #fe9841; - --sub-alt-color: #313e55; - --text-color: #dbdeeb; - --error-color: #ed2939; - --error-extra-color: #ce122c; - --colorful-error-color: #ed2939; - --colorful-error-extra-color: #ce122c; -} - -@keyframes pulse { +@keyframes suisei-pulse { 0% { transform: scale(1); } @@ -62,7 +49,7 @@ header nav > .showAlerts { } header nav > .textButton:hover, header nav > .showAlerts:hover { - animation: pulse 800ms ease-out infinite; + animation: suisei-pulse 800ms ease-out infinite; color: var(--main-color); background-color: var(--sub-alt-color); } diff --git a/frontend/static/themes/sunset.css b/frontend/static/themes/sunset.css index 6b867a87f679..a8b8d238f1aa 100644 --- a/frontend/static/themes/sunset.css +++ b/frontend/static/themes/sunset.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #211e24; - --main-color: #f79777; - --caret-color: #ffca99; - --sub-color: #5b578e; - --sub-alt-color: #161319; - --text-color: #f4e0c9; - --error-color: #66a1ff; - --error-extra-color: #376ca4; - --colorful-error-color: #66a1ff; - --colorful-error-extra-color: #376ca4; -} - nav > .textButton:nth-child(1), nav > .textButton:nth-child(2), nav > .textButton:nth-child(3), diff --git a/frontend/static/themes/superuser.css b/frontend/static/themes/superuser.css deleted file mode 100644 index a9a1a479c2be..000000000000 --- a/frontend/static/themes/superuser.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #262a33; - --main-color: #43ffaf; - --caret-color: #43ffaf; - --sub-color: #526777; - --sub-alt-color: #1f232c; - --text-color: #e5f7ef; - --error-color: #ff5f5f; - --error-extra-color: #d22a2a; - --colorful-error-color: #ff5f5f; - --colorful-error-extra-color: #d22a2a; -} diff --git a/frontend/static/themes/sweden.css b/frontend/static/themes/sweden.css deleted file mode 100644 index 25aa0a038bf5..000000000000 --- a/frontend/static/themes/sweden.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0058a3; - --main-color: #ffcc02; - --caret-color: #b5b5b5; - --sub-color: #57abdb; - --sub-alt-color: #024f8e; - --text-color: #ffffff; - --error-color: #e74040; - --error-extra-color: #a22f2f; - --colorful-error-color: #f56674; - --colorful-error-extra-color: #e33546; -} diff --git a/frontend/static/themes/tangerine.css b/frontend/static/themes/tangerine.css deleted file mode 100644 index 853d2c26daea..000000000000 --- a/frontend/static/themes/tangerine.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #ffede0; - --main-color: #fe5503; - --caret-color: #5d8500; - --sub-color: #ff9562; - --sub-alt-color: #fdd3bf; - --text-color: #3d1705; - --error-color: #7fb500; - --error-extra-color: #5f8700; - --colorful-error-color: #7fb500; - --colorful-error-extra-color: #5f8700; -} diff --git a/frontend/static/themes/taro.css b/frontend/static/themes/taro.css index 2ba361b2f0c6..85ae4b6eb01b 100644 --- a/frontend/static/themes/taro.css +++ b/frontend/static/themes/taro.css @@ -1,17 +1,3 @@ -:root { - /* --bg-color: linear-gradient(215deg, #cbb8ba, #706768); */ - --bg-color: #b3baff; - --main-color: #130f1a; - --caret-color: #00e9e5; - --sub-color: #6f6c91; - --sub-alt-color: #a3a7df; - --text-color: #130f1a; - --error-color: #ffe23e; - --error-extra-color: #fff1c3; - --colorful-error-color: #ffe23e; - --colorful-error-extra-color: #fff1c3; -} - .word.error { border-bottom: dotted 2px var(--text-color); } diff --git a/frontend/static/themes/terminal.css b/frontend/static/themes/terminal.css deleted file mode 100644 index 9297ba947b00..000000000000 --- a/frontend/static/themes/terminal.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #191a1b; - --caret-color: #79a617; - --main-color: #79a617; - --sub-color: #48494b; - --sub-alt-color: #141516; - --text-color: #e7eae0; - --error-color: #a61717; - --error-extra-color: #731010; - --colorful-error-color: #a61717; - --colorful-error-extra-color: #731010; -} diff --git a/frontend/static/themes/terra.css b/frontend/static/themes/terra.css deleted file mode 100644 index ebd08c383392..000000000000 --- a/frontend/static/themes/terra.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0c100e; - --main-color: #89c559; - --caret-color: #89c559; - --sub-color: #436029; - --sub-alt-color: #0f1d18; - --text-color: #f0edd1; - --error-color: #d3ca78; - --error-extra-color: #89844d; - --colorful-error-color: #d3ca78; - --colorful-error-extra-color: #89844d; -} diff --git a/frontend/static/themes/terrazzo.css b/frontend/static/themes/terrazzo.css index 852ded94039e..141625d9ef04 100644 --- a/frontend/static/themes/terrazzo.css +++ b/frontend/static/themes/terrazzo.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #f1e5da; - --main-color: #e0794e; - --caret-color: #e0794e; - --sub-color: #688e8f; - --sub-alt-color: #e3d3c6; - --text-color: #023e3b; - --error-color: #a01034; - --error-extra-color: #a01034; - --colorful-error-color: #a01034; - --colorful-error-extra-color: #a01034; -} - /* hide buttons while typing */ header.focus nav > .textButton { background: none; diff --git a/frontend/static/themes/terror_below.css b/frontend/static/themes/terror_below.css deleted file mode 100644 index 4532483efeed..000000000000 --- a/frontend/static/themes/terror_below.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0b1e1a; - --caret-color: #66ac92; - --main-color: #66ac92; - --sub-color: #015c53; - --sub-alt-color: #041715; - --text-color: #dceae5; - --error-color: #bf616a; - --error-extra-color: #793e44; - --colorful-error-color: #bf616a; - --colorful-error-extra-color: #793e44; -} diff --git a/frontend/static/themes/tiramisu.css b/frontend/static/themes/tiramisu.css deleted file mode 100644 index 8eb2abf46b88..000000000000 --- a/frontend/static/themes/tiramisu.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #cfc6b9; - --main-color: #c0976f; - --caret-color: #7d5448; - --sub-color: #c0976f; - --sub-alt-color: #d0bca7; - --text-color: #7d5448; - --error-color: #e9632d; - --error-extra-color: #e9632d; - --colorful-error-color: #e9632d; - --colorful-error-extra-color: #e9632d; -} diff --git a/frontend/static/themes/trackday.css b/frontend/static/themes/trackday.css index 3eb531213d46..d972d8b1f488 100644 --- a/frontend/static/themes/trackday.css +++ b/frontend/static/themes/trackday.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #464d66; - --main-color: #e0513e; - --caret-color: #475782; - --sub-color: #5c7eb9; - --sub-alt-color: #3d4359; - --text-color: #cfcfcf; - --error-color: #e44e4e; - --error-extra-color: #fd3f3f; - --colorful-error-color: #ff2e2e; - --colorful-error-extra-color: #bb2525; -} - nav > .textButton:nth-child(1) { color: #e0513e; } diff --git a/frontend/static/themes/trance.css b/frontend/static/themes/trance.css index 08e1cf37654b..9d314fe4418d 100644 --- a/frontend/static/themes/trance.css +++ b/frontend/static/themes/trance.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #00021b; - --main-color: #e51376; - --caret-color: #e51376; - --sub-color: #3c4c79; - --sub-alt-color: #18214c; - --text-color: #fff; - --error-color: #02d3b0; - --error-extra-color: #3f887c; - --colorful-error-color: #02d3b0; - --colorful-error-extra-color: #3f887c; -} - @keyframes trance { 0% { color: #e51376; diff --git a/frontend/static/themes/tron_orange.css b/frontend/static/themes/tron_orange.css deleted file mode 100644 index 23dd35d79154..000000000000 --- a/frontend/static/themes/tron_orange.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #0d1c1c; - --main-color: #f0e800; - --caret-color: #f0e800; - --sub-color: #ff6600; - --sub-alt-color: #9c9191; - --text-color: #ffffff; - --error-color: #ff0000; - --error-extra-color: #ff0000; - --colorful-error-color: #ff0000; - --colorful-error-extra-color: #ff0000; -} diff --git a/frontend/static/themes/vaporwave.css b/frontend/static/themes/vaporwave.css deleted file mode 100644 index e9d007c22373..000000000000 --- a/frontend/static/themes/vaporwave.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #a4a7ea; - --main-color: #e368da; - --caret-color: #28cafe; - --sub-color: #7c7faf; - --sub-alt-color: #989bd9; - --text-color: #f1ebf1; - --error-color: #573ca9; - --error-extra-color: #3d2b77; - --colorful-error-color: #28cafe; - --colorful-error-extra-color: #25a9ce; -} diff --git a/frontend/static/themes/vesper.css b/frontend/static/themes/vesper.css index c13b9a85e7fa..daacec339263 100644 --- a/frontend/static/themes/vesper.css +++ b/frontend/static/themes/vesper.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #101010; - --main-color: #ffc799; - --caret-color: #99ffe4; - --sub-color: #a0a0a0; - --sub-alt-color: #1c1c1c; - --text-color: #ffffff; - --error-color: #ff8080; - --error-extra-color: #b25959; - --colorful-error-color: #ff8080; - --colorful-error-extra-color: #b25959; -} - /* Background & Text Colors */ #notificationCenter .notif.bad { --notif-border-color: #b25959; diff --git a/frontend/static/themes/vesper_light.css b/frontend/static/themes/vesper_light.css index 00e227249399..d8c4e586c75a 100644 --- a/frontend/static/themes/vesper_light.css +++ b/frontend/static/themes/vesper_light.css @@ -1,16 +1,3 @@ -:root { - --bg-color: #ffffff; - --main-color: #fb7100; - --caret-color: #067a6e; - --sub-color: #a0a0a0; - --sub-alt-color: #fff8f4; - --text-color: #000000; - --error-color: #ed2839; - --error-extra-color: #ff6c72; - --colorful-error-color: #ed2839; - --colorful-error-extra-color: #ff6c72; -} - #testConfig .spacer { background: #efefef; } diff --git a/frontend/static/themes/viridescent.css b/frontend/static/themes/viridescent.css deleted file mode 100644 index f0bcaca8d446..000000000000 --- a/frontend/static/themes/viridescent.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #2c3333; - --main-color: #95d5b2; - --caret-color: #f0d3c9; - --sub-color: #84a98c; - --sub-alt-color: #232828; - --text-color: #e9f5db; - --error-color: #ff4646; - --error-extra-color: #ab2f2f; - --colorful-error-color: #bd4141; - --colorful-error-extra-color: #883434; -} diff --git a/frontend/static/themes/voc.css b/frontend/static/themes/voc.css deleted file mode 100644 index bc80ba861e01..000000000000 --- a/frontend/static/themes/voc.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #190618; - --main-color: #e0caac; - --caret-color: #e0caac; - --sub-color: #4c1e48; - --sub-alt-color: #2c0c28; - --text-color: #eeeae4; - --error-color: #af3735; - --error-extra-color: #7e2a29; - --colorful-error-color: #af3735; - --colorful-error-extra-color: #7e2a29; -} diff --git a/frontend/static/themes/vscode.css b/frontend/static/themes/vscode.css deleted file mode 100644 index 7fd41d46db61..000000000000 --- a/frontend/static/themes/vscode.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1e1e1e; - --main-color: #007acc; - --caret-color: #569cd6; - --sub-color: #4d4d4d; - --sub-alt-color: #191919; - --text-color: #d4d4d4; - --error-color: #f44747; - --error-extra-color: #f44747; - --colorful-error-color: #f44747; - --colorful-error-extra-color: #f44747; -} diff --git a/frontend/static/themes/watermelon.css b/frontend/static/themes/watermelon.css deleted file mode 100644 index c8c40e9459a7..000000000000 --- a/frontend/static/themes/watermelon.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1f4437; - --main-color: #d6686f; - --caret-color: #d6686f; - --sub-color: #3e7a65; - --sub-alt-color: #244d3f; - --text-color: #cdc6bc; - --error-color: #c82931; - --error-extra-color: #ac1823; - --colorful-error-color: #c82931; - --colorful-error-extra-color: #ac1823; -} diff --git a/frontend/static/themes/wavez.css b/frontend/static/themes/wavez.css deleted file mode 100644 index 4b383f00720d..000000000000 --- a/frontend/static/themes/wavez.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #1c292f; - --main-color: #6bde3b; - --caret-color: #6bde3b; - --sub-color: #1f5e6b; - --sub-alt-color: #1b3238; - --text-color: #e9efe6; - --error-color: #ca4754; - --error-extra-color: #7e2a33; - --colorful-error-color: #ca4754; - --colorful-error-extra-color: #7e2a33; -} diff --git a/frontend/static/themes/witch_girl.css b/frontend/static/themes/witch_girl.css deleted file mode 100644 index df603eef4964..000000000000 --- a/frontend/static/themes/witch_girl.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --bg-color: #f3dbda; - --main-color: #56786a; - --caret-color: #afc5bd; - --sub-color: #ddb4a7; - --sub-alt-color: #e7c8be; - --text-color: #56786a; - --error-color: #b29a91; - --error-extra-color: #b29a91; - --colorful-error-color: #b29a91; - --colorful-error-extra-color: #b29a91; -} diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts index d2801ddf620f..72b4aedbfcfb 100644 --- a/frontend/vitest.config.ts +++ b/frontend/vitest.config.ts @@ -37,6 +37,9 @@ export const projects: UserWorkspaceConfig[] = [ plugins, }, { + ssr: { + noExternal: ["@solidjs/meta"], + }, test: { name: { label: "jsx", color: "green" }, include: ["__tests__/**/*.spec.tsx"], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9c0a96742a24..61dd6e740737 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -279,6 +279,9 @@ importers: '@sentry/vite-plugin': specifier: 3.3.1 version: 3.3.1(encoding@0.1.13) + '@solidjs/meta': + specifier: 0.29.4 + version: 0.29.4(solid-js@1.9.10) '@ts-rest/core': specifier: 3.52.1 version: 3.52.1(@types/node@24.9.1)(zod@3.23.8) @@ -3268,6 +3271,11 @@ packages: engines: {node: '>=8.10'} hasBin: true + '@solidjs/meta@0.29.4': + resolution: {integrity: sha512-zdIWBGpR9zGx1p1bzIPqF5Gs+Ks/BH8R6fWhmUa/dcK1L2rUC8BAcZJzNRYBQv74kScf1TSOs0EY//Vd/I0V8g==} + peerDependencies: + solid-js: '>=1.8.4' + '@solidjs/testing-library@0.8.10': resolution: {integrity: sha512-qdeuIerwyq7oQTIrrKvV0aL9aFeuwTd86VYD3afdq5HYEwoox1OBTJy4y8A3TFZr8oAR0nujYgCzY/8wgHGfeQ==} engines: {node: '>= 14'} @@ -12990,6 +12998,10 @@ snapshots: ignore: 5.3.2 p-map: 4.0.0 + '@solidjs/meta@0.29.4(solid-js@1.9.10)': + dependencies: + solid-js: 1.9.10 + '@solidjs/testing-library@0.8.10(solid-js@1.9.10)': dependencies: '@testing-library/dom': 10.4.1