gui, lib/api: Adds support for prefers-color-scheme (fixes #6115)

* gui, lib/api: Adds support for prefers-color-scheme on default theme (fixes #6115)

- Renames current default theme into a new "light" theme
- Modifies assets serving to allow getting assets from different themes

* lib/api: Serve assets from arbitrary theme when path starts with "theme-assets"

* lib/api: Moves constant out of function

* Loads light theme in browsers without support for prefers-color-scheme

* gui: Disables dark theme when printing

* Prevents repeated injection and adds support for older browsers

The CSS is always loaded if there is no support for `matchMedia`.
This commit is contained in:
Pablo 2019-11-08 22:44:37 +01:00 committed by Audrius Butkevicius
parent 65c172cd8d
commit 9b01e64c66
4 changed files with 71 additions and 26 deletions

View File

@ -7,29 +7,5 @@
*/ */
.panel-progress { @import "/theme-assets/dark/assets/css/theme.css" screen and (prefers-color-scheme: dark);
background: #3498db; @import "/theme-assets/light/assets/css/theme.css" (prefers-color-scheme: light), (prefers-color-scheme: no-preference);
}
.identicon rect {
fill: #333;
}
.panel-warning .identicon rect {
fill: #fff;
}
.li-column {
background-color: rgb(236, 240, 241);
border-radius: 3px;
}
.panel-heading:hover, .panel-heading:focus {
text-decoration: none;
}
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
color: black !important;
font-weight: lighter !important;
}

View File

@ -389,6 +389,7 @@ angular.module('syncthing.core')
}); });
refreshNoAuthWarning(); refreshNoAuthWarning();
setDefaultTheme();
if (!hasConfig) { if (!hasConfig) {
$scope.$emit('ConfigLoaded'); $scope.$emit('ConfigLoaded');
@ -651,6 +652,23 @@ angular.module('syncthing.core')
$scope.remoteNeedDevice = undefined; $scope.remoteNeedDevice = undefined;
} }
function setDefaultTheme() {
if (!document.getElementById("fallback-theme-css")){
// check if no support for prefers-color-scheme
var colorSchemeNotSupported = typeof window.matchMedia === "undefined" || window.matchMedia('(prefers-color-scheme: dark)').media === 'not all';
if ($scope.config.gui.theme === "default" && colorSchemeNotSupported) {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link id="fallback-theme-css" rel="stylesheet" href="/theme-assets/light/assets/css/theme.css" onload="document.documentElement.style.display = \'\'">'
);
}
}
}
function saveIgnores(ignores, cb) { function saveIgnores(ignores, cb) {
$http.post(urlbase + '/db/ignores?folder=' + encodeURIComponent($scope.currentFolder.id), { $http.post(urlbase + '/db/ignores?folder=' + encodeURIComponent($scope.currentFolder.id), {
ignore: ignores ignore: ignores

View File

@ -0,0 +1,35 @@
/*
// Copyright (C) 2016 The Syncthing Authors.
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// You can obtain one at https://mozilla.org/MPL/2.0/.
*/
.panel-progress {
background: #3498db;
}
.identicon rect {
fill: #333;
}
.panel-warning .identicon rect {
fill: #fff;
}
.li-column {
background-color: rgb(236, 240, 241);
border-radius: 3px;
}
.panel-heading:hover, .panel-heading:focus {
text-decoration: none;
}
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
color: black !important;
font-weight: lighter !important;
}

View File

@ -23,6 +23,8 @@ import (
"github.com/syncthing/syncthing/lib/sync" "github.com/syncthing/syncthing/lib/sync"
) )
const themePrefix = "theme-assets/"
type staticsServer struct { type staticsServer struct {
assetDir string assetDir string
assets map[string][]byte assets map[string][]byte
@ -91,6 +93,20 @@ func (s *staticsServer) serveAsset(w http.ResponseWriter, r *http.Request) {
modificationTime := s.lastThemeChange modificationTime := s.lastThemeChange
s.mut.RUnlock() s.mut.RUnlock()
// If path starts with special prefix, get theme and file from path
if strings.HasPrefix(file, themePrefix) {
path := file[len(themePrefix):]
i := strings.IndexRune(path, '/')
if i == -1 {
http.NotFound(w, r)
return
}
theme = path[:i]
file = path[i+1:]
}
// Check for an override for the current theme. // Check for an override for the current theme.
if s.assetDir != "" { if s.assetDir != "" {
p := filepath.Join(s.assetDir, theme, filepath.FromSlash(file)) p := filepath.Join(s.assetDir, theme, filepath.FromSlash(file))