Allow setting path to custom CSS

docs/configuration.md

@@ -186,6 +186,7 @@ If you don't want to spend time configuring your own theme, there are [several a
 | negative-color | HSL | no | 0 70 70 |
 | contrast-multiplier | number | no | 1 |
 | text-saturation-multiplier | number | no | 1 |
+| custom-css-file | string | no | |
 
 #### `light`
 Whether the scheme is light or dark. This does not change the background color, it inverts the text colors so that they look appropriately on a light background.
@@ -210,6 +211,23 @@ Used to increase or decrease the contrast (in other words visibility) of the tex
 #### `text-saturation-multiplier`
 Used to increase or decrease the saturation of text, useful when using a custom background color with a high amount of saturation and needing the text to have a more neutral color. `0.5` means that the saturation will be 50% lower and `1.5` means that it'll be 50% higher.
 
+#### `custom-css-file`
+Path to a custom CSS file, either external or one from within the server configured assets path. Example:
+
+```yaml
+theme:
+  custom-css-file: /assets/my-style.css
+```
+
+> [!TIP]
+>
+> Because Glance uses a lot of utility classes it might be difficult to target some elements. To make it easier to style specific widgets, each widget has a `widget-type-{name}` class, so for example if you wanted to make the links inside just the RSS widget bigger you could use the following selector:
+>
+> ```css
+> .widget-type-rss a {
+>     font-size: 1.5rem;
+> }
+
 
 ## Pages & Columns
 ![illustration of pages and columns](images/pages-and-columns-illustration.png)

internal/assets/templates/page.html

@@ -11,7 +11,12 @@
 {{ end }}
 
 {{ define "document-root-attrs" }}{{ if .App.Config.Theme.Light }}class="light-scheme"{{ end }}{{ end }}
-{{ define "document-head-after" }}{{ template "page-style-overrides.gotmpl" . }}{{ end }}
+{{ define "document-head-after" }}
+{{ template "page-style-overrides.gotmpl" . }}
+{{ if ne "" .App.Config.Theme.CustomCSSFile }}
+<link rel="stylesheet" href="{{ .App.Config.Theme.CustomCSSFile }}?v={{ .App.Config.Server.StartedAt.Unix }}">
+{{ end }}
+{{ end }}
 
 {{ define "navigation-links" }}
 {{ range .App.Config.Pages }}

internal/glance/glance.go

@@ -34,6 +34,7 @@ type Theme struct {
 	Light                    bool                  `yaml:"light"`
 	ContrastMultiplier       float32               `yaml:"contrast-multiplier"`
 	TextSaturationMultiplier float32               `yaml:"text-saturation-multiplier"`
+	CustomCSSFile            string                `yaml:"custom-css-file"`
 }
 
 type Server struct {