diff --git a/README.md b/README.md
index eb5b20ab..16bbf551 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,7 @@ Hajimari supports the following configuration options that can be modified by ei
| instanceName | Name of the Hajimari instance | "" | string |
| customApps | A list of custom apps that you would like to add to the Hajimari instance | {} | []CustomApp |
| groups | A list of bookmark groups to add to the Hajimari instance | {} | []groups |
+| defaultThem | Default theme name. See previous image for a list of available themes | "gazette" | string |
#### NamespaceSelector
diff --git a/config.yaml.example b/config.yaml.example
index d72db3f7..685fc919 100644
--- a/config.yaml.example
+++ b/config.yaml.example
@@ -5,6 +5,7 @@ namespaceSelector:
- downloads
title: null
name: "you"
+defaultTheme: "gazette"
customApps:
- name: Test
url: https://example.com
diff --git a/internal/config/config.go b/internal/config/config.go
index 8233761f..b1b57d2a 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -19,6 +19,7 @@ type Config struct {
Title string
InstanceName string
Name string
+ DefaultTheme string
CustomApps []CustomApp
Groups []Group
Providers []Provider
diff --git a/internal/handlers/startpage.go b/internal/handlers/startpage.go
index abcf0642..9ace5914 100644
--- a/internal/handlers/startpage.go
+++ b/internal/handlers/startpage.go
@@ -121,21 +121,23 @@ func (sr *startpageResource) GetStartpage(w http.ResponseWriter, r *http.Request
w.Header().Add("Content-Type", "text/html")
err = sr.tpl.Execute(w, struct {
- Title string
- Greeting string
- Date string
- Apps []hajimari.App
- Groups []config.Group
- Providers []config.Provider
- Modules []config.Module
+ Title string
+ Greeting string
+ Date string
+ DefaultTheme string
+ Apps []hajimari.App
+ Groups []config.Group
+ Providers []config.Provider
+ Modules []config.Module
}{
- Title: appConfig.Title,
- Greeting: tplutil.Greet(appConfig.Name, time.Now().Hour()),
- Date: time.Now().Format("Mon, Jan 02"),
- Apps: hajimariApps,
- Groups: appConfig.Groups,
- Providers: appConfig.Providers,
- Modules: appConfig.Modules,
+ Title: appConfig.Title,
+ Greeting: tplutil.Greet(appConfig.Name, time.Now().Hour()),
+ Date: time.Now().Format("Mon, Jan 02"),
+ DefaultTheme: appConfig.DefaultTheme,
+ Apps: hajimariApps,
+ Groups: appConfig.Groups,
+ Providers: appConfig.Providers,
+ Modules: appConfig.Modules,
})
if err != nil {
diff --git a/web/static/js/themer.js b/web/static/js/themer.js
index 9c19380d..79b3ac4d 100755
--- a/web/static/js/themer.js
+++ b/web/static/js/themer.js
@@ -1,139 +1,150 @@
-const setValue = (property, value) => {
- if (value) {
- document.documentElement.style.setProperty(`--${property}`, value);
-
- const input = document.querySelector(`#${property}`);
- if (input) {
- value = value.replace('px', '');
- input.value = value;
- }
- }
-};
-
-const setValueFromLocalStorage = property => {
- let value = localStorage.getItem(property);
- setValue(property, value);
-};
-
-const setTheme = options => {
- for (let option of Object.keys(options)) {
- const property = option;
- const value = options[option];
+const dataThemeButtons = document.querySelectorAll('[data-theme]');
- setValue(property, value);
- localStorage.setItem(property, value);
- }
+for (let i = 0; i < dataThemeButtons.length; i++) {
+ dataThemeButtons[i].addEventListener('click', () => {
+ const theme = dataThemeButtons[i].dataset.theme;
+ applyTheme(theme);
+ });
}
document.addEventListener('DOMContentLoaded', () => {
+ if (isThemeSet()) {
setValueFromLocalStorage('color-background');
setValueFromLocalStorage('color-text-pri');
setValueFromLocalStorage('color-text-acc');
+ } else {
+ applyTheme(window.defaultTheme);
+ }
});
-const dataThemeButtons = document.querySelectorAll('[data-theme]');
+const setValue = (property, value) => {
+ if (value) {
+ document.documentElement.style.setProperty(`--${property}`, value);
-for (let i = 0; i < dataThemeButtons.length; i++) {
- dataThemeButtons[i].addEventListener('click', () => {
- const theme = dataThemeButtons[i].dataset.theme;
-
- switch (theme) {
- case 'blackboard':
- setTheme({
- 'color-background': '#1a1a1a',
- 'color-text-pri': '#FFFDEA',
- 'color-text-acc': '#5c5c5c'
- });
- return;
-
- case 'gazette':
- setTheme({
- 'color-background': '#F2F7FF',
- 'color-text-pri': '#000000',
- 'color-text-acc': '#5c5c5c'
- });
- return;
-
- case 'espresso':
- setTheme({
- 'color-background': '#21211F',
- 'color-text-pri': '#D1B59A',
- 'color-text-acc': '#4E4E4E'
- });
- return;
-
- case 'cab':
- setTheme({
- 'color-background': '#F6D305',
- 'color-text-pri': '#1F1F1F',
- 'color-text-acc': '#424242'
- });
- return;
-
- case 'cloud':
- setTheme({
- 'color-background': '#f1f2f0',
- 'color-text-pri': '#35342f',
- 'color-text-acc': '#37bbe4'
- });
- return;
-
- case 'lime':
- setTheme({
- 'color-background': '#263238',
- 'color-text-pri': '#AABBC3',
- 'color-text-acc': '#aeea00'
- });
- return;
-
- case 'white':
- setTheme({
- 'color-background': '#ffffff',
- 'color-text-pri': '#222222',
- 'color-text-acc': '#dddddd'
- });
- return;
-
- case 'tron':
- setTheme({
- 'color-background': '#242B33',
- 'color-text-pri': '#EFFBFF',
- 'color-text-acc': '#6EE2FF'
- });
- return;
-
- case 'blues':
- setTheme({
- 'color-background': '#2B2C56',
- 'color-text-pri': '#EFF1FC',
- 'color-text-acc': '#6677EB'
- });
- return;
-
- case 'passion':
- setTheme({
- 'color-background': '#f5f5f5',
- 'color-text-pri': '#12005e',
- 'color-text-acc': '#8e24aa'
- });
- return;
-
- case 'chalk':
- setTheme({
- 'color-background': '#263238',
- 'color-text-pri': '#AABBC3',
- 'color-text-acc': '#FF869A'
- });
- return;
-
- case 'paper':
- setTheme({
- 'color-background': '#F8F6F1',
- 'color-text-pri': '#4C432E',
- 'color-text-acc': '#AA9A73'
- });
- return;
-
- }
- })
-}
\ No newline at end of file
+ const input = document.querySelector(`#${property}`);
+ if (input) {
+ value = value.replace('px', '');
+ input.value = value;
+ }
+ }
+};
+
+const setValueFromLocalStorage = (property) => {
+ let value = localStorage.getItem(property);
+ setValue(property, value);
+};
+
+const setTheme = (options) => {
+ for (let option of Object.keys(options)) {
+ const property = option;
+ const value = options[option];
+
+ setValue(property, value);
+ localStorage.setItem(property, value);
+ }
+};
+
+const isThemeSet = () =>
+ ['color-background', 'color-text-pri', 'color-text-acc']
+ .map((key) => localStorage.getItem(key))
+ .filter(Boolean).length > 0;
+
+const applyTheme = (theme) => {
+ switch (theme) {
+ case 'blackboard':
+ setTheme({
+ 'color-background': '#1a1a1a',
+ 'color-text-pri': '#FFFDEA',
+ 'color-text-acc': '#5c5c5c',
+ });
+ return;
+
+ case 'gazette':
+ setTheme({
+ 'color-background': '#F2F7FF',
+ 'color-text-pri': '#000000',
+ 'color-text-acc': '#5c5c5c',
+ });
+ return;
+
+ case 'espresso':
+ setTheme({
+ 'color-background': '#21211F',
+ 'color-text-pri': '#D1B59A',
+ 'color-text-acc': '#4E4E4E',
+ });
+ return;
+
+ case 'cab':
+ setTheme({
+ 'color-background': '#F6D305',
+ 'color-text-pri': '#1F1F1F',
+ 'color-text-acc': '#424242',
+ });
+ return;
+
+ case 'cloud':
+ setTheme({
+ 'color-background': '#f1f2f0',
+ 'color-text-pri': '#35342f',
+ 'color-text-acc': '#37bbe4',
+ });
+ return;
+
+ case 'lime':
+ setTheme({
+ 'color-background': '#263238',
+ 'color-text-pri': '#AABBC3',
+ 'color-text-acc': '#aeea00',
+ });
+ return;
+
+ case 'white':
+ setTheme({
+ 'color-background': '#ffffff',
+ 'color-text-pri': '#222222',
+ 'color-text-acc': '#dddddd',
+ });
+ return;
+
+ case 'tron':
+ setTheme({
+ 'color-background': '#242B33',
+ 'color-text-pri': '#EFFBFF',
+ 'color-text-acc': '#6EE2FF',
+ });
+ return;
+
+ case 'blues':
+ setTheme({
+ 'color-background': '#2B2C56',
+ 'color-text-pri': '#EFF1FC',
+ 'color-text-acc': '#6677EB',
+ });
+ return;
+
+ case 'passion':
+ setTheme({
+ 'color-background': '#f5f5f5',
+ 'color-text-pri': '#12005e',
+ 'color-text-acc': '#8e24aa',
+ });
+ return;
+
+ case 'chalk':
+ setTheme({
+ 'color-background': '#263238',
+ 'color-text-pri': '#AABBC3',
+ 'color-text-acc': '#FF869A',
+ });
+ return;
+
+ case 'paper':
+ setTheme({
+ 'color-background': '#F8F6F1',
+ 'color-text-pri': '#4C432E',
+ 'color-text-acc': '#AA9A73',
+ });
+ return;
+ }
+};
diff --git a/web/template/index.html.tmpl b/web/template/index.html.tmpl
index 17994b15..3c02498b 100644
--- a/web/template/index.html.tmpl
+++ b/web/template/index.html.tmpl
@@ -4,7 +4,7 @@
{{or .Title "Hajimari"}}
-
+
@@ -13,6 +13,7 @@
+