Allow disabling theme picker

Author: svilenmarkov

docs/configuration.md

@@ -389,10 +389,12 @@ Example:
 
 ```yaml
 theme:
+  # This will be the default theme
   background-color: 100 20 10
   primary-color: 40 90 40
   contrast-multiplier: 1.1
 
+  disable-picker: false
   presets:
     gruvbox-dark:
       background-color: 0 0 16
@@ -421,6 +423,7 @@ If you don't want to spend time configuring your own theme, there are [several a
 | contrast-multiplier | number | no | 1 |
 | text-saturation-multiplier | number | no | 1 |
 | custom-css-file | string | no | |
+| disable-picker | bool | false | |
 | presets | object | no | |
 
 #### `light`
@@ -466,8 +469,11 @@ theme:
 >
 > In addition, you can also use the `css-class` property which is available on every widget to set custom class names for individual widgets.
 
+#### `disable-picker`
+When set to `true` hides the theme picker and disables the abiltity to switch between themes. All users who previously picked a non-default theme will be switched over to the default theme.
+
 #### `presets`
-Define additional theme presets that can be selected from the theme switcher on the page. For each preset, you can specify the same properties as for the default theme, such as `background-color`, `primary-color`, `positive-color`, `negative-color`, `contrast-multiplier`, etc., except for the `custom-css-file` property.
+Define additional theme presets that can be selected from the theme picker on the page. For each preset, you can specify the same properties as for the default theme, such as `background-color`, `primary-color`, `positive-color`, `negative-color`, `contrast-multiplier`, etc., except for the `custom-css-file` property.
 
 Example:
 

internal/glance/config.go

@@ -47,8 +47,10 @@ type config struct {
 
 	Theme struct {
 		themeProperties `yaml:",inline"`
-		CustomCSSFile   string                                   `yaml:"custom-css-file"`
-		Presets         orderedYAMLMap[string, *themeProperties] `yaml:"presets"`
+		CustomCSSFile   string `yaml:"custom-css-file"`
+
+		DisablePicker bool                                     `yaml:"disable-picker"`
+		Presets       orderedYAMLMap[string, *themeProperties] `yaml:"presets"`
 	} `yaml:"theme"`
 
 	Branding struct {

internal/glance/glance.go

@@ -101,35 +101,37 @@ func newApplication(c *config) (*application, error) {
 	// Init themes
 	//
 
-	themeKeys := make([]string, 0, 2)
-	themeProps := make([]*themeProperties, 0, 2)
-
-	defaultDarkTheme, ok := config.Theme.Presets.Get("default-dark")
-	if ok && !config.Theme.SameAs(defaultDarkTheme) || !config.Theme.SameAs(&themeProperties{}) {
-		themeKeys = append(themeKeys, "default-dark")
-		themeProps = append(themeProps, &themeProperties{})
-	}
-
-	themeKeys = append(themeKeys, "default-light")
-	themeProps = append(themeProps, &themeProperties{
-		Light:                    true,
-		BackgroundColor:          &hslColorField{240, 13, 95},
-		PrimaryColor:             &hslColorField{230, 100, 30},
-		NegativeColor:            &hslColorField{0, 70, 50},
-		ContrastMultiplier:       1.3,
-		TextSaturationMultiplier: 0.5,
-	})
+	if !config.Theme.DisablePicker {
+		themeKeys := make([]string, 0, 2)
+		themeProps := make([]*themeProperties, 0, 2)
+
+		defaultDarkTheme, ok := config.Theme.Presets.Get("default-dark")
+		if ok && !config.Theme.SameAs(defaultDarkTheme) || !config.Theme.SameAs(&themeProperties{}) {
+			themeKeys = append(themeKeys, "default-dark")
+			themeProps = append(themeProps, &themeProperties{})
+		}
 
-	themePresets, err := newOrderedYAMLMap(themeKeys, themeProps)
-	if err != nil {
-		return nil, fmt.Errorf("creating theme presets: %v", err)
-	}
-	config.Theme.Presets = *themePresets.Merge(&config.Theme.Presets)
+		themeKeys = append(themeKeys, "default-light")
+		themeProps = append(themeProps, &themeProperties{
+			Light:                    true,
+			BackgroundColor:          &hslColorField{240, 13, 95},
+			PrimaryColor:             &hslColorField{230, 100, 30},
+			NegativeColor:            &hslColorField{0, 70, 50},
+			ContrastMultiplier:       1.3,
+			TextSaturationMultiplier: 0.5,
+		})
+
+		themePresets, err := newOrderedYAMLMap(themeKeys, themeProps)
+		if err != nil {
+			return nil, fmt.Errorf("creating theme presets: %v", err)
+		}
+		config.Theme.Presets = *themePresets.Merge(&config.Theme.Presets)
 
-	for key, properties := range config.Theme.Presets.Items() {
-		properties.Key = key
-		if err := properties.init(); err != nil {
-			return nil, fmt.Errorf("initializing preset theme %s: %v", key, err)
+		for key, properties := range config.Theme.Presets.Items() {
+			properties.Key = key
+			if err := properties.init(); err != nil {
+				return nil, fmt.Errorf("initializing preset theme %s: %v", key, err)
+			}
 		}
 	}
 
@@ -288,11 +290,13 @@ type templateData struct {
 func (a *application) populateTemplateRequestData(data *templateRequestData, r *http.Request) {
 	theme := &a.Config.Theme.themeProperties
 
-	selectedTheme, err := r.Cookie("theme")
-	if err == nil {
-		preset, exists := a.Config.Theme.Presets.Get(selectedTheme.Value)
-		if exists {
-			theme = preset
+	if !a.Config.Theme.DisablePicker {
+		selectedTheme, err := r.Cookie("theme")
+		if err == nil {
+			preset, exists := a.Config.Theme.Presets.Get(selectedTheme.Value)
+			if exists {
+				theme = preset
+			}
 		}
 	}
 
@@ -436,7 +440,11 @@ func (a *application) server() (func() error, func() error) {
 	mux.HandleFunc("GET /{page}", a.handlePageRequest)
 
 	mux.HandleFunc("GET /api/pages/{page}/content/{$}", a.handlePageContentRequest)
-	mux.HandleFunc("POST /api/set-theme/{key}", a.handleThemeChangeRequest)
+
+	if !a.Config.Theme.DisablePicker {
+		mux.HandleFunc("POST /api/set-theme/{key}", a.handleThemeChangeRequest)
+	}
+
 	mux.HandleFunc("/api/widgets/{widget}/{path...}", a.handleWidgetRequest)
 	mux.HandleFunc("GET /api/healthz", func(w http.ResponseWriter, _ *http.Request) {
 		w.WriteHeader(http.StatusOK)

internal/glance/static/js/page.js

@@ -689,12 +689,15 @@ async function changeTheme(key, onChanged) {
     setTimeout(() => { tempStyle.remove(); }, 10);
 }
 
-function initThemeSwitcher() {
+function initThemePicker() {
+    const themeChoicesInMobileNav = find(".mobile-navigation .theme-choices");
+    if (!themeChoicesInMobileNav) return;
+
     const themeChoicesInHeader = find(".header-container .theme-choices");
 
     if (themeChoicesInHeader) {
         themeChoicesInHeader.replaceWith(
-            find(".mobile-navigation .theme-choices").cloneNode(true)
+            themeChoicesInMobileNav.cloneNode(true)
         );
     }
 
@@ -739,7 +742,7 @@ function initThemeSwitcher() {
 }
 
 async function setupPage() {
-    initThemeSwitcher();
+    initThemePicker();
 
     const pageElement = document.getElementById("page");
     const pageContentElement = document.getElementById("page-content");

internal/glance/templates/page.html

@@ -33,6 +33,7 @@
             <nav class="nav flex grow hide-scrollbars">
                 {{ template "navigation-links" . }}
             </nav>
+            {{ if not .App.Config.Theme.DisablePicker }}
             <div class="theme-picker self-center" data-popover-type="html" data-popover-position="below" data-popover-show-delay="0">
                 <div class="current-theme-preview">
                     {{ .Request.Theme.PreviewHTML }}
@@ -41,6 +42,7 @@
                     <div class="theme-choices"></div>
                 </div>
             </div>
+            {{ end }}
             {{- if .App.RequiresAuth }}
             <a class="block self-center" href="{{ .App.Config.Server.BaseURL }}/logout" title="Logout">
                 <svg class="logout-button" stroke="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
@@ -66,6 +68,7 @@
         </div>
 
         <div class="mobile-navigation-actions flex flex-column margin-block-10">
+            {{ if not .App.Config.Theme.DisablePicker }}
             <div class="theme-picker flex justify-between items-center" data-popover-type="html" data-popover-position="above" data-popover-show-delay="0" data-popover-hide-delay="100" data-popover-anchor=".current-theme-preview" data-popover-trigger="click">
                 <div data-popover-html>
                     <div class="theme-choices">
@@ -87,6 +90,7 @@
                     </svg>
                 </div>
             </div>
+            {{ end }}
 
             {{ if .App.RequiresAuth }}
             <a href="{{ .App.Config.Server.BaseURL }}/logout" class="flex justify-between items-center">