Allow online themes to be applied only in dark or light mode (#2701)
This commit is contained in:
parent
d0ad4e6c1d
commit
27e81b20db
|
@ -77,8 +77,16 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
|
||||||
<Forms.FormTitle className={Margins.top20} tag="h5">Validator</Forms.FormTitle>
|
<Forms.FormTitle className={Margins.top20} tag="h5">Validator</Forms.FormTitle>
|
||||||
<Forms.FormText>This section will tell you whether your themes can successfully be loaded</Forms.FormText>
|
<Forms.FormText>This section will tell you whether your themes can successfully be loaded</Forms.FormText>
|
||||||
<div>
|
<div>
|
||||||
{themeLinks.map(link => (
|
{themeLinks.map(rawLink => {
|
||||||
<Card style={{
|
const { label, link } = (() => {
|
||||||
|
const match = /^@(light|dark) (.*)/.exec(rawLink);
|
||||||
|
if (!match) return { label: rawLink, link: rawLink };
|
||||||
|
|
||||||
|
const [, mode, link] = match;
|
||||||
|
return { label: `[${mode} mode only] ${link}`, link };
|
||||||
|
})();
|
||||||
|
|
||||||
|
return <Card style={{
|
||||||
padding: ".5em",
|
padding: ".5em",
|
||||||
marginBottom: ".5em",
|
marginBottom: ".5em",
|
||||||
marginTop: ".5em"
|
marginTop: ".5em"
|
||||||
|
@ -86,11 +94,11 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
|
||||||
<Forms.FormTitle tag="h5" style={{
|
<Forms.FormTitle tag="h5" style={{
|
||||||
overflowWrap: "break-word"
|
overflowWrap: "break-word"
|
||||||
}}>
|
}}>
|
||||||
{link}
|
{label}
|
||||||
</Forms.FormTitle>
|
</Forms.FormTitle>
|
||||||
<Validator link={link} />
|
<Validator link={link} />
|
||||||
</Card>
|
</Card>;
|
||||||
))}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -296,6 +304,7 @@ function ThemesTab() {
|
||||||
<Card className="vc-settings-card vc-text-selectable">
|
<Card className="vc-settings-card vc-text-selectable">
|
||||||
<Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
|
<Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
|
||||||
<Forms.FormText>One link per line</Forms.FormText>
|
<Forms.FormText>One link per line</Forms.FormText>
|
||||||
|
<Forms.FormText>You can prefix lines with @light or @dark to toggle them based on your Discord theme</Forms.FormText>
|
||||||
<Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
|
<Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,7 @@ import { Margins } from "@utils/margins";
|
||||||
import { classes } from "@utils/misc";
|
import { classes } from "@utils/misc";
|
||||||
import definePlugin, { OptionType, StartAt } from "@utils/types";
|
import definePlugin, { OptionType, StartAt } from "@utils/types";
|
||||||
import { findByCodeLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
|
import { findByCodeLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
|
||||||
import { Button, Forms, useStateFromStores } from "@webpack/common";
|
import { Button, Forms, ThemeStore, useStateFromStores } from "@webpack/common";
|
||||||
|
|
||||||
const ColorPicker = findComponentByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
|
const ColorPicker = findComponentByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
|
||||||
|
|
||||||
|
@ -36,7 +36,6 @@ function setTheme(theme: string) {
|
||||||
saveClientTheme({ theme });
|
saveClientTheme({ theme });
|
||||||
}
|
}
|
||||||
|
|
||||||
const ThemeStore = findStoreLazy("ThemeStore");
|
|
||||||
const NitroThemeStore = findStoreLazy("ClientThemesBackgroundStore");
|
const NitroThemeStore = findStoreLazy("ClientThemesBackgroundStore");
|
||||||
|
|
||||||
function ThemeSettings() {
|
function ThemeSettings() {
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Settings, SettingsStore } from "@api/Settings";
|
import { Settings, SettingsStore } from "@api/Settings";
|
||||||
|
import { ThemeStore } from "@webpack/common";
|
||||||
|
|
||||||
|
|
||||||
let style: HTMLStyleElement;
|
let style: HTMLStyleElement;
|
||||||
|
@ -59,7 +60,18 @@ async function initThemes() {
|
||||||
|
|
||||||
const { themeLinks, enabledThemes } = Settings;
|
const { themeLinks, enabledThemes } = Settings;
|
||||||
|
|
||||||
const links: string[] = [...themeLinks];
|
// "darker" and "midnight" both count as dark
|
||||||
|
const activeTheme = ThemeStore.theme === "light" ? "light" : "dark";
|
||||||
|
|
||||||
|
const links = themeLinks
|
||||||
|
.map(rawLink => {
|
||||||
|
const match = /^@(light|dark) (.*)/.exec(rawLink);
|
||||||
|
if (!match) return rawLink;
|
||||||
|
|
||||||
|
const [, mode, link] = match;
|
||||||
|
return mode === activeTheme ? link : null;
|
||||||
|
})
|
||||||
|
.filter(link => link !== null);
|
||||||
|
|
||||||
if (IS_WEB) {
|
if (IS_WEB) {
|
||||||
for (const theme of enabledThemes) {
|
for (const theme of enabledThemes) {
|
||||||
|
@ -85,6 +97,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
|
||||||
SettingsStore.addChangeListener("themeLinks", initThemes);
|
SettingsStore.addChangeListener("themeLinks", initThemes);
|
||||||
SettingsStore.addChangeListener("enabledThemes", initThemes);
|
SettingsStore.addChangeListener("enabledThemes", initThemes);
|
||||||
|
ThemeStore.addChangeListener(initThemes);
|
||||||
|
|
||||||
if (!IS_WEB)
|
if (!IS_WEB)
|
||||||
VencordNative.quickCss.addThemeChangeListener(initThemes);
|
VencordNative.quickCss.addThemeChangeListener(initThemes);
|
||||||
|
|
|
@ -53,6 +53,7 @@ export let RelationshipStore: Stores.RelationshipStore & t.FluxStore & {
|
||||||
};
|
};
|
||||||
|
|
||||||
export let EmojiStore: t.EmojiStore;
|
export let EmojiStore: t.EmojiStore;
|
||||||
|
export let ThemeStore: t.ThemeStore;
|
||||||
export let WindowStore: t.WindowStore;
|
export let WindowStore: t.WindowStore;
|
||||||
export let DraftStore: t.DraftStore;
|
export let DraftStore: t.DraftStore;
|
||||||
|
|
||||||
|
@ -84,3 +85,4 @@ waitForStore("GuildChannelStore", m => GuildChannelStore = m);
|
||||||
waitForStore("MessageStore", m => MessageStore = m);
|
waitForStore("MessageStore", m => MessageStore = m);
|
||||||
waitForStore("WindowStore", m => WindowStore = m);
|
waitForStore("WindowStore", m => WindowStore = m);
|
||||||
waitForStore("EmojiStore", m => EmojiStore = m);
|
waitForStore("EmojiStore", m => EmojiStore = m);
|
||||||
|
waitForStore("ThemeStore", m => ThemeStore = m);
|
||||||
|
|
8
src/webpack/common/types/stores.d.ts
vendored
8
src/webpack/common/types/stores.d.ts
vendored
|
@ -220,6 +220,14 @@ export class GuildStore extends FluxStore {
|
||||||
getAllGuildRoles(): Record<string, Record<string, Role>>;
|
getAllGuildRoles(): Record<string, Record<string, Role>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class ThemeStore extends FluxStore {
|
||||||
|
theme: "light" | "dark" | "darker" | "midnight";
|
||||||
|
darkSidebar: boolean;
|
||||||
|
isSystemThemeAvailable: boolean;
|
||||||
|
systemPrefersColorScheme: "light" | "dark";
|
||||||
|
systemTheme: null;
|
||||||
|
}
|
||||||
|
|
||||||
export type useStateFromStores = <T>(
|
export type useStateFromStores = <T>(
|
||||||
stores: t.FluxStore[],
|
stores: t.FluxStore[],
|
||||||
mapper: () => T,
|
mapper: () => T,
|
||||||
|
|
Loading…
Reference in a new issue