A native standalone styling engine for Steam on Windows and Linux
6 |
Inject custom styles into Steam's desktop and Big Picture Mode interfaces, browse an ever-growing storefront of community creations, easily manage your themes' settings and updates, and more.
7 |
8 |
9 |
10 |
11 | # Features
12 |
13 | ## Theming
14 |
15 | - Injects user generated CSS into any render target of Steam UI.
16 | - Mix and match multiple themes to your liking.
17 | - Supports "patches" for themes, allowing users to customize values using dropdowns, color pickers, and more.
18 | - Allows custom images and fonts to be used. (See [Creating Symlink](#creating-symlink))
19 | - "Profiles" allow you to save the state of multiple themes to reapply later.
20 |
21 | ## Theme Store
22 |
23 | - An integrated storefront for you to download user-submitted themes.
24 | - Prompts for updating your themes available in the 'Manage' tab.
25 | - Account support to enable the starring of themes.
26 |
27 | # Installation
28 |
29 | ## Downloading CSSLoader Desktop
30 |
31 | ### Windows
32 |
33 | 1. Download the latest CSSLoader Desktop `.msi` installer file from [Releases](https://github.com/beebls/CSSLoader-Desktop/releases/latest/).
34 | 2. Once downloaded, run the installer, and follow the onscreen instructions.
35 | 3. If this is your first time installing CSSLoader Desktop, upon launching the app you will be prompted to install CSSLoader's Backend. Click 'Install'
36 | 4. CSSLoader Desktop is now installed! Continue to [Creating Symlink](#creating-symlink) if you want to set up custom images/fonts.
37 |
38 | ### Linux/Steam Deck
39 |
40 | #### Installing CSSLoader's Backend
41 |
42 | 1. [Install Decky Loader using the instructions on the Decky repository.](https://github.com/SteamDeckHomebrew/decky-loader#-installation)
43 | 2. Run Steam's Big Picture mode or open game mode on Steam Deck.
44 | 3. Open the Quick Access Menu. (QAM Button, Ctrl + 2, Xbox + A, or PS + X)
45 | 4. Select the Decky tab, it has the icon of a power plug.
46 | 5. Select the store icon in the top right.
47 | 6. Search for 'CSS Loader' and install it.
48 | 7. Leave the store, and select CSS Loader from the plugin menu.
49 | 8. Select 'Download Themes', then go to the 'Settings' tab in the Theme Store.
50 | 9. Enable the toggle for "Enable Standalone Backend"
51 |
52 | #### Installing CSSLoader Desktop
53 |
54 | 1. Download the latest `.appimage` binary from [Releases](https://github.com/beebls/CSSLoader-Desktop/releases/latest/).
55 | 2. Running it will start CSSLoader Desktop.
56 | 3. Since CSSLoader Desktop cannot update the backend from the frontend, you will need to periodically open Steam Big Picture and update CSSLoader through Decky.
57 |
58 | ## Creating Symlink
59 |
60 | In order to have custom images, fonts, and other files work in themes, you need to create a symlink.
61 |
62 | If you are on Linux, you may skip this step as the symlink is created automatically.
63 |
64 | ### Windows
65 |
66 | In order to create the symlink, you must run CSSLoader's Backend at least once with Windows Developer Mode enabled.
67 |
68 | 1. Open Settings (Win + I)
69 | 2. Select 'Privacy & Security'
70 | - On Windows 10, this is called 'Updates and Security'
71 | 3. Select 'For developers'
72 | 4. Toggle 'Developer Mode' on.
73 | 5. Restart CSSLoader's Backend.
74 | - You can do this by opening CSSLoader Desktop, clicking on the 'Settings' tab, and pressing 'Kill Backend', followed by 'Force Start Backend'
75 | - Alternatively, you can restart your system.
76 | 6. Click on your system tray, and right click on the white paint roller icon.
77 | - If you see the text "Custom Images/Fonts Enabled", you're set!
78 | - You may disable Developer Mode after going through this process.
79 |
80 | # Building/Contribution
81 |
82 | ## Frontend
83 |
84 | As a Tauri app, you will need all of [Tauri's prerequisites](https://tauri.app/v1/guides/getting-started/prerequisites) to develop for CSSLoader Desktop.
85 |
86 | To start a dev server, clone this repository, then run
87 |
88 | ```
89 | npm i
90 | npm run tauri dev
91 | ```
92 |
93 | A maintained list of frontend bugs/upcoming features is available through our [project board](https://fyro.notion.site/31266833d05746b19d63a72c4a69b649), we refer to issues based on their IDs in the board.
94 |
95 | ## Store
96 |
97 | The DeckThemes store is managed under [a different github repository](https://github.com/beebls/DeckThemes).
98 |
99 | ## Backend
100 |
101 | CSSLoader's backend is managed under [a different github repository](https://github.com/suchmememanyskill/SDH-CSSLoader).
102 |
103 | # Acknowledgements
104 |
--------------------------------------------------------------------------------
/ThemeTypes.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction } from "react";
2 |
3 | export interface Theme {
4 | id: string;
5 | enabled: boolean; // used to be called checked
6 | name: string;
7 | display_name?: string;
8 | author: string;
9 | bundled: boolean; // deprecated
10 | require: number;
11 | version: string;
12 | patches: Patch[];
13 | dependencies: string[];
14 | flags: Flags[];
15 | created: number;
16 | modified: number;
17 | }
18 |
19 | export interface ThemePatchComponent {
20 | name: string;
21 | on: string;
22 | type: string;
23 | value: string;
24 | }
25 |
26 | export interface Patch {
27 | default: string;
28 | name: string;
29 | type: "dropdown" | "checkbox" | "slider" | "none";
30 | value: string;
31 | options: string[];
32 | components: ThemePatchComponent[];
33 | }
34 |
35 | export enum Flags {
36 | "isPreset" = "PRESET",
37 | "dontDisableDeps" = "KEEP_DEPENDENCIES",
38 | "optionalDeps" = "OPTIONAL_DEPENDENCIES",
39 | }
40 |
41 | // API TYPES
42 |
43 | export interface UserInfo {
44 | id: string;
45 | username: string;
46 | avatar: string;
47 | }
48 | export interface MinimalCSSThemeInfo {
49 | id: string;
50 | name: string;
51 | version: string;
52 | target: string;
53 | manifestVersion: number;
54 | specifiedAuthor: string;
55 | type: "Css" | "Audio";
56 | }
57 |
58 | export type BlobType = "Zip" | "Jpg";
59 |
60 | export interface APIBlob {
61 | id: string;
62 | blobType: BlobType;
63 | uploaded: Date;
64 | downloadCount: number;
65 | }
66 |
67 | export interface PartialCSSThemeInfo extends MinimalCSSThemeInfo {
68 | images: APIBlob[];
69 | download: APIBlob;
70 | author: UserInfo;
71 | submitted: Date;
72 | updated: Date;
73 | starCount: number;
74 | }
75 |
76 | export interface FullCSSThemeInfo extends PartialCSSThemeInfo {
77 | dependencies: MinimalCSSThemeInfo[];
78 | approved: boolean;
79 | disabled: boolean;
80 | description: string;
81 | source?: string;
82 | }
83 |
84 | export enum Permissions {
85 | "editAny" = "EditAnyPost",
86 | "approveSubs" = "ApproveThemeSubmissions",
87 | "viewSubs" = "ViewThemeSubmissions",
88 | "admin" = "ManageApi",
89 | }
90 |
91 | export interface AccountData extends UserInfo {
92 | permissions: Permissions[];
93 | }
94 |
95 | export interface StarredThemeList {
96 | total: number;
97 | items: PartialCSSThemeInfo[];
98 | }
99 |
100 | type ThemeErrorTitle = string;
101 | type ThemeErrorDescription = string;
102 | export type ThemeError = [ThemeErrorTitle, ThemeErrorDescription];
103 |
--------------------------------------------------------------------------------
/backend/backendHelpers/changePreset.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from "ThemeTypes";
2 | import { setThemeState } from "backend/pythonMethods";
3 |
4 | export async function changePreset(themeName: string, themeList: Theme[]) {
5 | return new Promise(async (resolve) => {
6 | // Disables all themes before enabling the preset
7 | await Promise.all(themeList.filter((e) => e.enabled).map((e) => setThemeState(e.name, false)));
8 |
9 | themeName !== "None" && (await setThemeState(themeName, true));
10 | resolve(true);
11 | });
12 | }
13 |
--------------------------------------------------------------------------------
/backend/backendHelpers/deletePreset.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from "ThemeTypes";
2 | import { changePreset } from "./changePreset";
3 | import { deleteTheme } from "backend/pythonMethods";
4 |
5 | export async function deletePreset(
6 | presetName: string,
7 | themes: Theme[],
8 | refreshThemes: (e?: boolean) => void
9 | ) {
10 | if (themes.find((e) => e.name === presetName)!.enabled) {
11 | await changePreset("Default Profile", themes);
12 | }
13 | await deleteTheme(presetName);
14 | refreshThemes();
15 | }
16 |
--------------------------------------------------------------------------------
/backend/backendHelpers/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./changePreset";
2 | export * from "./deletePreset";
3 |
--------------------------------------------------------------------------------
/backend/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./pythonMethods";
2 | export * from "./tauriMethods";
3 | export * from "./webFetches";
4 | export * from "./toast";
5 | export * from "./recursiveCheck";
6 | export * from "./wrappedInvoke";
7 | export * from "./sleep";
8 | export * from "./backendHelpers";
9 |
--------------------------------------------------------------------------------
/backend/pythonMethods/checkIfBackendIfStandalone.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export async function checkIfBackendIsStandalone() {
3 | return server!
4 | .callPluginMethod<{}, boolean>("is_standalone", {})
5 | .then((data) => {
6 | if (data.success) {
7 | return data.result;
8 | }
9 | return true;
10 | });
11 | }
12 |
--------------------------------------------------------------------------------
/backend/pythonMethods/deleteTheme.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function deleteTheme(themeName: string): Promise {
3 | return server!.callPluginMethod("delete_theme", { themeName: themeName });
4 | }
5 |
--------------------------------------------------------------------------------
/backend/pythonMethods/downloadThemeFromUrl.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function downloadThemeFromUrl(themeId: string): Promise {
3 | return server!.callPluginMethod("download_theme_from_url", {
4 | id: themeId,
5 | url: "https://api.deckthemes.com/",
6 | });
7 | }
8 |
--------------------------------------------------------------------------------
/backend/pythonMethods/dummyFunction.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export async function dummyFunction() {
3 | try {
4 | return await server!.callPluginMethod<{}, boolean>("dummy_function", {});
5 | } catch {
6 | // If backend is not running, fetch fails
7 | return false;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/backend/pythonMethods/fetchThemePath.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function fetchThemePath() {
3 | return server!.callPluginMethod<{}, string>("fetch_theme_path", {});
4 | }
5 |
--------------------------------------------------------------------------------
/backend/pythonMethods/generatePreset.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function generatePreset(name: string) {
3 | return server!.callPluginMethod("generate_preset_theme", { name: name });
4 | }
5 |
--------------------------------------------------------------------------------
/backend/pythonMethods/generatePresetFromThemeNames.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function generatePresetFromThemeNames(name: string, themeNames: string[]) {
3 | return server!.callPluginMethod("generate_preset_theme_from_theme_names", {
4 | name: name,
5 | themeNames: themeNames,
6 | });
7 | }
8 |
--------------------------------------------------------------------------------
/backend/pythonMethods/getBackendVersion.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function getBackendVersion(): Promise {
3 | return server!.callPluginMethod("get_backend_version", {});
4 | }
5 |
--------------------------------------------------------------------------------
/backend/pythonMethods/getInstalledThemes.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from "../../ThemeTypes";
2 | import { server } from "./server";
3 | export function getInstalledThemes(): Promise {
4 | return server!
5 | .callPluginMethod<{}, Theme[]>("get_themes", {})
6 | .then((data) => {
7 | if (data.success) {
8 | return data.result;
9 | }
10 | });
11 | }
12 |
--------------------------------------------------------------------------------
/backend/pythonMethods/getLastLoadErrors.ts:
--------------------------------------------------------------------------------
1 | import { ThemeError } from "../../ThemeTypes";
2 | import { server } from "./server";
3 | export function getLastLoadErrors(): Promise {
4 | return server!
5 | .callPluginMethod<{}, { fails: ThemeError[] }>("get_last_load_errors", {})
6 | .then((data) => {
7 | if (data.success) {
8 | return data.result.fails;
9 | }
10 | });
11 | }
12 |
--------------------------------------------------------------------------------
/backend/pythonMethods/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./checkIfBackendIfStandalone";
2 | export * from "./server";
3 | export * from "./dummyFunction";
4 | export * from "./getInstalledThemes";
5 | export * from "./reloadBackend";
6 | export * from "./setThemeState";
7 | export * from "./setPatchOfTheme";
8 | export * from "./setComponentOfThemePatch";
9 | export * from "./downloadThemeFromUrl";
10 | export * from "./storeRead";
11 | export * from "./storeWrite";
12 | export * from "./deleteTheme";
13 | export * from "./getBackendVersion";
14 | export * from "./generatePreset";
15 | export * from "./fetchThemePath";
16 | export * from "./generatePresetFromThemeNames";
17 | export * from "./getLastLoadErrors";
18 |
--------------------------------------------------------------------------------
/backend/pythonMethods/reloadBackend.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from "../../ThemeTypes";
2 | import { getInstalledThemes } from "./getInstalledThemes";
3 | import { server } from "./server";
4 | export function reloadBackend(): Promise {
5 | return server!.callPluginMethod("reset", {}).then(() => {
6 | return getInstalledThemes();
7 | });
8 | }
9 |
--------------------------------------------------------------------------------
/backend/pythonMethods/server.ts:
--------------------------------------------------------------------------------
1 | import { Body, fetch } from "@tauri-apps/api/http";
2 | export interface Server {
3 | callPluginMethod(
4 | methodName: string,
5 | args: TArgs
6 | ): Promise>;
7 | }
8 | export type ServerResponse = ServerResponseSuccess | ServerResponseError;
9 | interface ServerResponseSuccess {
10 | success: true;
11 | result: TRes;
12 | }
13 | interface ServerResponseError {
14 | success: false;
15 | result: string;
16 | }
17 | export const server: Server = {
18 | async callPluginMethod(methodName: string, args: any) {
19 | return fetch("http://127.0.0.1:35821/req", {
20 | method: "POST",
21 | body: Body.json({
22 | method: methodName,
23 | args: args,
24 | }),
25 | })
26 | .then((res) => {
27 | return res.data;
28 | })
29 | .then((json: any) => {
30 | return {
31 | result: json?.res || undefined,
32 | success: json?.success || false,
33 | };
34 | });
35 | },
36 | };
37 |
--------------------------------------------------------------------------------
/backend/pythonMethods/setComponentOfThemePatch.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function setComponentOfThemePatch(
3 | themeName: string,
4 | patchName: string,
5 | componentName: string,
6 | value: string
7 | ): Promise {
8 | return server!.callPluginMethod("set_component_of_theme_patch", {
9 | themeName: themeName,
10 | patchName: patchName,
11 | componentName: componentName,
12 | value: value,
13 | });
14 | }
15 |
--------------------------------------------------------------------------------
/backend/pythonMethods/setPatchOfTheme.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function setPatchOfTheme(
3 | themeName: string,
4 | patchName: string,
5 | value: string
6 | ): Promise {
7 | return server!.callPluginMethod("set_patch_of_theme", {
8 | themeName: themeName,
9 | patchName: patchName,
10 | value: value,
11 | });
12 | }
13 |
--------------------------------------------------------------------------------
/backend/pythonMethods/setThemeState.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function setThemeState(
3 | name: string,
4 | state: boolean,
5 | set_deps?: boolean,
6 | set_deps_value?: boolean
7 | ): Promise {
8 | return server!.callPluginMethod("set_theme_state", {
9 | name: name,
10 | state: state,
11 | set_deps: set_deps ?? true,
12 | set_deps_value: set_deps_value ?? true,
13 | });
14 | }
15 |
--------------------------------------------------------------------------------
/backend/pythonMethods/storeRead.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function storeRead(key: string) {
3 | return server!.callPluginMethod<{ key: string }, string>("store_read", {
4 | key: key,
5 | });
6 | }
7 |
--------------------------------------------------------------------------------
/backend/pythonMethods/storeWrite.ts:
--------------------------------------------------------------------------------
1 | import { server } from "./server";
2 | export function storeWrite(key: string, value: string) {
3 | return server!.callPluginMethod<{ key: string; val: string }, void>(
4 | "store_write",
5 | { key: key, val: value }
6 | );
7 | }
8 |
--------------------------------------------------------------------------------
/backend/recursiveCheck.ts:
--------------------------------------------------------------------------------
1 | export async function recursiveCheck(
2 | testFunc: any,
3 | onTrue: any,
4 | onFirstFalse: any
5 | ) {
6 | const recursive = async () => {
7 | const value = await testFunc();
8 | if (value) {
9 | onTrue();
10 | return;
11 | } else
12 | setTimeout(() => {
13 | recursive();
14 | }, 1000);
15 | };
16 |
17 | const value = await testFunc();
18 | if (value) {
19 | onTrue();
20 | return;
21 | } else {
22 | onFirstFalse();
23 | recursive();
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/backend/sleep.ts:
--------------------------------------------------------------------------------
1 | export function sleep(duration: number) {
2 | return new Promise((resolve) => {
3 | setTimeout(resolve, duration);
4 | });
5 | }
6 |
--------------------------------------------------------------------------------
/backend/tauriMethods/checkIfStandaloneBackendExists.ts:
--------------------------------------------------------------------------------
1 | import {
2 | BaseDirectory,
3 | exists,
4 | } from "@tauri-apps/api/fs";
5 | export async function checkIfStandaloneBackendExists() {
6 | const backendExists = await exists(
7 | "Microsoft\\Windows\\Start Menu\\Programs\\Startup\\CssLoader-Standalone-Headless.exe",
8 | {
9 | dir: BaseDirectory.Config,
10 | }
11 | );
12 | return backendExists;
13 | }
--------------------------------------------------------------------------------
/backend/tauriMethods/checkIfThemeExists.ts:
--------------------------------------------------------------------------------
1 | import { exists, BaseDirectory } from "@tauri-apps/api/fs";
2 |
3 | export async function checkIfThemeExists(themeName: string): Promise {
4 | return await exists(`homebrew/themes/${themeName}`, {
5 | dir: BaseDirectory.Home,
6 | });
7 | }
8 |
--------------------------------------------------------------------------------
/backend/tauriMethods/copyBackend.ts:
--------------------------------------------------------------------------------
1 | import { wrappedInvoke } from "backend/wrappedInvoke";
2 | export async function copyBackend(backendPath: string) {
3 | return await wrappedInvoke("copyBackend", [
4 | "Copy-Item",
5 | "-Path",
6 | backendPath,
7 | "-Destination",
8 | "([Environment]::GetFolderPath('Startup') + '\\CssLoader-Standalone-Headless.exe')",
9 | ]);
10 | }
11 |
--------------------------------------------------------------------------------
/backend/tauriMethods/downloadBackend.ts:
--------------------------------------------------------------------------------
1 | import { fetchNewestBackend } from "backend/webFetches";
2 | import semver from "semver";
3 | import { setStandaloneVersion } from "./setStandaloneVersion";
4 |
5 | export async function downloadBackend() {
6 | // Not sure if this is needed
7 | const { invoke } = await import("@tauri-apps/api");
8 |
9 | const release = await fetchNewestBackend();
10 | const url = release?.assets?.find((e: any) =>
11 | e.name.includes("Standalone-Headless.exe")
12 | ).browser_download_url;
13 | const version = semver.clean(release?.tag_name || "v1.0.0") || "v1.6.0";
14 | console.log(url);
15 | const test = await invoke("install_backend", {
16 | backendUrl: url,
17 | });
18 | if (!test.includes("ERROR")) {
19 | setStandaloneVersion(version);
20 | }
21 | return;
22 | }
23 |
--------------------------------------------------------------------------------
/backend/tauriMethods/downloadTemplate.ts:
--------------------------------------------------------------------------------
1 | import { invoke } from "@tauri-apps/api/tauri";
2 |
3 | export async function downloadTemplate(name: string) {
4 | return await invoke("download_template", { templateName: name });
5 | }
6 |
--------------------------------------------------------------------------------
/backend/tauriMethods/getOS.ts:
--------------------------------------------------------------------------------
1 | export async function getOS(): Promise {
2 | const { platform } = await import("@tauri-apps/api/os");
3 | return await platform();
4 | }
5 |
--------------------------------------------------------------------------------
/backend/tauriMethods/getStandaloneVersion.ts:
--------------------------------------------------------------------------------
1 | import { readTextFile, BaseDirectory } from "@tauri-apps/api/fs";
2 | export async function getStandaloneVersion() {
3 | const version = await readTextFile("standaloneVersion.txt", {
4 | dir: BaseDirectory.AppData,
5 | }).catch((err) => {
6 | return false;
7 | });
8 | return version;
9 | }
10 |
--------------------------------------------------------------------------------
/backend/tauriMethods/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./getStandaloneVersion";
2 | export * from "./killBackend";
3 | export * from "./setStandaloneVersion";
4 | export * from "./startBackend";
5 | export * from "./checkIfStandaloneBackendExists";
6 | export * from "./copyBackend";
7 | export * from "./getOS";
8 | export * from "./downloadTemplate";
9 | export * from "./downloadBackend";
10 | export * from "./checkIfThemeExists";
11 |
--------------------------------------------------------------------------------
/backend/tauriMethods/killBackend.ts:
--------------------------------------------------------------------------------
1 | export async function killBackend() {
2 | const { invoke } = await import("@tauri-apps/api");
3 | return await invoke("kill_standalone_backend", {});
4 | }
5 |
--------------------------------------------------------------------------------
/backend/tauriMethods/setStandaloneVersion.ts:
--------------------------------------------------------------------------------
1 | import {
2 | writeTextFile,
3 | BaseDirectory,
4 | createDir,
5 | exists,
6 | } from "@tauri-apps/api/fs";
7 | export async function setStandaloneVersion(value: string) {
8 | const appDataExists = await exists("", { dir: BaseDirectory.AppData });
9 | if (!appDataExists) {
10 | console.log("AppData dir does not exist! Creating.");
11 | await createDir("", { dir: BaseDirectory.AppData });
12 | }
13 | writeTextFile("standaloneVersion.txt", value, { dir: BaseDirectory.AppData });
14 | }
15 |
--------------------------------------------------------------------------------
/backend/tauriMethods/startBackend.ts:
--------------------------------------------------------------------------------
1 | import { dummyFunction } from "backend/pythonMethods";
2 | import { wrappedInvoke } from "backend/wrappedInvoke";
3 | export async function startBackend() {
4 | const isRunning = await dummyFunction();
5 | if (!isRunning) {
6 | return await wrappedInvoke("startBackend", [
7 | "Start-Process",
8 | "-FilePath",
9 | "([Environment]::GetFolderPath('Startup')",
10 | "+",
11 | "'\\CssLoader-Standalone-Headless.exe')",
12 | ]);
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/backend/tauriMethods/test.ts:
--------------------------------------------------------------------------------
1 | import { invoke } from "@tauri-apps/api/tauri";
2 |
3 | export async function test() {
4 | const test = await invoke("start_backend", {});
5 | console.log("TEST", test);
6 | }
7 |
--------------------------------------------------------------------------------
/backend/toast.ts:
--------------------------------------------------------------------------------
1 | import { toast as reactToast } from "react-toastify";
2 | export function toast(title: string, message?: string) {
3 | reactToast(`${title}${message ? ` - ${message}` : ""}`);
4 | }
5 |
--------------------------------------------------------------------------------
/backend/webFetches/checkForNewBackend.ts:
--------------------------------------------------------------------------------
1 | import { getStandaloneVersion } from "../";
2 | import { fetchNewestBackend } from "./fetchNewestBackend";
3 | import semver from "semver";
4 | export async function checkForNewBackend(): Promise {
5 | const current = await getStandaloneVersion();
6 | const remote = await fetchNewestBackend();
7 | const remoteVersion = remote?.tag_name;
8 | // This returns remoteVersion because if it's not valid, it means your current install borked
9 | if (!current || typeof current !== "string") return remoteVersion;
10 | if (!semver.valid(current)) return remoteVersion;
11 | // This is after ensuring you have a standaloneVersion.txt
12 | if (!remote) return false;
13 | if (!semver.valid(remoteVersion)) return false;
14 | if (semver.gt(remoteVersion, current)) {
15 | return remoteVersion;
16 | }
17 | return false;
18 | }
19 |
--------------------------------------------------------------------------------
/backend/webFetches/fetchNewestBackend.ts:
--------------------------------------------------------------------------------
1 | import { fetch } from "@tauri-apps/api/http";
2 | export async function fetchNewestBackend() {
3 | return await fetch(
4 | "https://api.github.com/repos/suchmememanyskill/SDH-CssLoader/releases/latest"
5 | )
6 | .then((res) => {
7 | return res.data;
8 | })
9 | .then((json) => {
10 | if (json) {
11 | return json;
12 | }
13 | return;
14 | })
15 | .catch((err) => {
16 | console.error("Error Fetching Latest Backend From Github!", err);
17 | return;
18 | });
19 | }
20 |
--------------------------------------------------------------------------------
/backend/webFetches/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./fetchNewestBackend";
2 | export * from "./checkForNewBackend";
3 |
--------------------------------------------------------------------------------
/backend/wrappedInvoke.ts:
--------------------------------------------------------------------------------
1 | import { Command } from "@tauri-apps/api/shell";
2 |
3 | export function wrappedInvoke(commandName: string, commandArgs: string[]) {
4 | return new Promise((resolve, reject) => {
5 | const command = new Command(commandName, commandArgs);
6 | command.on("close", (args: any) => resolve(args));
7 | command.on("error", (args: any) => reject(args));
8 | command.spawn();
9 | });
10 | }
11 |
--------------------------------------------------------------------------------
/components/AppRoot.tsx:
--------------------------------------------------------------------------------
1 | import { ToastContainer } from "react-toastify";
2 | import { MainNav } from "./Nav";
3 | import { DownloadBackendPage } from "./DownloadBackendPage";
4 | import { AppProps } from "next/app";
5 | import { useContext, useEffect, useRef } from "react";
6 | import { fontContext } from "@contexts/FontContext";
7 | import { BackendFailedPage } from "./BackendFailedPage";
8 | import { backendStatusContext } from "@contexts/backendStatusContext";
9 | import { themeContext } from "@contexts/themeContext";
10 | import { osContext } from "@contexts/osContext";
11 | import { useRouter } from "next/router";
12 |
13 | export function AppRoot({ Component, pageProps }: AppProps) {
14 | const router = useRouter();
15 |
16 | const { montserrat, openSans } = useContext(fontContext);
17 | const { isWindows } = useContext(osContext);
18 | const {
19 | dummyResult,
20 | backendExists,
21 | showNewBackendPage,
22 | newBackendVersion,
23 | setNewBackend,
24 | setShowNewBackend,
25 | } = useContext(backendStatusContext);
26 |
27 | const { refreshThemes } = useContext(themeContext);
28 |
29 | async function onUpdateFinish() {
30 | refreshThemes();
31 | setShowNewBackend(false);
32 | setNewBackend("");
33 | }
34 |
35 | const scrollableContainerRef = useRef(null);
36 |
37 | useEffect(() => {
38 | if (scrollableContainerRef.current) {
39 | scrollableContainerRef.current.scrollTop = 0;
40 | }
41 | }, [router.asPath]);
42 |
43 | return (
44 | // overflow-hidden rounded-b-lg
45 |
18 | {showModal && setShowModal(false)} />}
19 | e.flags.includes(Flags.isPreset) && e.enabled).length > 1
25 | ? "Invalid State"
26 | : selectedPreset?.display_name || selectedPreset?.name || "None"
27 | }
28 | options={[
29 | // This just ensures that default profile is the first result
30 | ...(themes.filter((e) => e.flags.includes(Flags.isPreset) && e.enabled).length > 1
31 | ? ["Invalid State"]
32 | : []),
33 | "None",
34 | ...presets.map((e) => e?.display_name || e.name),
35 | "New Profile",
36 | ]}
37 | onValueChange={async (e) => {
38 | if (e === "New Profile") {
39 | setShowModal(true);
40 | return;
41 | }
42 | if (e === "Invalid State") return;
43 | if (e === "None") {
44 | await changePreset(e, themes);
45 | }
46 | // since e is the display_name, and toggle uses the real name, need to find that...
47 | // Still checks name as a fallback
48 | const themeEntry = themes.find((f) => f?.display_name === e || f.name === e);
49 | if (themeEntry) {
50 | await changePreset(themeEntry.name, themes);
51 | }
52 | refreshThemes();
53 | }}
54 | />
55 |
56 | ,
63 | onSelect: async () => {
64 | deletePreset(selectedPreset!.name, themes, refreshThemes);
65 | },
66 | },
67 | ]}
68 | triggerClass={twMerge(
69 | "h-12 w-12 self-end rounded-xl border-2 border-borders-base1-dark bg-base-5.5-dark transition-all hover:border-borders-base2-dark",
70 | !selectedPreset && "opacity-50"
71 | )}
72 | />
73 |
74 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/components/Presets/PresetThemeNameDisplayCard.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { themeContext } from "@contexts/themeContext";
3 | import { BsXCircle } from "react-icons/bs";
4 | import { generatePresetFromThemeNames } from "backend";
5 | import { Tooltip } from "..";
6 |
7 | // This is the card that goes inside the PresetFolderView to say the name of one theme that is a dependency of it
8 | // Also has the remove from preset button
9 | export function PresetThemeNameDisplayCard({ themeName }: { themeName: string }) {
10 | const { selectedPreset, refreshThemes } = useContext(themeContext);
11 | return (
12 |