diff options
Diffstat (limited to 'ufund-ui')
6 files changed, 30 insertions, 15 deletions
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts index 635061c..2fecc2d 100644 --- a/ufund-ui/src/app/app.component.ts +++ b/ufund-ui/src/app/app.component.ts @@ -38,6 +38,15 @@ export class AppComponent implements OnInit { this.authService.restoreLogin(dataParsed.username, dataParsed.key) console.log("Key found", dataParsed.key) } + + 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() { @@ -50,8 +59,14 @@ export class AppComponent implements OnInit { } toggleColorScheme() { - let newTheme = this.document.body.parentElement!.getAttribute("theme") == "light" ? "dark" : "light"; + 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); } 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 c46ef57..bd41fda 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/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html index 52b35c1..b88ef31 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html @@ -63,7 +63,7 @@ </div> <div class="actionArea"> - <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution"> + <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution sort-scheme"> <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)"> <span class="icon">delete</span> Remove from Basket </button> 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 0172ff4..56ae6a6 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 @@ -37,14 +37,6 @@ select { } } -.sort-scheme { - background-color: var(--background-color); - border-style: solid; - border-color: var(--foreground-color); - border-radius: 5px; - border-width: 1px; -} - #sortArea { display: flex; flex-direction: row; diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html index 18da39c..e9f70f6 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.html +++ b/ufund-ui/src/app/components/need-list/need-list.component.html @@ -1,7 +1,7 @@ <div id="header"> <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> diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 9fce47d..09e354c 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -65,7 +65,7 @@ button, input[type=button], input[type=reset], input[type=submit], .button { border-radius: 9999px; border-style: none; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: var(--background-color); + background-color: var(--tertiary-color); display: flex; gap: 5px; text-align: center; @@ -91,6 +91,14 @@ button, input[type=button], input[type=reset], input[type=submit], .button { font-family: 'Material Symbols Outlined' } +.sort-scheme { + background-color: var(--background-color); + border-style: solid; + border-color: var(--tertiary-color); + border-radius: 5px; + border-width: 1px; +} + h1 { font-size: 40px; } |