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:
committed by
Audrius Butkevicius
parent
65c172cd8d
commit
9b01e64c66
@@ -389,6 +389,7 @@ angular.module('syncthing.core')
|
||||
});
|
||||
|
||||
refreshNoAuthWarning();
|
||||
setDefaultTheme();
|
||||
|
||||
if (!hasConfig) {
|
||||
$scope.$emit('ConfigLoaded');
|
||||
@@ -651,6 +652,23 @@ angular.module('syncthing.core')
|
||||
$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) {
|
||||
$http.post(urlbase + '/db/ignores?folder=' + encodeURIComponent($scope.currentFolder.id), {
|
||||
ignore: ignores
|
||||
|
||||
Reference in New Issue
Block a user