Feat: Multiplayer sessions added using CRUD database.

static/css/themes/dark.css

@@ -0,0 +1,47 @@
+/*
+:root {
+    --background-color: #121212;
+    --text-color: #e0e0e0;
+    --primary-color: #bb86fc;
+    --secondary-color: #03dac6;
+    --success-color: #00c853;
+    --danger-color: #cf6679;
+    --warning-color: #ffab00;
+    --info-color: #2196f3;
+    --light-color: #2c2c2c;
+    --dark-color: #1f1f1f;
+    --border-color: #333333;
+    --shadow-color: rgba(255, 255, 255, 0.1);
+    
+    /* Header * /
+    --header-bg: #1f1f1f;
+    --header-text: #e0e0e0;
+    
+    /* Footer * /
+    --footer-bg: #1f1f1f;
+    --footer-text: #a0a0a0;
+    
+    /* Navigation * /
+    --nav-bg: #1f1f1f;
+    --nav-text: #e0e0e0;
+    --nav-hover-bg: #2c2c2c;
+    --nav-hover-text: #bb86fc;
+    
+    /* Buttons * /
+    --Button-primary-bg: #bb86fc;
+    --Button-primary-text: #121212;
+    --Button-secondary-bg: #03dac6;
+    --Button-secondary-text: #121212;
+    
+    /* Forms * /
+    --input-bg: #2c2c2c;
+    --input-border: #454545;
+    --input-text: #e0e0e0;
+    --input-focus-border: #bb86fc;
+    
+    /* Cards * /
+    --card-bg: #1f1f1f;
+    --card-border: #333333;
+    --card-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05);
+}
+*/

static/css/themes/icons.css

@@ -0,0 +1,77 @@
+
+/* Toggle light mode / dark mode button */
+.theme-switch {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 4vh;
+    height: 4vh;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: auto;
+    border-radius: 2vh;
+}
+.theme-switch:hover {
+    background-color: var(--colour-primary);
+}
+.theme-switch img.theme-icon,
+.theme-switch svg.theme-icon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: opacity 1s ease, transform 1s ease;
+    position: absolute;
+    margin-top: auto;
+}
+img.theme-icon.dark-mode-icon {
+    top: 0vh;
+    left: 0vh;
+}
+svg.theme-icon.light-mode-icon {
+    width: 3.5vh;
+    height: 3.5vh;
+    top: 0.25vh;
+    left: 0.25vh;
+}
+svg.theme-icon.light-mode-icon .background {
+    fill: var(--colour-secondary);
+}
+.theme-switch:hover svg.theme-icon.light-mode-icon .background {
+    fill: var(--colour-primary);
+}
+svg.theme-icon.light-mode-icon .sun {
+    fill: var(--colour-text);
+    stroke: var(--colour-text);
+}
+/*
+svg.theme-icon {
+    width: 2vh;
+    height: 2vh;
+}
+*/
+
+/* Hide the icon that doesn't match the current theme */
+[data-theme="light"] .theme-switch .dark-mode-icon {
+    opacity: 1;
+    display: block;
+    transform: rotate(0deg);
+}
+[data-theme="light"] .theme-switch .light-mode-icon {
+    opacity: 0;
+    display: none;
+    transform: rotate(90deg);
+}
+
+[data-theme="dark"] .theme-switch .dark-mode-icon {
+    opacity: 0;
+    display: none;
+    transform: rotate(-90deg);
+}
+[data-theme="dark"] .theme-switch .light-mode-icon {
+    opacity: 1;
+    display: block;
+    transform: rotate(0deg);
+}

static/css/themes/light.css

@@ -0,0 +1,39 @@
+/* Default */
+:root {
+    /* Claude dark blue / grey theme */
+    --colour-accent: #C77DFF;
+    --colour-error: red;
+    --colour-error-accent: #fc8181;
+    --colour-error-highlight: #fff5f5;
+    --colour-error-title: #c53030;
+    --colour-page-background: #E0AAFF;
+    --colour-page-background-1: #F5ECFE;
+    --colour-page-background-2: #FAE0E2;
+    --colour-primary: #240046;
+    --colour-secondary: #3C096C;
+    --colour-success: #38a169;
+    --colour-success-highlight: #f0fff4;
+    --colour-success-title: #16a34a;
+    --colour-text: #10002B;
+    --colour-text-background: white;
+    --colour-text-link-unvisited: #0000EE;
+    --colour-text-link-visited: #551A8B;
+}
+
+/*
+--c_purple_darker: #310055;
+--c_purple_dark: #4A0A77;
+--c_purple: #6818A5;
+--c_purple_light: #CBAFFE;
+--c_purple_lighter: #F5ECFE;
+
+--c_blue: #0044FF;
+--c_blue_pastel: #B8E0FF;
+--c_blue_light: #73E8FF;
+--c_blue_dark: #003ADB;
+/* --c_red: * /
+--c-red: #FF0000;
+--c_red_pastel: #FAE0E2;
+--c_red_lighter: #FAE0E2;
+}
+*/