diff --git a/src/components/settings/tabs/themes/CspErrorCard.tsx b/src/components/settings/tabs/themes/CspErrorCard.tsx deleted file mode 100644 index ee885647e..000000000 --- a/src/components/settings/tabs/themes/CspErrorCard.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/* - * Vencord, a Discord client mod - * Copyright (c) 2025 Vendicated and contributors - * SPDX-License-Identifier: GPL-3.0-or-later - */ - -import { ErrorCard } from "@components/ErrorCard"; -import { Link } from "@components/Link"; -import { CspBlockedUrls, useCspErrors } from "@utils/cspViolations"; -import { Margins } from "@utils/margins"; -import { classes } from "@utils/misc"; -import { relaunch } from "@utils/native"; -import { useForceUpdater } from "@utils/react"; -import { Alerts, Button, Forms } from "@webpack/common"; - -export function CspErrorCard() { - if (IS_WEB) return null; - - const errors = useCspErrors(); - const forceUpdate = useForceUpdater(); - - if (!errors.length) return null; - - const isImgurHtmlDomain = (url: string) => url.startsWith("https://imgur.com/"); - - const allowUrl = async (url: string) => { - const { origin: baseUrl, host } = new URL(url); - - const result = await VencordNative.csp.requestAddOverride(baseUrl, ["connect-src", "img-src", "style-src", "font-src"], "Vencord Themes"); - if (result !== "ok") return; - - CspBlockedUrls.forEach(url => { - if (new URL(url).host === host) { - CspBlockedUrls.delete(url); - } - }); - - forceUpdate(); - - Alerts.show({ - title: "Restart Required", - body: "A restart is required to apply this change", - confirmText: "Restart now", - cancelText: "Later!", - onConfirm: relaunch - }); - }; - - const hasImgurHtmlDomain = errors.some(isImgurHtmlDomain); - - return ( - - Blocked Resources - Some images, styles, or fonts were blocked because they come from disallowed domains. - It is highly recommended to move them to GitHub or Imgur. But you may also allow domains if you fully trust them. - - After allowing a domain, you have to fully close (from tray / task manager) and restart {IS_DISCORD_DESKTOP ? "Discord" : "Vesktop"} to apply the change. - - - Blocked URLs -
- {errors.map((url, i) => ( -
- {i !== 0 && } -
- {url} - -
-
- ))} -
- - {hasImgurHtmlDomain && ( - <> - - - Imgur links should be direct links in the form of https://i.imgur.com/... - - To obtain a direct link, right-click the image and select "Copy image address". - - )} - - ); -} diff --git a/src/components/settings/tabs/themes/LocalThemesTab.tsx b/src/components/settings/tabs/themes/LocalThemesTab.tsx deleted file mode 100644 index 8d07a27cd..000000000 --- a/src/components/settings/tabs/themes/LocalThemesTab.tsx +++ /dev/null @@ -1,170 +0,0 @@ -/* - * Vencord, a Discord client mod - * Copyright (c) 2025 Vendicated and contributors - * SPDX-License-Identifier: GPL-3.0-or-later - */ - -import { Settings, useSettings } from "@api/Settings"; -import { classNameFactory } from "@api/Styles"; -import { FolderIcon, PaintbrushIcon, PencilIcon, PlusIcon, RestartIcon } from "@components/Icons"; -import { Link } from "@components/Link"; -import { QuickAction, QuickActionCard } from "@components/settings/QuickAction"; -import { openPluginModal } from "@components/settings/tabs/plugins/PluginModal"; -import { UserThemeHeader } from "@main/themes"; -import { findLazy } from "@webpack"; -import { Card, Forms, useEffect, useRef, useState } from "@webpack/common"; -import ClientThemePlugin from "plugins/clientTheme"; -import type { ComponentType, Ref, SyntheticEvent } from "react"; - -import { ThemeCard } from "./ThemeCard"; - -const cl = classNameFactory("vc-settings-theme-"); - -type FileInput = ComponentType<{ - ref: Ref; - onChange: (e: SyntheticEvent) => void; - multiple?: boolean; - filters?: { name?: string; extensions: string[]; }[]; -}>; - -const FileInput: FileInput = findLazy(m => m.prototype?.activateUploadDialogue && m.prototype.setRef); - -// When a local theme is enabled/disabled, update the settings -function onLocalThemeChange(fileName: string, value: boolean) { - if (value) { - if (Settings.enabledThemes.includes(fileName)) return; - Settings.enabledThemes = [...Settings.enabledThemes, fileName]; - } else { - Settings.enabledThemes = Settings.enabledThemes.filter(f => f !== fileName); - } -} - -async function onFileUpload(e: SyntheticEvent) { - e.stopPropagation(); - e.preventDefault(); - - if (!e.currentTarget?.files?.length) return; - const { files } = e.currentTarget; - - const uploads = Array.from(files, file => { - const { name } = file; - if (!name.endsWith(".css")) return; - - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onload = () => { - VencordNative.themes.uploadTheme(name, reader.result as string) - .then(resolve) - .catch(reject); - }; - reader.readAsText(file); - }); - }); - - await Promise.all(uploads); -} - -export function LocalThemesTab() { - const settings = useSettings(["enabledThemes"]); - - const fileInputRef = useRef(null); - - const [userThemes, setUserThemes] = useState(null); - - useEffect(() => { - refreshLocalThemes(); - }, []); - - async function refreshLocalThemes() { - const themes = await VencordNative.themes.getThemesList(); - setUserThemes(themes); - } - - return ( - <> - - Find Themes: -
- - BetterDiscord Themes - - GitHub -
- If using the BD site, click on "Download" and place the downloaded .theme.css file into your themes folder. - - - - External Resources - For security reasons, loading resources (styles, fonts, images, ...) from most sites is blocked. - Make sure all your assets are hosted on GitHub, GitLab, Codeberg, Imgur, Discord or Google Fonts. - - - - - <> - {IS_WEB ? - ( - - Upload Theme - { - await onFileUpload(e); - refreshLocalThemes(); - }} - multiple={true} - filters={[{ extensions: ["css"] }]} - /> - - } - Icon={PlusIcon} - /> - ) : ( - VencordNative.themes.openFolder()} - Icon={FolderIcon} - /> - )} - - VencordNative.quickCss.openEditor()} - Icon={PaintbrushIcon} - /> - - {Vencord.Plugins.isPluginEnabled(ClientThemePlugin.name) && ( - openPluginModal(ClientThemePlugin)} - Icon={PencilIcon} - /> - )} - - - -
- {userThemes?.map(theme => ( - onLocalThemeChange(theme.fileName, enabled)} - onDelete={async () => { - onLocalThemeChange(theme.fileName, false); - await VencordNative.themes.deleteTheme(theme.fileName); - refreshLocalThemes(); - }} - theme={theme} - /> - ))} -
- - - ); -} diff --git a/src/components/settings/tabs/themes/OnlineThemesTab.tsx b/src/components/settings/tabs/themes/OnlineThemesTab.tsx deleted file mode 100644 index faca96dcb..000000000 --- a/src/components/settings/tabs/themes/OnlineThemesTab.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - * Vencord, a Discord client mod - * Copyright (c) 2025 Vendicated and contributors - * SPDX-License-Identifier: GPL-3.0-or-later - */ - -import { useSettings } from "@api/Settings"; -import { Margins } from "@utils/margins"; -import { classes } from "@utils/misc"; -import { Card, Forms, TextArea, useState } from "@webpack/common"; - -export function OnlineThemesTab() { - const settings = useSettings(["themeLinks"]); - - const [themeText, setThemeText] = useState(settings.themeLinks.join("\n")); - - // When the user leaves the online theme textbox, update the settings - function onBlur() { - settings.themeLinks = [...new Set( - themeText - .trim() - .split(/\n+/) - .map(s => s.trim()) - .filter(Boolean) - )]; - } - - return ( - <> - - - This section is for advanced users. If you are having difficulties using it, use the - Local Themes tab instead. - - - - Paste links to css files here - One link per line - You can prefix lines with @light or @dark to toggle them based on your Discord theme - Make sure to use direct links to files (raw or github.io)! - - - -