/* * Vencord, a modification for Discord's desktop app * Copyright (c) 2022 Vendicated and contributors * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ import { useSettings } from "@api/settings"; import ErrorBoundary from "@components/ErrorBoundary"; import { Link } from "@components/Link"; import { useAwaiter } from "@utils/misc"; import { findLazy } from "@webpack"; import { Card, Forms, Margins, React, TextArea } from "@webpack/common"; const TextAreaProps = findLazy(m => typeof m.textarea === "string"); function Validator({ link }: { link: string; }) { const [res, err, pending] = useAwaiter(() => fetch(link).then(res => { if (res.status > 300) throw `${res.status} ${res.statusText}`; const contentType = res.headers.get("Content-Type"); if (!contentType?.startsWith("text/css") && !contentType?.startsWith("text/plain")) throw "Not a CSS file. Remember to use the raw link!"; return "Okay!"; })); const text = pending ? "Checking..." : err ? `Error: ${err instanceof Error ? err.message : String(err)}` : "Valid!"; return {text}; } function Validators({ themeLinks }: { themeLinks: string[]; }) { if (!themeLinks.length) return null; return ( <> Validator This section will tell you whether your themes can successfully be loaded
{themeLinks.map(link => ( {link} ))}
); } export default ErrorBoundary.wrap(function () { const settings = useSettings(); const ref = React.useRef(); function onBlur() { settings.themeLinks = [...new Set( ref.current!.value .trim() .split(/\n+/) .map(s => s.trim()) .filter(Boolean) )]; } return ( <> Paste links to .css / .theme.css files here One link per line Be careful to use the raw links or github.io links! Find Themes:
BetterDiscord Themes Github
If using the BD site, click on "Source" somewhere below the Download button In the GitHub repository of your theme, find X.theme.css / X.css, click on it, then click the "Raw" button If the theme has configuration that requires you to edit the file:
  • • Make a github account
  • • Click the fork button on the top right
  • • Edit the file
  • • Use the link to your own repository instead
Themes