Start theming implementation

frontend/components/theming/Theme.tsx

@@ -0,0 +1,9 @@
+export class Theme {
+    constructor(
+        public readonly name: string,
+        public readonly primary: string,
+        public readonly secondary?: string,
+        public readonly tertiary?: string
+    ) {
+    }
+}

frontend/components/theming/ThemePreview.tsx

@@ -0,0 +1,19 @@
+import {Theme} from "Frontend/components/theming/Theme";
+import {Typography} from "@material-tailwind/react";
+
+export default function ThemePreview({theme}: { theme: Theme }) {
+    return (
+        <div className={`
+            size-full bg-background
+            grid grid-rows-3
+            rounded-lg
+            border-2 border-on-background
+            p-4 gap-4
+            `}>
+            <div className="bg-primary flex grow rounded-lg"></div>
+            <div className="bg-secondary flex grow rounded-lg"></div>
+            <div className="bg-tertiary flex grow rounded-lg"></div>
+            <Typography variant="paragraph" className="text-center">{theme.name}</Typography>
+        </div>
+    );
+}

frontend/components/theming/Themes.tsx

@@ -0,0 +1,18 @@
+import {Theme} from "Frontend/components/theming/Theme";
+
+export class Themes {
+    public static LIGHT_DEFAULT = new Theme(
+        "Light default",
+        "#000000"
+    )
+
+    public static DARK_DEFAULT = new Theme(
+        "Dark default",
+        "#ffffff"
+    )
+
+    public static all = [
+        Themes.LIGHT_DEFAULT,
+        Themes.DARK_DEFAULT
+    ];
+}