diff --git a/docs/configuration.md b/docs/configuration.md index 9c3bc13..0c14525 100644 --- a/docs/configuration.md +++ b/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) diff --git a/internal/assets/templates/page.html b/internal/assets/templates/page.html index b5481a1..e2a6dd9 100644 --- a/internal/assets/templates/page.html +++ b/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 }} + +{{ end }} +{{ end }} {{ define "navigation-links" }} {{ range .App.Config.Pages }} diff --git a/internal/glance/glance.go b/internal/glance/glance.go index 0c4001d..e00809e 100644 --- a/internal/glance/glance.go +++ b/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 {