Allow themes to change theme-color
This commit is contained in:
parent
526a689e14
commit
efa0aeb2c6
@ -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);
|
||||
|
@ -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() {
|
||||
|
@ -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}}
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
@ -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);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user