Merge pull request #31 from RIT-SWEN-261-02/light-mode

Light mode

20 files changed, 296 insertions, 102 deletions

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 8b6b28a..ab1e60f 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -49,12 +49,8 @@
         gap: 20px;
     }
 
-    /*div:has(a:hover) a {*/
-    /*    color: light-dark(black, rgba(255, 255, 255, 0.5));*/
-    /*}*/
-
     a {
-        color: light-dark(black, white);
+        color: var(--foreground-color);
         text-decoration: none;
     }
 
@@ -62,29 +58,8 @@
         text-decoration: underline;
     }
 
-    /*a {*/
-    /*    display: block;*/
-    /*    position: relative;*/
-    /*    padding: 0.1em 0;*/
-    /*}*/
-
-    /*a::after {*/
-    /*    content: '';*/
-    /*    position: absolute;*/
-    /*    bottom: 4px;*/
-    /*    left: 0;*/
-    /*    width: 100%;*/
-    /*    height: 0.03em;*/
-    /*    background-color: white;*/
-    /*    opacity: 0;*/
-    /*    transition: opacity 300ms, transform 300ms;*/
-    /*}*/
-
-    /*a:hover::after,*/
-    /*a:focus::after {*/
-    /*    opacity: 1;*/
-    /*    transform: translate3d(0, 0.2em, 0);*/
-    /*}*/
-
+}
 
+.current {
+    text-decoration: underline!important;
 }
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index 30a5347..7277682 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -6,12 +6,12 @@
             </a>
         </div>
         <div>
-            <a *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a>
-            <a routerLink="/cupboard">Cupboard</a>
-            <a *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a>
-    <!--        <span>{{currentUser$ | async}}</span>-->
+            <a [class]="location.path() == '/dashboard' ? 'current' : ''" *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a>
+            <a [class]="location.path() == '/cupboard' ? 'current' : ''" routerLink="/cupboard">Cupboard</a>
+            <a [class]="location.path() == '/basket' ? 'current' : ''" *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a>
             <button *ngIf="currentUser | async" (click)="logout()">Log Out</button>
             <button *ngIf="!(currentUser | async)" (click)="login()">Log In</button>
+            <a href="#" (click)="$event.preventDefault(); toggleColorScheme()"><span class="icon">brightness_7</span></a>
         </div>
     </div>
 
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 615397f..fafffef 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,10 +1,10 @@
 import {Component, OnInit, Inject, ViewContainerRef} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
-import { DOCUMENT } from '@angular/common';
+import {DOCUMENT, Location} from '@angular/common';
 import {AuthService} from './services/auth.service';
 import {ToastsService} from './services/toasts.service';
 import {User, userType} from './models/User';
-import {ActivatedRoute, Router} from '@angular/router';
+import {Router} from '@angular/router';
 import {ModalService} from './services/modal.service';
 
 @Component({
@@ -20,10 +20,10 @@ export class AppComponent implements OnInit {
     constructor(
         private authService: AuthService,
         private router: Router,
-        private route: ActivatedRoute,
         protected toastService: ToastsService,
         private viewContainerRef: ViewContainerRef,
         protected modalService: ModalService,
+        protected location: Location,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
@@ -40,6 +40,21 @@ export class AppComponent implements OnInit {
             this.authService.restoreLogin(dataParsed.username, dataParsed.key)
             console.log("Key found", dataParsed.key)
         }
+
+        if (this.location.path() == '/cupboard') {
+            console.log("work")
+        } else {
+            console.log(this.location.path())
+        }
+
+        let theme = localStorage.getItem("theme")
+        if(!theme) {
+            // if no color scheme is set, get the system settings
+            let preferredTheme = this.document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";
+            localStorage.setItem("theme",preferredTheme);
+            theme = preferredTheme;
+        }
+        this.document.body.parentElement!.setAttribute("theme",theme);
     }
 
     login() {
@@ -51,5 +66,17 @@ export class AppComponent implements OnInit {
         location.reload()
     }
 
+    toggleColorScheme() {
+        let theme = localStorage.getItem("theme");
+        // fallback
+        if (!theme) {
+            theme = "light";
+        }
+        let newTheme = theme == "light" ? "dark" : "light";
+        this.document.body.parentElement!.setAttribute("theme",newTheme);
+        localStorage.setItem("theme", newTheme);
+        console.log(newTheme, this.document.body.parentElement);
+    }
+
     protected readonly userType = userType;
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 4eebc2d..8f6901a 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -10,13 +10,13 @@
     <div id="header2">
         <div id="searchArea">
             <form id="search-form" #searchForm="ngForm">
-                <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+                <input type="text" name="search" class="wide-input sort-scheme" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
                 <input type="reset" value="Clear" (click)="search(null)"> <br>
             </form>
         </div>
         <div id="sortArea">
             <label for="sort">Sort by: </label>
-            <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input" (change)="search(searchForm.value)" [value]="currentSortAlgo">
+            <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input sort-scheme" (change)="search(searchForm.value)" [value]="currentSortAlgo">
                 <option *ngFor="let algorithm of Object.keys(SortingAlgorithms)" [value]="algorithm">
                     {{SortingAlgorithms[algorithm].display[sortMode === 'Ascending' ? 0 : 1]}}
                 </option>
@@ -25,7 +25,7 @@
                 <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
             </button>
             <label>Needs per page: </label>
-            <input type ="number" [(ngModel)]="itemsPerPage" (change)="editItemsPerPage()" min="1" max="{{searchResults.length}}">
+            <input type ="number" class="sort-scheme" [(ngModel)]="itemsPerPage" (change)="editItemsPerPage()" min="1" max="{{searchResults.length}}">
         </div>
     </div>
     <h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css
index 54f362b..cb4ad74 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.css
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css
@@ -17,7 +17,7 @@
 }
 
 .card {
-    background-color: #2e2e2e;
+    background-color: var(--tertiary-color);
     width: 400px;
     height: 130px;
     border-radius: 5px;
@@ -34,7 +34,7 @@
 .listCard {
     display: flex;
     flex-direction: column;
-    background-color: #2e2e2e;
+    background-color: var(--tertiary-color);
     border-radius: 5px;
     padding: 10px;
     gap: 10px;
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index 297a63a..cff2bbe 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -11,7 +11,7 @@
 }
 
 .needEntry {
-    background-color: #2e2e2e;
+    background-color: var(--tertiary-color);
     display: flex;
     flex-direction: column;
     border-radius: 5px;
@@ -66,13 +66,13 @@
 
 .clickable {
     padding: 10px;
-    background-color: #3a3a3a;
+    background-color: var(--secondary-color);
     border-radius: 5px;
     cursor: pointer;
 }
 
 .clickable:hover {
-    background-color: #444444;
+    background-color: var(--tertiary-color);
 }
 
 .actionArea {
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index b64be18..c345a0b 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -6,7 +6,6 @@
     justify-content: center;
     overflow: clip;
 }
-
 #hero {
     display: flex;
     /*flex-direction: column;*/
@@ -19,12 +18,20 @@ h1 {
     max-width: 1200px;
 }
 
+#cr {
+    opacity: var(--opacity-cr);
+}
+
 #jf {
-    /*position: absolute;*/
+    opacity: var(--opacity-jf);
+}
+
+.text-highlight {
+    color: var(--highlight-color);
 }
 
 #right {
-    max-width: 500px;
+    max-width: 450px;
     max-height: 500px;
     display: flex;
     justify-content: center;
@@ -33,6 +40,6 @@ h1 {
 }
 
 #left {
-    max-width: 500px;
+    max-width: 550px;
     z-index: 1;
 }
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html
index 7a7ff96..051132e 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.html
+++ b/ufund-ui/src/app/components/home-page/home-page.component.html
@@ -1,10 +1,14 @@
 <div id="hero">
     <div id="left">
-        <h1>Helping fund coral reef and marine life conservation</h1>
+        <h1>Helping fund <span class="text-highlight">coral reef</span> and 
+            <span class="text-highlight">marine life</span> conservation.</h1>
         <p>View our online cupboard holding all needs related to sea life preservation</p>
-        <button class="button2" routerLink="/cupboard">View needs</button>
+        <button class="button2" routerLink="/cupboard">View Needs</button>
     </div>
     <div id="right">
-        <img id="jf" src="jf.png" height="1024" width="1024"/>
+        <!-- <img id="jf" src="jf.png" height="1024" width="1024"/> -->
+         <div style="width: 500px; height: 500px;"></div>
+        <img style="position: absolute;" id="cr" src="cr.png" height="700" width="700"/>
+        <img style="position: absolute;" id="jf" src="jf.png" height="700" width="700"/>
     </div>
 </div>
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.ts b/ufund-ui/src/app/components/home-page/home-page.component.ts
index 95e8962..71c2549 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.ts
+++ b/ufund-ui/src/app/components/home-page/home-page.component.ts
@@ -1,4 +1,5 @@
-import {Component} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
     selector: 'app-home-page',
@@ -6,6 +7,17 @@ import {Component} from '@angular/core';
     templateUrl: './home-page.component.html',
     styleUrl: './home-page.component.css'
 })
-export class HomePageComponent {
+export class HomePageComponent implements OnInit {
+
+    constructor(
+        @Inject(DOCUMENT) private document: Document
+    ) {}
+    ngOnInit(): void {
+        console.log(this.document.documentElement);
+    }
+
+    
+
+    
 
 }
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index b56b4eb..810d924 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -2,29 +2,66 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
-    /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/
-    background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg");
+    width: 100vw;
+    height: 150vh;
+    overflow: hidden;
+    background-color: transparent;
     background-blend-mode: darken;
-    margin-top: -66px
+    margin-top: -66px;
+}
+
+#bg-cr {
+    position: absolute;
+    margin-top: -150px;
+    top:0;
+    width: 100vw;
+    height: calc(100vh + 150px);
+    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)), url("/login-cr.jpg");
+    background-size: cover;
+    opacity: calc(var(--opacity-cr));
+    z-index: 1;
+}
 
+#bg-jf {
+    position: absolute;
+    top:0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/login-jf.jpg");
+    /*backdrop-filter: brightness(1%);*/
+    background-size: cover;
+    opacity: var(--opacity-jf);
+    z-index: 1;
 }
 
 #box {
+    animation: ease-in-out fadeIn .1s;
     display: flex;
     flex-direction: column;
-    max-width: 350px;
+    /*align-items: center;*/
+    aspect-ratio: 4/5;
+    min-height: 50vh;
+    /*margin-top: 15vh;*/
     gap: 10px;
+    background-color: color-mix(in srgb, var(--background-color), transparent 50%);
     backdrop-filter: blur(10px);
-    background-color: rgba(0, 0, 0, 0.1);
     padding: 30px;
-    color: white;
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
-    border-color: rgb(140, 140, 255);
+    border-color: var(--highlight-color);
+    z-index: 2;
+    justify-content: center;
 }
 
+#greeting {
+    color: var(--highlight-color);
+    padding: 0;
+    margin: 0;
+    /*font-size: 32px;*/
+    /* text-decoration: underline;
+    text-decoration-color: var(--highlight-color); */
+}
 .border {
     border-style: solid;
     border-width: 1px;
@@ -34,3 +71,28 @@
     background-color: white;
     box-shadow: 0 0 10px 10px black;
 }
+
+#signup {
+    color: var(--highlight-color);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-color: var(--highlight-color);
+}
+
+input {
+    width: 100%;
+}
+
+h1 {
+    margin-top: 0;
+}
+
+@keyframes fadeIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0
+    }
+    to {
+        opacity: 1
+    }
+}
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 1017d0f..8b8f5b3 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,9 +1,11 @@
 <div id="box">
+    <h2 id="greeting">Welcome back,</h2>
     <h1>Login</h1>
-    <input placeholder="Username" type="text" #username (keydown.enter)="login(username.value, password.value)">
-    <input placeholder="Password" type="password" #password (keydown.enter)="login(username.value, password.value)">
+    <input class="form-input" placeholder="Username" type="text" #username (keydown.enter)="login(username.value, password.value)">
+    <input class="form-input" placeholder="Password" type="password" #password (keydown.enter)="login(username.value, password.value)">
     <button type="button" (click)="login(username.value, password.value)">Login</button>
-    <div>
-        New? <a routerLink="/signup">Create an account</a>
-    </div>
+    <span>New? <a routerLink="/signup">Create an account.</a></span>
 </div>
+<div id="bg-cr"></div>
+<div id="bg-jf"></div>
+
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
index fc6b5b3..3bc8127 100644
--- a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -9,7 +9,7 @@
     height: 175px;
     display: flex;
     align-items: center;
-    color: #878787;
+    color: gray;
 }
 
 #needList {
@@ -26,7 +26,7 @@
     padding: 10px;
     display: flex;
     flex-direction: column;
-    background-color: #3a3a3a;
+    background-color: var(--secondary-color);
     border-radius: 5px;
     height: 175px;
     width: 200px;
@@ -42,7 +42,7 @@
 }
 
 .needEntry:hover {
-    background-color: #444444;
+    background-color: var(--hover-color);
 }
 
 .needName {
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
index 9ef9292..211ee17 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.css
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css
@@ -11,8 +11,8 @@
     padding: 10px;
     border-style: solid;
     border-width: 1px;
-    border-color: #6c6c6c;
-    background-color: #2e2e2e;
+    border-color: var(--secondary-color);
+    background-color: var(--tertiary-color);
     border-radius: 5px;
     position: relative;
     width: 500px;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 60af7bb..38ed4df 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,5 +1,5 @@
 .needEntry {
-    background-color: #2e2e2e;
+    background-color: var(--tertiary-color);
     display: flex;
     flex-direction: column;
     border-radius: 5px;
@@ -8,7 +8,7 @@
 #needList {
     display: flex;
     flex-direction: column;
-    gap: 15px
+    gap: 10px
 }
 
 .needName {
@@ -72,7 +72,7 @@
 .urgent {
     font-size: 11pt;
     background-color: rgba(255, 165, 0, 0.27);
-    color: rgba(255, 165, 0, 1);
+    color: light-dark(rgb(138, 93, 0),rgba(255, 165, 0, 1));
     padding: 2px;
     border-radius: 5px;
 }
@@ -88,7 +88,7 @@
 
 .clickable {
     padding: 10px;
-    background-color: #3a3a3a;
+    background-color: var(--secondary-color);
     border-radius: 5px;
     cursor: pointer;
     height: 130px;
@@ -98,7 +98,7 @@
 }
 
 .clickable:hover {
-    background-color: #444444;
+    background-color: var(--hover-color);
 }
 
 .actionArea {
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index 6ca1350..7f357db 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -42,7 +42,7 @@
 .urgent {
     font-size: 11pt;
     background-color: rgba(255, 165, 0, 0.27);
-    color: rgba(255, 165, 0, 1);
+    color: light-dark(rgb(138, 93, 0),rgba(255, 165, 0, 1));
     padding: 2px;
     border-radius: 5px;
 }
diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index aa90e04..4073931 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -11,18 +11,19 @@
 }
 
 #box {
+    animation: ease-in-out fadeIn .1s;
     display: flex;
     flex-direction: column;
     max-width: 500px;
     gap: 10px;
-    backdrop-filter: blur(25px);
-    background-color: rgba(0, 0, 0, 0.1);
-    padding: 30px;
-    color: white;
+    backdrop-filter: blur(10px);
+    background-color: color-mix(in srgb, var(--background-color), transparent 50%);
+    padding: 90px 30px;
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
-    border-color: rgb(140, 140, 255);
+    border-color: var(--highlight-color);
+    z-index: 2;
 
     & > div {
         display: flex;
@@ -86,3 +87,41 @@
     }
 }
 
+h1 {
+    margin-top: 0;
+}
+
+#bg-cr {
+    position: absolute;
+    margin-top: -150px;
+    top:0;
+    width: 100vw;
+    height: calc(100vh + 150px);
+    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)), url("/login-cr.jpg");
+    background-size: cover;
+    opacity: calc(var(--opacity-cr));
+    z-index: 1;
+}
+
+#bg-jf {
+    position: absolute;
+    top:0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/login-jf.jpg");
+    /*backdrop-filter: brightness(1%);*/
+    background-size: cover;
+    opacity: var(--opacity-jf);
+    z-index: 1;
+}
+
+@keyframes fadeIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0
+    }
+    to {
+        opacity: 1
+    }
+}
+
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index ef2fc27..78f5099 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -26,3 +26,5 @@
     </div>
     <span>Already have an account? <a routerLink="/login">Log in</a></span>
 </div>
+<div id="bg-cr"></div>
+<div id="bg-jf"></div>
diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css
index 82e2ff3..5d2a7df 100644
--- a/ufund-ui/src/app/components/toast/toast.component.css
+++ b/ufund-ui/src/app/components/toast/toast.component.css
@@ -20,7 +20,8 @@
     display: flex;
     flex-direction: row;
     padding: 3px 15px;
-    background-color: #3a3a3a;
+    color: var(--foreground-color);
+    background-color: var(--secondary-color);
     border-radius: 100000px;
     gap: 10px;
     align-items: center;
@@ -54,4 +55,5 @@
 
 .toast.error {
     background-color: #d81a1a;
+    color: white;
 }
diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html
index b6ae1a2..34b631c 100644
--- a/ufund-ui/src/index.html
+++ b/ufund-ui/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" theme="light">
 <head>
     <meta charset="utf-8">
     <title>UfundUi</title>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 83cd82d..6bb6970 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,17 +1,54 @@
 /* You can add global styles to this file, and also import other style files */
 
-:root {
-    color-scheme: /*light*/ dark;
-}
-
 * {
     box-sizing: border-box;
+    transition: color, background-color ease-in-out .1s;
+}
+
+[theme="light"] {
+    color-scheme: light;
+    --background-color: #e6e4df;
+    --secondary-color: #d7d1c7;
+    --tertiary-color: #e0dcd4;
+    --foreground-color: #000000;
+    --highlight-color: #cf9451;
+    --dark-highlight-clor: #582f00;
+    --hover-color: #d8cdc0;
+    --opacity-cr: 1;
+    --opacity-jf: 0;
+}
+
+[theme="dark"] {
+    color-scheme: dark;
+    --background-color: #000715;
+    --secondary-color: #3a3a3a; /* color of cards and buttons*/
+    --tertiary-color: #2e2e2e; /* color of dark cards */
+    --foreground-color: #ffffff; /* used on text */
+    --highlight-color: #60a9f3; /* accent color */
+    --dark-highlight-clor: #002846; /* not used currently */
+    --hover-color: #323c4e; /* hover color for cards and buttons*/
+    --opacity-cr: 0;
+    --opacity-jf: 1;
+
+    /* Experimental blue dark theme:
+    --secondary-color: #19212e;
+    --tertiary-color: #121722;
+    --foreground-color: #ffffff;
+    --highlight-color: #6091e8;
+    --dark-highlight-clor: #002846;
+    --hover-color: #192940;
+     */
+}
+
+:root {
+    --background-hover: color-mix(in oklch, var(--background-color) 60%,  var(--hover-color) 40%);
 }
 
 html, body {
     margin: 0;
     height: 100%;
-    background-color: light-dark(white, #000715);
+    background-color: var(--background-color);
+    color: var(--foreground-color);
 }
 
 body {
@@ -19,7 +56,7 @@ body {
     font-optical-sizing: auto;
 }
 
-input, textarea {
+input, textarea, select {
     resize: none;
     font-family: Inter, sans-serif;
     font-size: 14pt;
@@ -27,10 +64,19 @@ input, textarea {
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
-    background-color: light-dark(#ebebeb, #3a3a3a);
+    background-color: var(--secondary-color);
 
     &:hover {
-        background-color: light-dark(#e1e1e1, #444444);
+        background-color: var(--hover-color);
+    }
+
+    &.sort-scheme {
+        background-color: transparent;
+        border-color: var(--secondary-color);
+
+        &:hover {
+            background-color: var(--background-hover);
+        }
     }
 }
 
@@ -39,26 +85,45 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
     padding: 6px 16px;
     border-radius: 9999px;
     border-style: none;
-    background-color: light-dark(#ebebeb, #3a3a3a);
+    /*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
+    background-color: var(--secondary-color);
     display: flex;
     gap: 5px;
     text-align: center;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
+
+    &:disabled {
+        pointer-events: none;
+    }
 
     &:hover {
-        background-color: light-dark(#e1e1e1, #444444);
+        background-color: var(--hover-color);
+    }
+
+    &.sort-scheme {
+        background-color: transparent;
+
+        &:hover {
+            background-color: var(--background-hover);
+        }
     }
 }
 
 .button2 {
     text-transform: uppercase;
-    border: 1px solid #5cdbff;
+    border: 1px solid var(--highlight-color);
     padding: 10px 25px;
+    /*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
     font-size: 12pt;
-    font-weight: 600;
+    font-weight: 700;
     background-color: transparent;
-    text-shadow: #5cdbff 0 0 50px;
+    text-shadow: var(--highlight-color) 0 0 50px;
+
+    &:hover {
+        background-color: var(--background-hover) !important;
+    }
 }
 
 .icon {
@@ -73,9 +138,6 @@ progress {
     min-width: 100%;
 }
 
-ul {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
+a {
+    color: var(--highlight-color);
 }