mirror/Vencord
1
0
Fork 0
mirror of https://github.com/Vendicated/Vencord.git synced 2025-02-24 15:35:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

Styles, Themes: Support themes and Quick CSS using the Styles API

Browse source
This commit is contained in:
Sqaaakoi 2025-01-20 03:58:48 +13:00
parent dc957fc8e6
commit 81c3b39029
No known key found for this signature in database
2 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/api/Styles.ts
View file

@ -46,11 +46,12 @@ function findDocuments() {
export function enableStyle(name: string) { export function enableStyle(name: string) {
const style = requireStyle(name); const style = requireStyle(name);
style.enabled = true;
compileStyle(style);
if (style.enabled) if (style.enabled)
return false; return false;
style.enabled = true;
compileStyle(style);
return true; return true;
} }
@ -61,13 +62,14 @@ export function enableStyle(name: string) {
*/ */
export function disableStyle(name: string) { export function disableStyle(name: string) {
const style = requireStyle(name); const style = requireStyle(name);
if (!style.enabled)
return false;
findDocuments().forEach(doc => { findDocuments().forEach(doc => {
[...doc.head.querySelectorAll<HTMLStyleElement>("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name)?.remove(); [...doc.head.querySelectorAll<HTMLStyleElement>("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name)?.remove();
}); });
if (!style.enabled)
return false;
style.enabled = false; style.enabled = false;
return true; return true;
} }
@ -86,6 +88,15 @@ export const toggleStyle = (name: string) => isStyleEnabled(name) ? disableStyle
*/ */
export const isStyleEnabled = (name: string) => requireStyle(name).enabled ?? false; export const isStyleEnabled = (name: string) => requireStyle(name).enabled ?? false;
/**
* @param style The new style object
* @see {@link enableStyle} for info on getting the name of an imported style
*/
export function setStyle(style: Style) {
styleMap.set(style.name, style);
(style.enabled ? enableStyle : disableStyle)(style.name);
}
/** /**
* Sets the variables of a style * Sets the variables of a style
* ```ts * ```ts

48
src/utils/quickCss.ts
View file

@ -17,19 +17,9 @@
*/ */
import { Settings, SettingsStore } from "@api/Settings"; import { Settings, SettingsStore } from "@api/Settings";
import { setStyle } from "@api/Styles";
import { ThemeStore } from "@webpack/common"; import { ThemeStore } from "@webpack/common";
let style: HTMLStyleElement;
let themesStyle: HTMLStyleElement;
function createStyle(id: string) {
const style = document.createElement("style");
style.id = id;
document.documentElement.append(style);
return style;
}
async function initSystemValues() { async function initSystemValues() {
const values = await VencordNative.themes.getSystemValues(); const values = await VencordNative.themes.getSystemValues();
const variables = Object.entries(values) const variables = Object.entries(values)
@ -37,27 +27,22 @@ async function initSystemValues() {
.map(([k, v]) => `--${k}: ${v};`) .map(([k, v]) => `--${k}: ${v};`)
.join(""); .join("");
createStyle("vencord-os-theme-values").textContent = `:root{${variables}}`; setStyle({
name: "vencord-os-theme-values",
source: `:root{${variables}}`,
enabled: true
});
} }
export async function toggle(isEnabled: boolean) { export async function toggle(isEnabled: boolean, css?: string) {
if (!style) { setStyle({
if (isEnabled) { name: "vencord-custom-css",
style = createStyle("vencord-custom-css"); source: css || await VencordNative.quickCss.get(),
VencordNative.quickCss.addChangeListener(css => { enabled: isEnabled
style.textContent = css; });
// At the time of writing this, changing textContent resets the disabled state
style.disabled = !Settings.useQuickCss;
});
style.textContent = await VencordNative.quickCss.get();
}
} else
style.disabled = !isEnabled;
} }
async function initThemes() { async function initThemes() {
themesStyle ??= createStyle("vencord-themes");
const { themeLinks, enabledThemes } = Settings; const { themeLinks, enabledThemes } = Settings;
// "darker" and "midnight" both count as dark // "darker" and "midnight" both count as dark
@ -85,7 +70,11 @@ async function initThemes() {
links.push(...localThemes); links.push(...localThemes);
} }
themesStyle.textContent = links.map(link => `@import url("${link.trim()}");`).join("\n"); setStyle({
name: "vencord-themes",
source: links.map(link => `@import url("${link.trim()}");`).join("\n"),
enabled: true
});
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
@ -93,6 +82,9 @@ document.addEventListener("DOMContentLoaded", () => {
initThemes(); initThemes();
toggle(Settings.useQuickCss); toggle(Settings.useQuickCss);
VencordNative.quickCss.addChangeListener(css => {
toggle(Settings.useQuickCss, css);
});
SettingsStore.addChangeListener("useQuickCss", toggle); SettingsStore.addChangeListener("useQuickCss", toggle);
SettingsStore.addChangeListener("themeLinks", initThemes); SettingsStore.addChangeListener("themeLinks", initThemes);