Allow themes to change theme-color

This commit is contained in:
Pavel Djundik 2019-07-22 19:50:04 +03:00
parent 526a689e14
commit efa0aeb2c6
5 changed files with 55 additions and 22 deletions

View File

@ -30,6 +30,8 @@ const noSync = ["syncSettings"];
// to the server regardless of the clients sync setting.
const alwaysSync = ["highlights"];
const defaultThemeColor = document.querySelector('meta[name="theme-color"]').content;
// Process usersettings from localstorage.
let userSettings = JSON.parse(storage.get("settings")) || false;
@ -95,10 +97,19 @@ function applySetting(name, value) {
$syncWarningOverride.hide();
$forceSyncButton.hide();
} else if (name === "theme") {
value = `themes/${value}.css`;
const themeUrl = `themes/${value}.css`;
if ($theme.attr("href") !== value) {
$theme.attr("href", value);
if ($theme.attr("href") !== themeUrl) {
$theme.attr("href", themeUrl);
const newTheme = $settings.find("#theme-select option[value='" + value + "']");
let themeColor = defaultThemeColor;
if (newTheme.length > 0 && newTheme[0].dataset.themeColor) {
themeColor = newTheme[0].dataset.themeColor;
}
document.querySelector('meta[name="theme-color"]').content = themeColor;
}
} else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) {
$userStyles.html(value);

View File

@ -59,8 +59,12 @@ socket.on("configuration", function(data) {
// If localStorage contains a theme that does not exist on this server, switch
// back to its default theme.
if (!data.themes.map((t) => t.name).includes(options.settings.theme)) {
const currentTheme = data.themes.find((t) => t.name === options.settings.theme);
if (currentTheme === undefined) {
options.processSetting("theme", data.defaultTheme, true);
} else if (currentTheme.themeColor) {
document.querySelector('meta[name="theme-color"]').content = currentTheme.themeColor;
}
function handleFormSubmit() {

View File

@ -104,7 +104,7 @@
<label for="theme-select" class="sr-only">Theme</label>
<select id="theme-select" name="theme" class="input">
{{#each themes}}
<option value="{{name}}">
<option value="{{name}}" data-theme-color="{{themeColor}}">
{{displayName}}
</option>
{{/each}}

View File

@ -9,21 +9,19 @@ const themes = new Map();
module.exports = {
addTheme,
getAll,
getFilename,
getByName,
loadLocalThemes,
};
function loadLocalThemes() {
fs.readdir(path.join(__dirname, "..", "..", "..", "public", "themes"), (err, builtInThemes) => {
if (err) {
return;
}
const builtInThemes = fs.readdirSync(
path.join(__dirname, "..", "..", "..", "public", "themes")
);
builtInThemes
.filter((theme) => theme.endsWith(".css"))
.map(makeLocalThemeObject)
.forEach((theme) => themes.set(theme.name, theme));
});
builtInThemes
.filter((theme) => theme.endsWith(".css"))
.map(makeLocalThemeObject)
.forEach((theme) => themes.set(theme.name, theme));
}
function addTheme(packageName, packageObject) {
@ -35,13 +33,17 @@ function addTheme(packageName, packageObject) {
}
function getAll() {
return _.sortBy(Array.from(themes.values()), "displayName");
const filteredThemes = [];
for (const theme of themes.values()) {
filteredThemes.push(_.pick(theme, ["displayName", "name", "themeColor"]));
}
return _.sortBy(filteredThemes, "displayName");
}
function getFilename(module) {
if (themes.has(module)) {
return themes.get(module).filename;
}
function getByName(name) {
return themes.get(name);
}
function makeLocalThemeObject(css) {
@ -49,6 +51,7 @@ function makeLocalThemeObject(css) {
return {
displayName: themeName.charAt(0).toUpperCase() + themeName.slice(1),
name: themeName,
themeColor: null,
};
}
@ -57,10 +60,12 @@ function makePackageThemeObject(moduleName, module) {
return;
}
const themeColor = /^#[0-9A-F]{6}$/i.test(module.themeColor) ? module.themeColor : null;
const modulePath = Helper.getPackageModulePath(moduleName);
return {
displayName: module.name || moduleName,
filename: path.join(modulePath, module.css),
name: moduleName,
themeColor: themeColor,
};
}

View File

@ -65,13 +65,13 @@ module.exports = function() {
// local themes will not get those changes.
app.get("/themes/:theme.css", (req, res) => {
const themeName = req.params.theme;
const theme = themes.getFilename(themeName);
const theme = themes.getByName(themeName);
if (theme === undefined) {
return res.status(404).send("Not found");
}
return res.sendFile(theme);
return res.sendFile(theme.filename);
});
app.get("/packages/:package/:filename", (req, res) => {
@ -179,6 +179,19 @@ module.exports = function() {
manager = new ClientManager();
packages.loadPackages();
const defaultTheme = themes.getByName(Helper.config.theme);
if (defaultTheme === undefined) {
log.warn(
`The specified default theme "${colors.red(
Helper.config.theme
)}" does not exist, verify your config.`
);
Helper.config.theme = "default";
} else if (defaultTheme.themeColor) {
Helper.config.themeColor = defaultTheme.themeColor;
}
new Identification((identHandler) => {
manager.init(identHandler, sockets);
});