feat: themes

postcss.config.cjs

@@ -1,6 +1,7 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    plugins: {
+        'tailwindcss/nesting': {},
+        'tailwindcss': {},
+        'autoprefixer': {},
+    },
+};

src/components/Button.tsx

@@ -9,7 +9,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const Button: React.FC<ButtonProps> = ({ loading, className, children, ...props }) => (
     <button
         className={classNames(
-            'px-4 py-2 rounded-md ring-0 ring-opacity-50 ring-inherit',
+            'px-4 py-2 rounded-md ring-0 ring-theme-primary',
             'duration-300 focus:ring-4',
             className,
         )}

src/components/Card.tsx

@@ -2,11 +2,12 @@ import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 
 export const Card: React.FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...props }) => (
+
     <div
         className={
             classNames(
-                'bg-silver-800 rounded-xl drop-shadow px-5 py-4',
-                { 'cursor-pointer hover:bg-silver-700 hover:drop-shadow-lg transition duration-200': props.onClick },
+                'rounded-xl bg-theme-pd text-theme-text drop-shadow px-5 py-4',
+                { 'cursor-pointer hover:bg-theme-pd hover:-translate-y-1 hover:drop-shadow-lg transition duration-200': props.onClick },
                 className,
             )
         }

src/components/Input.tsx

@@ -18,7 +18,7 @@ export const Input: React.FC<InputProps> = ({ label, error, className, ...props
             className={classNames(
                 'px-4 py-2 rounded-md bg-transparent outline-0 ring-0 border-2 block',
                 'duration-300 focus:ring-4 focus:ring-opacity-50',
-                { 'border-silver-600': !error, 'border-red-500': error, 'ring-silver-600': !error, 'ring-red-500': error },
+                { 'border-theme-workspace-pd': !error, 'border-red-500': error, 'ring-theme-workspace-pd': !error, 'ring-red-500': error },
                 className,
             )}
             {...props}
@@ -133,11 +133,11 @@ export const ToggleInput: React.FC<InputHTMLAttributes<HTMLInputElement>> = forw
                 className={classNames('opacity-0 w-full h-full cursor-pointer peer', className)}
                 {...props}
             />
-            <div className="absolute top-0 left-0 w-full h-full rounded-full bg-silver-700 pointer-events-none" />
+            <div className="absolute top-0 left-0 w-full h-full rounded-full bg-theme-workspace-pd pointer-events-none" />
             <div
                 className={classNames(
-                    'absolute top-1 left-1 w-3 h-3 rounded-full bg-silver-600 duration-100 pointer-events-none',
-                    'peer-checked:bg-amethyst-400 peer-checked:left-6',
+                    'absolute top-1 left-1 w-3 h-3 rounded-full bg-theme-pd duration-100 pointer-events-none',
+                    'peer-checked:bg-theme-primary peer-checked:left-6',
                 )}
             />
         </div>

src/components/Instrument.tsx

@@ -186,10 +186,10 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
         >
-            <div className="absolute bottom-full w-full box-content border-2 border-b-0 border-silver-800 bg-silver-800 rounded-t-xl pointer-events-auto">
+            <div className="absolute bottom-full w-full box-content border-2 border-b-0 border-theme-pd bg-theme-pd rounded-t-xl">
                 <div className="absolute -top-0.5 w-full flex justify-center">
                     <span
-                        className="w-1/4 h-2 bg-silver-700 rounded-b-full outline-0"
+                        className="w-1/4 h-2 bg-theme-workspace-pd rounded-b-full outline-0"
                         ref={setNodeRef}
                         {...listeners}
                         {...attributes}
@@ -202,15 +202,20 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
                     </Tippy>
                     <Tippy content="Refresh Instrument" appendTo={document.body}>
                         <button className="ml-auto" onClick={refresh}>
-                            <HiRefresh className="cursor-pointer active:text-silver-500" size={22} />
+                            <HiRefresh className="cursor-pointer active:text-theme-pd" size={22} />
                         </button>
                     </Tippy>
                     <Tippy content="Toggle Auto-Refresh" appendTo={document.body}>
                         <ToggleInput onClick={handleWatch} />
                     </Tippy>
                 </div>
             </div>
-            <div className="absolute w-full h-full box-content border-2 border-silver-700 bg-black">
+            <div
+                className={classNames(
+                    'absolute w-full h-full box-content border-2 border-theme-workspace-pd bg-black',
+                    { 'pointer-events-none': !interactable },
+                )}
+            >
                 <InstrumentFrame ref={iframeRef} name={name} width={width} height={height} />
             </div>
         </div>

src/components/contextmenu/CanvasMenu.tsx

@@ -34,7 +34,7 @@ export const CanvasMenu: React.FC<Omit<ContextMenuProps, 'children'>> = (props)
 
     return (
         <ContextMenu {...props}>
-            <div className="px-4 py-3 bg-silver-700/50 border-b-2 border-b-silver-700 font-medium">
+            <div className="px-4 py-3 bg-theme-pd border-b-2 border-b-theme-workspace-pd font-medium">
                 Instruments
             </div>
             {instruments.map((instrument) => (

src/components/contextmenu/ElementMenu.tsx

@@ -18,7 +18,7 @@ export const ElementMenu: React.FC<ElementMenuProps> = ({ element, ...props }) =
 
     return (
         <ContextMenu {...props}>
-            <div className="px-4 py-3 bg-silver-700/50 border-b-2 border-b-silver-700 font-medium">
+            <div className="px-4 py-3 bg-theme-bg border-b-2 border-b-theme-workspace-pd font-medium">
                 {element.name}
             </div>
             <button

src/components/contextmenu/index.tsx

@@ -27,7 +27,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({ x, y, children }) => {
             tabIndex={-1}
             ref={menuRef}
             style={{ left: x, top: y }}
-            className="absolute pointer-events-auto flex flex-col outline-0 bg-silver-800 rounded-lg overflow-hidden shadow-2xl text-sm"
+            className="absolute pointer-events-auto flex flex-col outline-0 bg-theme-bg rounded-lg overflow-hidden shadow-2xl text-sm"
         >
             {children}
         </div>

src/components/menu/ElementsMenu.tsx

@@ -29,21 +29,21 @@ export const ElementsMenu: React.FC<ElementsMenuProps> = ({ ...props }) => {
                 <div className="flex justify-between items-center mb-4">
                     <h3>Instruments</h3>
                     <button onClick={refreshInstruments}>
-                        <HiRefresh className="cursor-pointer active:text-silver-500" size={25} />
+                        <HiRefresh className="cursor-pointer active:text-theme-workspace-pd" size={25} />
                     </button>
                 </div>
                 <div className="flex flex-col gap-3 mb-8">
                     {instruments.map((instrument) => (
-                        <div className="flex items-center px-5 py-2 rounded-xl bg-silver-900/50">
+                        <div className="flex items-center px-5 py-2 rounded-xl bg-theme-workspace-pd">
                             <span>{instrument.name}</span>
-                            <span className="ml-auto text-silver-400">{instrument.dimensions.width}x{instrument.dimensions.height}</span>
+                            <span className="ml-auto text-theme-text text-opacity-30">{instrument.dimensions.width}x{instrument.dimensions.height}</span>
                         </div>
                     ))}
                 </div>
                 <h3 className="mb-4">Utilities</h3>
                 <div className="flex flex-col gap-3">
-                    <div className="flex items-center px-5 py-2 rounded-xl bg-silver-900/50">Button</div>
-                    <div className="flex items-center px-5 py-2 rounded-xl bg-silver-900/50">WebView</div>
+                    <div className="flex items-center px-5 py-2 rounded-xl bg-theme-workspace-pd">Button</div>
+                    <div className="flex items-center px-5 py-2 rounded-xl bg-theme-workspace-pd">WebView</div>
                 </div>
             </div>
         </Menu>

src/components/menu/SettingsMenu.tsx

@@ -0,0 +1,26 @@
+import { MdSettings } from 'react-icons/md';
+import { Menu } from './index';
+import { ThemeButton, themeButtons } from './ThemeButton';
+
+interface SettingsMenuCanvasProps {
+    show?: boolean;
+    onClick?: () => void;
+    onExit?: () => void;
+}
+
+export const SettingsMenuCanvas: React.FC<SettingsMenuCanvasProps> = ({ ...props }) => (
+    <Menu title="Settings" icon={<MdSettings size={25} />} {...props}>
+        <div className="px-6 py-5">
+            <div className="container grid items-center mb-4">
+                <h3>Theme</h3>
+                <ul>
+                    {themeButtons.map((button) => (
+                        <li key={button.themeName}>
+                            <ThemeButton {...button} />
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    </Menu>
+);

src/components/menu/SimVarsMenu.tsx

@@ -47,15 +47,15 @@ const SimVarSlider: React.FC<SimVarSliderProps> = memo(({ varKey }) => {
                     />
                     <h6 className="font-mono text-left">
                         {simVar.name}
-                        {simVar.index > 0 && <span className="text-amethyst-400">:{simVar.index}</span>}
+                        {simVar.index > 0 && <span className="text-theme-primary">:{simVar.index}</span>}
                     </h6>
                 </button>
                 <button className="mr-0.5" onClick={() => dispatch(togglePin({ key: formatKey(simVar) }))}>
                     <RiPushpin2Line
                         size={20}
                         className={classNames({
-                            'text-amethyst-400': simVar.pinned,
-                            'text-silver-700': !simVar.pinned,
+                            'text-theme-primary': simVar.pinned,
+                            'text-theme-pd': !simVar.pinned,
                         })}
                     />
                 </button>
@@ -201,14 +201,14 @@ const CollapsibleSimVarSection: React.FC<CollapsibleSimVarSectionProps> = ({ tit
     return (
         <>
             <button
-                className="w-full px-6 py-3 bg-silver-700/50 border-t-2 border-t-silver-700 flex items-center justify-between shadow-sm"
+                className="w-full px-6 py-3 bg-theme-workspace-pd flex items-center justify-between shadow-sm"
                 onClick={() => setCollapsed(!collapsed)}
             >
                 <h5>{title}</h5>
                 <FiChevronLeft
                     size={30}
                     className={classNames(
-                        'text-silver-500 duration-200',
+                        'text-theme-workspace-pd duration-200',
                         { 'rotate-0': collapsed, '-rotate-90': !collapsed },
                     )}
                 />
@@ -245,11 +245,11 @@ export const SimVarsMenu: React.FC<SimVarsMenuProps> = ({ ...props }) => {
             </div>
             <SimVarSection filter={(v) => v.pinned ?? false} />
             <CollapsibleSimVarSection
-                title={<><big className="text-amethyst-400">A</big> Vars</>}
+                title={<><big className="text-theme-primary">A</big> Vars</>}
                 filter={(v) => v.name.toLowerCase().includes(filter.toLowerCase()) && v.type === 'A'}
             />
             <CollapsibleSimVarSection
-                title={<><big className="text-amethyst-400">L</big> Vars</>}
+                title={<><big className="text-theme-primary">L</big> Vars</>}
                 filter={(v) => v.name.toLowerCase().includes(filter.toLowerCase()) && v.type === 'L'}
             />
         </Menu>

src/components/menu/ThemeButton.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { MdCheckCircle } from 'react-icons/md';
+import { useGlobalSelector, GlobalState, GlobalDispatch, useGlobalDispatch } from '../../redux/global';
+import { themeConfigs, fallbackThemeConfig, themes } from '../../redux/global/ui/uitheme';
+import { setTheme } from '../../redux/global/configSlice';
+import { Button } from '../Button';
+
+export interface ThemeButtonProps {
+    themeName: string;
+    title: string | undefined;
+    className?: string;
+}
+
+export const ThemeButton: React.FC<ThemeButtonProps> = ({ themeName, title, className }: ThemeButtonProps) => {
+    const globalDispatch = useGlobalDispatch<GlobalDispatch>();
+
+    const { theme } = useGlobalSelector((state: GlobalState) => state.config);
+
+    const themeConfig = theme !== undefined ? theme : fallbackThemeConfig;
+
+    const { colors: { primary, accent, text, padding, workspacePadding, background } } = themeConfig;
+
+    const [selected, setSelected] = useState(themeConfig.name === themeName);
+
+    const changeTheme = (name: string) => {
+        const newThemeConfig = themeConfigs.get(name);
+
+        if (newThemeConfig === undefined) {
+            console.error(`Theme ${name} not found.`);
+            return;
+        }
+
+        globalDispatch(setTheme(newThemeConfig));
+    };
+
+    useEffect(() => {
+        setSelected(themeConfig.name === themeName);
+    }, [themeConfig, themeName]);
+
+    useEffect(() => {
+        document.documentElement.style.setProperty('--primary-color', primary);
+        document.documentElement.style.setProperty('--accent-color', accent);
+        document.documentElement.style.setProperty('--text-color', text);
+        document.documentElement.style.setProperty('--padding-color', padding);
+        document.documentElement.style.setProperty('--workspace-padding-color', workspacePadding);
+        document.documentElement.style.setProperty('--background-color', background);
+    }, [background, padding, primary, accent, workspacePadding, text]);
+
+    return (
+        <Button className={`flex w-64 ${className}`} onClick={() => changeTheme(themeName)}>
+            <MdCheckCircle
+                className={`mt-1 mx-4 transition-opacity duration-200 ease-in-out 
+                ${selected ? 'opacity-100' : 'opacity-0'}`}
+                size={20}
+            />
+            {title}
+        </Button>
+    );
+};
+
+export const themeButtons = themes.map((theme) => {
+
+    return {
+        themeName: theme.name,
+        title: theme.title,
+        className: 'font-mono hover:font-semibold',
+    };
+});

src/components/menu/index.tsx

@@ -13,7 +13,7 @@ export const Menu: React.FC<MenuProps> = ({ title, icon, show, onClick, onExit,
     <>
         <button
             className={classNames(
-                'w-14 h-14 flex items-center justify-center bg-silver-700 rounded-xl cursor-pointer ring-amethyst-400 ring-opacity-50 duration-200',
+                'w-14 h-14 flex items-center justify-center bg-theme-workspace-pd rounded-xl cursor-pointer ring-theme-primary duration-200',
                 { 'ring-0': !show, 'ring-4': show },
             )}
             onClick={show ? onExit : onClick}
@@ -23,10 +23,14 @@ export const Menu: React.FC<MenuProps> = ({ title, icon, show, onClick, onExit,
         {/* TODO: Don't unmount component, just hide */}
         <AnimatePresence>
             {show && (
-                <div className="absolute left-28 top-4">
-                    <MenuBody title={title} onExit={onExit}>
-                        {children}
-                    </MenuBody>
+                <div className="absolute left-28 top-4 w-[26rem] bg-theme-pd shadow-2xl rounded-2xl z-30 overflow-hidden">
+                    <div className="px-6 py-4 bg-theme-workspace-pd flex justify-between items-center">
+                        <h4 className="font-medium">{title}</h4>
+                        <button onClick={onExit}>
+                            <FiX size={30} className="text-theme-workspace-pd cursor-pointer hover:text-theme-text" />
+                        </button>
+                    </div>
+                    {children}
                 </div>
             )}
         </AnimatePresence>

src/components/modal/NewProjectModal.tsx

@@ -102,7 +102,7 @@ export const NewProjectModal: React.FC<NewProjectModalProps> = ({ show, onExit }
                             }}
                         />
                         {status && <p className="text-red-500">{status}</p>}
-                        <Button className="bg-amethyst-500 hover:bg-amethyst-700 ring-amethyst-700 text-gray-100 font-bold" type="submit">Submit</Button>
+                        <Button className="bg-theme-bg hover:bg-theme-pd ring-theme-primary text-theme-text font-bold" type="submit">Submit</Button>
                     </Form>
                 )}
             </Formik>

src/components/modal/index.tsx

@@ -57,7 +57,7 @@ export const Modal: React.FC<ModalProps> = ({ title, show, onExit, children }) =
                     onClick={onExit}
                 >
                     <motion.div
-                        className="relative max-w-1/2 mx-auto bg-silver-800 rounded-2xl shadow-2xl"
+                        className="relative max-w-1/2 mx-auto bg-theme-bg rounded-2xl shadow-2xl"
                         variants={modalAnimation}
                         transition={{
                             duration: 0.2,
@@ -70,11 +70,11 @@ export const Modal: React.FC<ModalProps> = ({ title, show, onExit, children }) =
                         exit="hidden"
                         onClick={(e) => e.stopPropagation()}
                     >
-                        <div className="px-8 py-5 bg-silver-700 rounded-t-2xl flex justify-between items-center">
+                        <div className="px-8 py-5 bg-theme-workspace-pd rounded-t-2xl flex justify-between items-center">
                             <h3 className="font-medium">{title}</h3>
                             <FiX
                                 size={30}
-                                className="text-silver-400 cursor-pointer hover:text-silver-200"
+                                className="text-theme-pd cursor-pointer hover:text-theme-text"
                                 onClick={onExit}
                             />
                         </div>