Files
syncthing/gui/dark/assets/css/theme.css
T
GiridharandGiridhar 94c3c1cdef fix(gui): improve header and button color contrast (fixes #10488) (#10815)
### Purpose

Improve the contrast of semantic request-dialog headers and buttons in
the light, dark, and black GUI themes.

The light theme keeps its bright semantic colors and uses black text for
success, warning, and danger alerts plus success/warning buttons. Danger
buttons use the existing darker red with white text. The dark themes use
darker success, warning, and danger backgrounds with white text.

The lowest enabled-state contrast ratio is 4.509:1, meeting WCAG AA for
normal text.

### Testing

- `go run build.go assets`
- `go run build.go build syncthing`
- `git diff --check`
- Checked the base and interactive semantic color pairs with a WCAG
contrast calculation; all enabled states are at least 4.5:1.
- Loaded the generated GUI assets in Chromium and verified the computed
foreground/background colors for success, warning, and danger alerts and
buttons in both light and dark themes.

### Screenshots

Rendered light and dark fixtures locally to verify the complete alert
and button combinations. The computed colors matched the intended theme
rules and no clipping or layout changes were introduced.

### Documentation

No documentation changes are required; this only corrects existing theme
colors.

Signed-off-by: Giridhar <giridharpavan593@gmail.com>
Co-authored-by: Giridhar <giridharpavan593@gmail.com>
2026-09-22 14:50:39 +02:00

326 lines
6.0 KiB
CSS

/**
Dark theme
Author: alessandro.g89
Source: https://userstyles.org/styles/122502/syncthing-dark
Modified by: fti7
**/
body {
color: #aaa !important;
background-color: #272727 !important;
}
a:hover,a:focus,a.focus{
outline: none !important;
}
/* navbar */
.navbar {
background-color: #333 !important;
border-color: #424242 !important;
border-top-width: 1px !important;
border-bottom-width: 1px !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #3498db !important;
background-color: #424242 !important;
border: 1px solid #424242 !important;
border-bottom-color: transparent !important;
cursor: default;
}
.nav-tabs{
border-bottom: 1px solid #333;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
background-color: #424242 !important;
border-color: transparent !important;
}
.navbar-text, .dropdown>a, .dropdown-menu>li>a, .hidden-xs>a, .navbar-link {
color: #aaa !important;
}
.dropdown-menu {
border-color: #424242 !important;
border-width: 2px !important;
background-color: #222 !important;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
color: #fff !important;
background-color: #333 !important;
}
.open>.dropdown-toggle, .dropdown-toggle:hover {
border-color: #424242 !important;
background-color: #222 !important;
}
.divider {
background-color: #333 !important;
height: 2px !important;
}
li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
outline: none !important;
border-color: #424242 !important;
background-color: #222 !important;
}
.dropdown-menu>.active>a {
color: #fff !important;
background-color: #217dbb !important;
}
/* main panel */
.panel {
background-color: #323232 !important;
border-width: 2px !important;
}
.panel-default {
border-color: #424242 !important;
}
.panel-default > .panel-heading {
color: #aaa !important;
border-color: #222 !important;
background-color: #3B3B3B !important;
}
.panel-warning > .panel-heading {
color: #222 !important;
}
.panel-progress {
background: #3498db;
}
.panel-footer {
background-color: #2D2D2D !important;
border-width: 0 !important;
}
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #2E2E2E !important;
}
.panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>.list-group {
border-top: 1px solid #424242 !important;
}
.identicon rect {
fill: #aaa;
}
.panel-warning .identicon rect {
fill: #222;
}
.panel-heading:hover, .panel-heading:focus {
text-decoration: none;
}
/* buttons */
.btn {
border-radius: 3px !important;
border-width: 0px !important;
}
.btn:hover, .btn:focus, .btn.focus {
outline: none !important;
}
.btn-default {
color: #aaa !important;
background-color: #333 !important;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus {
color: #fff !important;
background-color: #484848 !important;
}
.btn-primary {
background-color: #217dbb !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
background-color: #3498db !important;
}
.btn-success {
color: #fff !important;
background-color: #198754 !important;
}
.btn-success:hover, .btn-success:focus, .btn-success.focus {
background-color: #146c43 !important;
}
.btn-warning {
color: #fff !important;
background-color: #806700 !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus {
background-color: #6c5700 !important;
}
.btn-danger {
color: #fff !important;
background-color: #d62c1a !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus {
background-color: #b62516 !important;
}
/* modal dialogs */
.modal-header {
border-bottom-color: #424242 !important;
}
.modal-header:not(.alert) {
background-color: #3B3B3B;
}
.alert-info {
color: #222 !important;
}
.alert-success,
.alert-warning,
.alert-danger {
color: #fff !important;
}
.alert-success {
background-color: #198754 !important;
}
.alert-warning {
background-color: #806700 !important;
}
.alert-danger {
background-color: #d62c1a !important;
}
.modal-content {
border-color: #666 !important;
border-width: 2px !important;
background-color: #272727 !important;
}
.modal-footer {
border-color: #303030 !important;
background-color: #2D2D2D !important;
}
.help-block {
color: #aaa !important;
}
.form-control {
color: #aaa !important;
border-color: #424242 !important;
background-color: #3B3B3B !important;
}
code.ng-binding{
color: #f99 !important;
background-color: #444 !important;
}
.well, .form-control[readonly="readonly"], .popover { /* read-only fields*/
border-color: #424242 !important;
background-color: #3B3B3B !important;
}
/* buttons for pagination */
.pagination>li>a, .pagination>li>span {
background-color: #333 !important;
border-color: #484848 !important;
}
.pagination>li>a:hover, .pagination>li>a:focus, .pagination>li>a.focus {
background-color: #484848 !important;
}
/* progress bars */
.progress-bar {
background-color: #217dbb !important;
}
.progress-bar-success {
background-color: #0A8522 !important;
}
.progress-bar-info {
background-color: #9b59b6 !important;
}
.progress-bar-warning {
background-color: #c29d0b !important;
}
.progress-bar-danger {
background-color: #d62c1a !important;
}
.progress .frontal {
color: #222;
}
.text-info {
color: #9a6dc0;
}
.text-primary {
color: #3fa9f0;
}
/*
* Fancytree tweaks
*/
.fancytree-container tr:hover,
.fancytree-focused {
background-color: #424242;
}
/* Remote Devices 'connection type'-icon color set to #aaa */
.reception {
filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
}
/* Disabled checkbox panels */
.checkbox[disabled] {
background-color: #3B3B3B;
}
.checkbox[disabled] * {
color: #999999;
}
.checkbox[disabled] .help-block {
color: #999999 !important;
}