forked from abner/for-legacy-web
Run prettier on all files.
This commit is contained in:
Paul
@@ -1,335 +1,360 @@
|
||||
import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
|
||||
import { createGlobalStyle } from "styled-components";
|
||||
import { connectState } from "../redux/connector";
|
||||
import { Children } from "../types/Preact";
|
||||
import { useEffect } from "preact/hooks";
|
||||
import { createContext } from "preact";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { createGlobalStyle } from "styled-components";
|
||||
|
||||
import { createContext } from "preact";
|
||||
import { useEffect } from "preact/hooks";
|
||||
|
||||
import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
|
||||
|
||||
import { connectState } from "../redux/connector";
|
||||
|
||||
import { Children } from "../types/Preact";
|
||||
|
||||
export type Variables =
|
||||
| "accent"
|
||||
| "background"
|
||||
| "foreground"
|
||||
| "block"
|
||||
| "message-box"
|
||||
| "mention"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "hover"
|
||||
| "scrollbar-thumb"
|
||||
| "scrollbar-track"
|
||||
| "primary-background"
|
||||
| "primary-header"
|
||||
| "secondary-background"
|
||||
| "secondary-foreground"
|
||||
| "secondary-header"
|
||||
| "tertiary-background"
|
||||
| "tertiary-foreground"
|
||||
| "status-online"
|
||||
| "status-away"
|
||||
| "status-busy"
|
||||
| "status-streaming"
|
||||
| "status-invisible"
|
||||
| "accent"
|
||||
| "background"
|
||||
| "foreground"
|
||||
| "block"
|
||||
| "message-box"
|
||||
| "mention"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "hover"
|
||||
| "scrollbar-thumb"
|
||||
| "scrollbar-track"
|
||||
| "primary-background"
|
||||
| "primary-header"
|
||||
| "secondary-background"
|
||||
| "secondary-foreground"
|
||||
| "secondary-header"
|
||||
| "tertiary-background"
|
||||
| "tertiary-foreground"
|
||||
| "status-online"
|
||||
| "status-away"
|
||||
| "status-busy"
|
||||
| "status-streaming"
|
||||
| "status-invisible";
|
||||
|
||||
// While this isn't used, it'd be good to keep this up to date as a reference or for future use
|
||||
export type HiddenVariables =
|
||||
| "font"
|
||||
| "ligatures"
|
||||
| "app-height"
|
||||
| "sidebar-active"
|
||||
| "monospace-font"
|
||||
| "font"
|
||||
| "ligatures"
|
||||
| "app-height"
|
||||
| "sidebar-active"
|
||||
| "monospace-font";
|
||||
|
||||
export type Fonts = 'Open Sans' | 'Inter' | 'Atkinson Hyperlegible' | 'Roboto' | 'Noto Sans' | 'Lato' | 'Bree Serif' | 'Montserrat' | 'Poppins' | 'Raleway' | 'Ubuntu' | 'Comic Neue';
|
||||
export type MonoscapeFonts = 'Fira Code' | 'Roboto Mono' | 'Source Code Pro' | 'Space Mono' | 'Ubuntu Mono';
|
||||
export type Fonts =
|
||||
| "Open Sans"
|
||||
| "Inter"
|
||||
| "Atkinson Hyperlegible"
|
||||
| "Roboto"
|
||||
| "Noto Sans"
|
||||
| "Lato"
|
||||
| "Bree Serif"
|
||||
| "Montserrat"
|
||||
| "Poppins"
|
||||
| "Raleway"
|
||||
| "Ubuntu"
|
||||
| "Comic Neue";
|
||||
export type MonoscapeFonts =
|
||||
| "Fira Code"
|
||||
| "Roboto Mono"
|
||||
| "Source Code Pro"
|
||||
| "Space Mono"
|
||||
| "Ubuntu Mono";
|
||||
|
||||
export type Theme = {
|
||||
[variable in Variables]: string;
|
||||
[variable in Variables]: string;
|
||||
} & {
|
||||
light?: boolean;
|
||||
font?: Fonts;
|
||||
css?: string;
|
||||
monoscapeFont?: MonoscapeFonts;
|
||||
light?: boolean;
|
||||
font?: Fonts;
|
||||
css?: string;
|
||||
monoscapeFont?: MonoscapeFonts;
|
||||
};
|
||||
|
||||
export interface ThemeOptions {
|
||||
preset?: string;
|
||||
ligatures?: boolean;
|
||||
custom?: Partial<Theme>;
|
||||
preset?: string;
|
||||
ligatures?: boolean;
|
||||
custom?: Partial<Theme>;
|
||||
}
|
||||
|
||||
// import aaa from "@fontsource/open-sans/300.css?raw";
|
||||
// console.info(aaa);
|
||||
|
||||
export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
|
||||
"Open Sans": {
|
||||
name: "Open Sans",
|
||||
load: async () => {
|
||||
await import("@fontsource/open-sans/300.css");
|
||||
await import("@fontsource/open-sans/400.css");
|
||||
await import("@fontsource/open-sans/600.css");
|
||||
await import("@fontsource/open-sans/700.css");
|
||||
await import("@fontsource/open-sans/400-italic.css");
|
||||
}
|
||||
},
|
||||
Inter: {
|
||||
name: "Inter",
|
||||
load: async () => {
|
||||
await import("@fontsource/inter/300.css");
|
||||
await import("@fontsource/inter/400.css");
|
||||
await import("@fontsource/inter/600.css");
|
||||
await import("@fontsource/inter/700.css");
|
||||
}
|
||||
},
|
||||
"Atkinson Hyperlegible": {
|
||||
name: "Atkinson Hyperlegible",
|
||||
load: async () => {
|
||||
await import("@fontsource/atkinson-hyperlegible/400.css");
|
||||
await import("@fontsource/atkinson-hyperlegible/700.css");
|
||||
await import("@fontsource/atkinson-hyperlegible/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Roboto": {
|
||||
name: "Roboto",
|
||||
load: async () => {
|
||||
await import("@fontsource/roboto/400.css");
|
||||
await import("@fontsource/roboto/700.css");
|
||||
await import("@fontsource/roboto/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Noto Sans": {
|
||||
name: "Noto Sans",
|
||||
load: async () => {
|
||||
await import("@fontsource/noto-sans/400.css");
|
||||
await import("@fontsource/noto-sans/700.css");
|
||||
await import("@fontsource/noto-sans/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Bree Serif": {
|
||||
name: "Bree Serif",
|
||||
load: () => import("@fontsource/bree-serif/400.css")
|
||||
},
|
||||
"Lato": {
|
||||
name: "Lato",
|
||||
load: async () => {
|
||||
await import("@fontsource/lato/300.css");
|
||||
await import("@fontsource/lato/400.css");
|
||||
await import("@fontsource/lato/700.css");
|
||||
await import("@fontsource/lato/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Montserrat": {
|
||||
name: "Montserrat",
|
||||
load: async () => {
|
||||
await import("@fontsource/montserrat/300.css");
|
||||
await import("@fontsource/montserrat/400.css");
|
||||
await import("@fontsource/montserrat/600.css");
|
||||
await import("@fontsource/montserrat/700.css");
|
||||
await import("@fontsource/montserrat/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Poppins": {
|
||||
name: "Poppins",
|
||||
load: async () => {
|
||||
await import("@fontsource/poppins/300.css");
|
||||
await import("@fontsource/poppins/400.css");
|
||||
await import("@fontsource/poppins/600.css");
|
||||
await import("@fontsource/poppins/700.css");
|
||||
await import("@fontsource/poppins/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Raleway": {
|
||||
name: "Raleway",
|
||||
load: async () => {
|
||||
await import("@fontsource/raleway/300.css");
|
||||
await import("@fontsource/raleway/400.css");
|
||||
await import("@fontsource/raleway/600.css");
|
||||
await import("@fontsource/raleway/700.css");
|
||||
await import("@fontsource/raleway/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Ubuntu": {
|
||||
name: "Ubuntu",
|
||||
load: async () => {
|
||||
await import("@fontsource/ubuntu/300.css");
|
||||
await import("@fontsource/ubuntu/400.css");
|
||||
await import("@fontsource/ubuntu/500.css");
|
||||
await import("@fontsource/ubuntu/700.css");
|
||||
await import("@fontsource/ubuntu/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Comic Neue": {
|
||||
name: "Comic Neue",
|
||||
load: async () => {
|
||||
await import("@fontsource/comic-neue/300.css");
|
||||
await import("@fontsource/comic-neue/400.css");
|
||||
await import("@fontsource/comic-neue/700.css");
|
||||
await import("@fontsource/comic-neue/400-italic.css");
|
||||
}
|
||||
}
|
||||
export const FONTS: Record<Fonts, { name: string; load: () => void }> = {
|
||||
"Open Sans": {
|
||||
name: "Open Sans",
|
||||
load: async () => {
|
||||
await import("@fontsource/open-sans/300.css");
|
||||
await import("@fontsource/open-sans/400.css");
|
||||
await import("@fontsource/open-sans/600.css");
|
||||
await import("@fontsource/open-sans/700.css");
|
||||
await import("@fontsource/open-sans/400-italic.css");
|
||||
},
|
||||
},
|
||||
Inter: {
|
||||
name: "Inter",
|
||||
load: async () => {
|
||||
await import("@fontsource/inter/300.css");
|
||||
await import("@fontsource/inter/400.css");
|
||||
await import("@fontsource/inter/600.css");
|
||||
await import("@fontsource/inter/700.css");
|
||||
},
|
||||
},
|
||||
"Atkinson Hyperlegible": {
|
||||
name: "Atkinson Hyperlegible",
|
||||
load: async () => {
|
||||
await import("@fontsource/atkinson-hyperlegible/400.css");
|
||||
await import("@fontsource/atkinson-hyperlegible/700.css");
|
||||
await import("@fontsource/atkinson-hyperlegible/400-italic.css");
|
||||
},
|
||||
},
|
||||
Roboto: {
|
||||
name: "Roboto",
|
||||
load: async () => {
|
||||
await import("@fontsource/roboto/400.css");
|
||||
await import("@fontsource/roboto/700.css");
|
||||
await import("@fontsource/roboto/400-italic.css");
|
||||
},
|
||||
},
|
||||
"Noto Sans": {
|
||||
name: "Noto Sans",
|
||||
load: async () => {
|
||||
await import("@fontsource/noto-sans/400.css");
|
||||
await import("@fontsource/noto-sans/700.css");
|
||||
await import("@fontsource/noto-sans/400-italic.css");
|
||||
},
|
||||
},
|
||||
"Bree Serif": {
|
||||
name: "Bree Serif",
|
||||
load: () => import("@fontsource/bree-serif/400.css"),
|
||||
},
|
||||
Lato: {
|
||||
name: "Lato",
|
||||
load: async () => {
|
||||
await import("@fontsource/lato/300.css");
|
||||
await import("@fontsource/lato/400.css");
|
||||
await import("@fontsource/lato/700.css");
|
||||
await import("@fontsource/lato/400-italic.css");
|
||||
},
|
||||
},
|
||||
Montserrat: {
|
||||
name: "Montserrat",
|
||||
load: async () => {
|
||||
await import("@fontsource/montserrat/300.css");
|
||||
await import("@fontsource/montserrat/400.css");
|
||||
await import("@fontsource/montserrat/600.css");
|
||||
await import("@fontsource/montserrat/700.css");
|
||||
await import("@fontsource/montserrat/400-italic.css");
|
||||
},
|
||||
},
|
||||
Poppins: {
|
||||
name: "Poppins",
|
||||
load: async () => {
|
||||
await import("@fontsource/poppins/300.css");
|
||||
await import("@fontsource/poppins/400.css");
|
||||
await import("@fontsource/poppins/600.css");
|
||||
await import("@fontsource/poppins/700.css");
|
||||
await import("@fontsource/poppins/400-italic.css");
|
||||
},
|
||||
},
|
||||
Raleway: {
|
||||
name: "Raleway",
|
||||
load: async () => {
|
||||
await import("@fontsource/raleway/300.css");
|
||||
await import("@fontsource/raleway/400.css");
|
||||
await import("@fontsource/raleway/600.css");
|
||||
await import("@fontsource/raleway/700.css");
|
||||
await import("@fontsource/raleway/400-italic.css");
|
||||
},
|
||||
},
|
||||
Ubuntu: {
|
||||
name: "Ubuntu",
|
||||
load: async () => {
|
||||
await import("@fontsource/ubuntu/300.css");
|
||||
await import("@fontsource/ubuntu/400.css");
|
||||
await import("@fontsource/ubuntu/500.css");
|
||||
await import("@fontsource/ubuntu/700.css");
|
||||
await import("@fontsource/ubuntu/400-italic.css");
|
||||
},
|
||||
},
|
||||
"Comic Neue": {
|
||||
name: "Comic Neue",
|
||||
load: async () => {
|
||||
await import("@fontsource/comic-neue/300.css");
|
||||
await import("@fontsource/comic-neue/400.css");
|
||||
await import("@fontsource/comic-neue/700.css");
|
||||
await import("@fontsource/comic-neue/400-italic.css");
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const MONOSCAPE_FONTS: Record<MonoscapeFonts, { name: string, load: () => void }> = {
|
||||
"Fira Code": {
|
||||
name: "Fira Code",
|
||||
load: () => import("@fontsource/fira-code/400.css")
|
||||
},
|
||||
"Roboto Mono": {
|
||||
name: "Roboto Mono",
|
||||
load: () => import("@fontsource/roboto-mono/400.css")
|
||||
},
|
||||
"Source Code Pro": {
|
||||
name: "Source Code Pro",
|
||||
load: () => import("@fontsource/source-code-pro/400.css")
|
||||
},
|
||||
"Space Mono": {
|
||||
name: "Space Mono",
|
||||
load: () => import("@fontsource/space-mono/400.css")
|
||||
},
|
||||
"Ubuntu Mono": {
|
||||
name: "Ubuntu Mono",
|
||||
load: () => import("@fontsource/ubuntu-mono/400.css")
|
||||
}
|
||||
export const MONOSCAPE_FONTS: Record<
|
||||
MonoscapeFonts,
|
||||
{ name: string; load: () => void }
|
||||
> = {
|
||||
"Fira Code": {
|
||||
name: "Fira Code",
|
||||
load: () => import("@fontsource/fira-code/400.css"),
|
||||
},
|
||||
"Roboto Mono": {
|
||||
name: "Roboto Mono",
|
||||
load: () => import("@fontsource/roboto-mono/400.css"),
|
||||
},
|
||||
"Source Code Pro": {
|
||||
name: "Source Code Pro",
|
||||
load: () => import("@fontsource/source-code-pro/400.css"),
|
||||
},
|
||||
"Space Mono": {
|
||||
name: "Space Mono",
|
||||
load: () => import("@fontsource/space-mono/400.css"),
|
||||
},
|
||||
"Ubuntu Mono": {
|
||||
name: "Ubuntu Mono",
|
||||
load: () => import("@fontsource/ubuntu-mono/400.css"),
|
||||
},
|
||||
};
|
||||
|
||||
export const FONT_KEYS = Object.keys(FONTS).sort();
|
||||
export const MONOSCAPE_FONT_KEYS = Object.keys(MONOSCAPE_FONTS).sort();
|
||||
|
||||
export const DEFAULT_FONT = 'Open Sans';
|
||||
export const DEFAULT_MONO_FONT = 'Fira Code';
|
||||
export const DEFAULT_FONT = "Open Sans";
|
||||
export const DEFAULT_MONO_FONT = "Fira Code";
|
||||
|
||||
// Generated from https://gitlab.insrt.uk/revolt/community/themes
|
||||
export const PRESETS: Record<string, Theme> = {
|
||||
light: {
|
||||
light: true,
|
||||
accent: "#FD6671",
|
||||
background: "#F6F6F6",
|
||||
foreground: "#101010",
|
||||
block: "#414141",
|
||||
"message-box": "#F1F1F1",
|
||||
mention: "rgba(251, 255, 0, 0.40)",
|
||||
success: "#65E572",
|
||||
warning: "#FAA352",
|
||||
error: "#F06464",
|
||||
hover: "rgba(0, 0, 0, 0.2)",
|
||||
"scrollbar-thumb": "#CA525A",
|
||||
"scrollbar-track": "transparent",
|
||||
"primary-background": "#FFFFFF",
|
||||
"primary-header": "#F1F1F1",
|
||||
"secondary-background": "#F1F1F1",
|
||||
"secondary-foreground": "#888888",
|
||||
"secondary-header": "#F1F1F1",
|
||||
"tertiary-background": "#4D4D4D",
|
||||
"tertiary-foreground": "#646464",
|
||||
"status-online": "#3ABF7E",
|
||||
"status-away": "#F39F00",
|
||||
"status-busy": "#F84848",
|
||||
"status-streaming": "#977EFF",
|
||||
"status-invisible": "#A5A5A5"
|
||||
},
|
||||
dark: {
|
||||
light: false,
|
||||
accent: "#FD6671",
|
||||
background: "#191919",
|
||||
foreground: "#F6F6F6",
|
||||
block: "#2D2D2D",
|
||||
"message-box": "#363636",
|
||||
mention: "rgba(251, 255, 0, 0.06)",
|
||||
success: "#65E572",
|
||||
warning: "#FAA352",
|
||||
error: "#F06464",
|
||||
hover: "rgba(0, 0, 0, 0.1)",
|
||||
"scrollbar-thumb": "#CA525A",
|
||||
"scrollbar-track": "transparent",
|
||||
"primary-background": "#242424",
|
||||
"primary-header": "#363636",
|
||||
"secondary-background": "#1E1E1E",
|
||||
"secondary-foreground": "#C8C8C8",
|
||||
"secondary-header": "#2D2D2D",
|
||||
"tertiary-background": "#4D4D4D",
|
||||
"tertiary-foreground": "#848484",
|
||||
"status-online": "#3ABF7E",
|
||||
"status-away": "#F39F00",
|
||||
"status-busy": "#F84848",
|
||||
"status-streaming": "#977EFF",
|
||||
"status-invisible": "#A5A5A5"
|
||||
},
|
||||
light: {
|
||||
light: true,
|
||||
accent: "#FD6671",
|
||||
background: "#F6F6F6",
|
||||
foreground: "#101010",
|
||||
block: "#414141",
|
||||
"message-box": "#F1F1F1",
|
||||
mention: "rgba(251, 255, 0, 0.40)",
|
||||
success: "#65E572",
|
||||
warning: "#FAA352",
|
||||
error: "#F06464",
|
||||
hover: "rgba(0, 0, 0, 0.2)",
|
||||
"scrollbar-thumb": "#CA525A",
|
||||
"scrollbar-track": "transparent",
|
||||
"primary-background": "#FFFFFF",
|
||||
"primary-header": "#F1F1F1",
|
||||
"secondary-background": "#F1F1F1",
|
||||
"secondary-foreground": "#888888",
|
||||
"secondary-header": "#F1F1F1",
|
||||
"tertiary-background": "#4D4D4D",
|
||||
"tertiary-foreground": "#646464",
|
||||
"status-online": "#3ABF7E",
|
||||
"status-away": "#F39F00",
|
||||
"status-busy": "#F84848",
|
||||
"status-streaming": "#977EFF",
|
||||
"status-invisible": "#A5A5A5",
|
||||
},
|
||||
dark: {
|
||||
light: false,
|
||||
accent: "#FD6671",
|
||||
background: "#191919",
|
||||
foreground: "#F6F6F6",
|
||||
block: "#2D2D2D",
|
||||
"message-box": "#363636",
|
||||
mention: "rgba(251, 255, 0, 0.06)",
|
||||
success: "#65E572",
|
||||
warning: "#FAA352",
|
||||
error: "#F06464",
|
||||
hover: "rgba(0, 0, 0, 0.1)",
|
||||
"scrollbar-thumb": "#CA525A",
|
||||
"scrollbar-track": "transparent",
|
||||
"primary-background": "#242424",
|
||||
"primary-header": "#363636",
|
||||
"secondary-background": "#1E1E1E",
|
||||
"secondary-foreground": "#C8C8C8",
|
||||
"secondary-header": "#2D2D2D",
|
||||
"tertiary-background": "#4D4D4D",
|
||||
"tertiary-foreground": "#848484",
|
||||
"status-online": "#3ABF7E",
|
||||
"status-away": "#F39F00",
|
||||
"status-busy": "#F84848",
|
||||
"status-streaming": "#977EFF",
|
||||
"status-invisible": "#A5A5A5",
|
||||
},
|
||||
};
|
||||
|
||||
const keys = Object.keys(PRESETS.dark);
|
||||
const GlobalTheme = createGlobalStyle<{ theme: Theme }>`
|
||||
:root {
|
||||
${(props) =>
|
||||
(Object.keys(props.theme) as Variables[]).map((key) => {
|
||||
if (!keys.includes(key)) return;
|
||||
return `--${key}: ${props.theme[key]};`;
|
||||
})}
|
||||
(Object.keys(props.theme) as Variables[]).map((key) => {
|
||||
if (!keys.includes(key)) return;
|
||||
return `--${key}: ${props.theme[key]};`;
|
||||
})}
|
||||
}
|
||||
`;
|
||||
|
||||
// Load the default default them and apply extras later
|
||||
export const ThemeContext = createContext<Theme>(PRESETS['dark']);
|
||||
export const ThemeContext = createContext<Theme>(PRESETS["dark"]);
|
||||
|
||||
interface Props {
|
||||
children: Children;
|
||||
options?: ThemeOptions;
|
||||
children: Children;
|
||||
options?: ThemeOptions;
|
||||
}
|
||||
|
||||
function Theme({ children, options }: Props) {
|
||||
const theme: Theme = {
|
||||
...PRESETS["dark"],
|
||||
...PRESETS[options?.preset ?? ''],
|
||||
...options?.custom
|
||||
};
|
||||
const theme: Theme = {
|
||||
...PRESETS["dark"],
|
||||
...PRESETS[options?.preset ?? ""],
|
||||
...options?.custom,
|
||||
};
|
||||
|
||||
const root = document.documentElement.style;
|
||||
useEffect(() => {
|
||||
const font = theme.font ?? DEFAULT_FONT;
|
||||
root.setProperty('--font', `"${font}"`);
|
||||
FONTS[font].load();
|
||||
}, [ theme.font ]);
|
||||
const root = document.documentElement.style;
|
||||
useEffect(() => {
|
||||
const font = theme.font ?? DEFAULT_FONT;
|
||||
root.setProperty("--font", `"${font}"`);
|
||||
FONTS[font].load();
|
||||
}, [theme.font]);
|
||||
|
||||
useEffect(() => {
|
||||
const font = theme.monoscapeFont ?? DEFAULT_MONO_FONT;
|
||||
root.setProperty('--monoscape-font', `"${font}"`);
|
||||
MONOSCAPE_FONTS[font].load();
|
||||
}, [ theme.monoscapeFont ]);
|
||||
useEffect(() => {
|
||||
const font = theme.monoscapeFont ?? DEFAULT_MONO_FONT;
|
||||
root.setProperty("--monoscape-font", `"${font}"`);
|
||||
MONOSCAPE_FONTS[font].load();
|
||||
}, [theme.monoscapeFont]);
|
||||
|
||||
useEffect(() => {
|
||||
root.setProperty('--ligatures', options?.ligatures ? 'normal' : 'none');
|
||||
}, [ options?.ligatures ]);
|
||||
useEffect(() => {
|
||||
root.setProperty("--ligatures", options?.ligatures ? "normal" : "none");
|
||||
}, [options?.ligatures]);
|
||||
|
||||
useEffect(() => {
|
||||
const resize = () => root.setProperty('--app-height', `${window.innerHeight}px`);
|
||||
resize();
|
||||
useEffect(() => {
|
||||
const resize = () =>
|
||||
root.setProperty("--app-height", `${window.innerHeight}px`);
|
||||
resize();
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
return () => window.removeEventListener('resize', resize);
|
||||
}, []);
|
||||
window.addEventListener("resize", resize);
|
||||
return () => window.removeEventListener("resize", resize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={theme}>
|
||||
<Helmet>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content={
|
||||
isTouchscreenDevice
|
||||
? theme["primary-header"]
|
||||
: theme["background"]
|
||||
}
|
||||
/>
|
||||
</Helmet>
|
||||
<GlobalTheme theme={theme} />
|
||||
{theme.css && (
|
||||
<style dangerouslySetInnerHTML={{ __html: theme.css }} />
|
||||
)}
|
||||
{ children }
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
return (
|
||||
<ThemeContext.Provider value={theme}>
|
||||
<Helmet>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content={
|
||||
isTouchscreenDevice
|
||||
? theme["primary-header"]
|
||||
: theme["background"]
|
||||
}
|
||||
/>
|
||||
</Helmet>
|
||||
<GlobalTheme theme={theme} />
|
||||
{theme.css && (
|
||||
<style dangerouslySetInnerHTML={{ __html: theme.css }} />
|
||||
)}
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default connectState<{ children: Children }>(Theme, state => {
|
||||
return {
|
||||
options: state.settings.theme
|
||||
};
|
||||
export default connectState<{ children: Children }>(Theme, (state) => {
|
||||
return {
|
||||
options: state.settings.theme,
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user