mirror of
https://github.com/syncthing/syncthing.git
synced 2026-11-07 10:03:18 -05:00
### 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>
326 lines
6.0 KiB
CSS
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;
|
|
}
|