revite/src/context/Theme.tsx

import { createGlobalStyle } from "styled-components";

// ! TEMP START
const a = {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)","sidebar-active":"#FD6671","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"};

export const GlobalTheme = createGlobalStyle`
:root {
	${
		Object.keys(a)
			.map(key => {
				// eslint-disable-next-line @typescript-eslint/no-explicit-any
				return `--${key}: ${(a as any)[key]};`;
			})
	}
}
`;
// ! TEMP END