frontend: system theme: auto light/dark mode

This commit is contained in:
nkanaev
2026-07-13 00:24:27 +01:00
parent eb27f21fd2
commit 61bf14e9a3
3 changed files with 67 additions and 3 deletions

View File

@@ -447,6 +447,20 @@ button.theme-light {
background-color: #fff !important;
}
.theme-swatch {
padding: 0;
border: none;
height: 2.375rem;
}
.theme-swatch.theme-system {
background-image: linear-gradient(135deg, #fff 0, #fff 35%, #0e0e0e 65%, #0e0e0e 100%);
}
.theme-swatch[aria-pressed="true"] {
border: 0.3rem solid #0080d4;
}
a,
.btn-link:hover {
color: #0080d4;
@@ -521,6 +535,39 @@ a,
border-color: #1a1a1a;
}
/* theme: system follows the system color scheme */
@media (prefers-color-scheme: dark) {
.theme-system,
.theme-system .btn-default,
.theme-system .dropdown-menu,
.theme-system .dropdown-item,
.theme-system .form-control,
.theme-system .modal-content,
.theme-system .toolbar-search {
color: #d1d1d1;
background-color: #0e0e0e;
}
.theme-system .content hr,
.theme-system .content pre,
.theme-system .border-right,
.theme-system .border-top,
.theme-system .dropdown-divider {
border-color: #1a1a1a !important;
}
.theme-system .selectgroup-label:hover,
.theme-system .dropdown-item:hover,
.theme-system .toolbar-item:hover,
.theme-system .toolbar-search:hover,
.theme-system .toolbar-search:focus {
background-color: #1a1a1a;
}
.theme-system .dropdown-menu,
.theme-system .modal-content {
border-color: #1a1a1a !important;
}
}
/* animation */
.indicator-enter-active, .indicator-leave-active {
transition: all .3s;