extern/glance
1
0
Fork 0
mirror of https://github.com/glanceapp/glance.git synced 2025-06-27 13:21:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Allow setting path to custom CSS

Browse Source
This commit is contained in:
Svilen Markov 2024-04-29 16:47:18 +01:00
parent ccdafcdfab
commit 748ad1ff8d
3 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/configuration.md
View File

@ -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 | | negative-color | HSL | no | 0 70 70 |
| contrast-multiplier | number | no | 1 | | contrast-multiplier | number | no | 1 |
| text-saturation-multiplier | number | no | 1 | | text-saturation-multiplier | number | no | 1 |
| custom-css-file | string | no | |
#### `light` #### `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. 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` #### `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. 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 ## Pages & Columns
![illustration of pages and columns](images/pages-and-columns-illustration.png) ![illustration of pages and columns](images/pages-and-columns-illustration.png)

7
internal/assets/templates/page.html
View File

@ -11,7 +11,12 @@
{{ end }} {{ end }}
{{ define "document-root-attrs" }}{{ if .App.Config.Theme.Light }}class="light-scheme"{{ end }}{{ 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" }} {{ define "navigation-links" }}
{{ range .App.Config.Pages }} {{ range .App.Config.Pages }}

1
internal/glance/glance.go
View File

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