cphipps/lubelog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #617 from hargata/Hargata/603

Browse Source 
adaptive color mode if dark mode is not enabled.
This commit is contained in:
Hargata Softworks
2024-09-13 14:24:59 -06:00
committed by GitHub
parent 77014c71f2 1fd93d2efe
commit e6857331e2
4 changed files with 47 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Views/Home/Index.cshtml
View File

@@ -63,7 +63,7 @@
<div class="d-flex lubelogger-navbar">
<img src="@logoUrl" />
<div class="lubelogger-navbar-button">
<button type="button" class="btn @(userConfig.UseDarkMode ? "btn-dark" : "btn-light")" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
<button type="button" class="btn btn-adaptive" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
</div>
</div>
</div>

14
Views/Shared/_Layout.cshtml
View File

@@ -54,7 +54,7 @@
<script>
function getGlobalConfig() {
return {
useDarkMode : "@useDarkMode" == "True",
useDarkMode: "@useDarkMode" == "True" || window.matchMedia('(prefers-color-scheme: dark)').matches,
enableCsvImport : "@enableCsvImports" == "True",
useMarkDown: "@useMarkDown" == "True",
currencySymbol: decodeHTMLEntities("@numberFormat.CurrencySymbol"),
@@ -111,6 +111,12 @@
break;
}
}
function setThemeBasedOnDevice() {
var systemPrefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (systemPrefersDarkMode) {
$(document.documentElement).attr("data-bs-theme", "dark");
}
}
</script>
@await RenderSectionAsync("Scripts", required: false)
</head>
@@ -122,3 +128,9 @@
</div>
</body>
</html>
@if (!useDarkMode)
{
<script>
setThemeBasedOnDevice();
</script>
}

2
Views/Vehicle/Index.cshtml
View File

@@ -78,7 +78,7 @@
<h1 class="text-truncate display-4">@($"{Model.Year} {Model.Make} {Model.Model}")<small class="text-body-secondary">@($"(#{Model.LicensePlate})")</small></h1>
<button onclick="editVehicle(@Model.Id)" class="lubelogger-tab btn btn-warning btn-md mt-1 mb-1"><i class="bi bi-pencil-square"></i></button>
<div class="lubelogger-navbar-button">
<button type="button" class="btn @(userConfig.UseDarkMode ? "btn-dark" : "btn-light")" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
<button type="button" class="btn btn-adaptive" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
</div>
</div>
</div>

32
wwwroot/css/site.css
View File

@@ -381,4 +381,36 @@ input[type="file"] {
.planner-indicator{
font-size:1em;
padding:0.2em;
}
html[data-bs-theme="dark"] .btn-adaptive {
--bs-btn-color: #fff;
--bs-btn-bg: #212529;
--bs-btn-border-color: #212529;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #424649;
--bs-btn-hover-border-color: #373b3e;
--bs-btn-focus-shadow-rgb: 66, 70, 73;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #4d5154;
--bs-btn-active-border-color: #373b3e;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #212529;
--bs-btn-disabled-border-color: #212529;
}
html[data-bs-theme="light"] .btn-adaptive {
--bs-btn-color: #000;
--bs-btn-bg: #f8f9fa;
--bs-btn-border-color: #f8f9fa;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #d3d4d5;
--bs-btn-hover-border-color: #c6c7c8;
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #c6c7c8;
--bs-btn-active-border-color: #babbbc;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #f8f9fa;
--bs-btn-disabled-border-color: #f8f9fa;
}