Feat: Multiplayer sessions added using CRUD database.

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);
+}