1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
# lectio-web themes
`lectio-web` renders one fixed page structure (`internal/web/static/base.css`
owns every layout, spacing and typography rule) and lets a **theme**
restyle it with colour only. A theme is a single CSS file that sets values
for a small set of role variables and role classes; nothing else.
## Colour only, no gimmicks
A theme file may set **colours** (and colours alone) on the roles listed
below. It must never:
- set a background image, gradient, shadow, animation or transition,
- change font sizes, spacing, borders' width/style, or layout,
- add rounded corners or any other chrome base.css doesn't already have.
If a rule in your theme isn't a `color`, `background`/`background-color`,
or `border-color` declaration, it doesn't belong in a theme file — with the
single exception below.
### The one non-colour override: `--theme-font`
A theme may set the custom property `--theme-font` to change the **reading
typeface** (and only the typeface — base.css still owns every size and
spacing). base.css reads it as `--font-reading: var(--theme-font, <serif>)`,
so leaving it unset keeps the default serif. The built-in `memento_mori`
sets it to a monospace stack; every other built-in leaves it alone. Set this
one variable if you want a different reading face — never a bare
`font-family` on an element.
**Monospace for any theme.** Independently of the theme, `lectio-web` can force
the reading face to monospace: set `web_mono = true` in your config, or flip the
**mono** checkbox in the top bar. It overrides whatever `--theme-font` the current
theme uses (the UI chrome stays as is), and persists as you change date, theme or
version. `memento_mori` simply ships with it on.
## The role variables and classes
Every built-in theme, and every user theme, **must** define all of these —
a role left undefined renders unstyled (browser default, usually black on
white regardless of the rest of the theme).
| Role | Selector / variable | Meaning |
|---|---|---|
| Page background | `--bg` (used by `body { background: var(--bg) }`) | overall page background |
| Page text | `--fg` (used by `body { color: var(--fg) }`) | default body text colour |
| Section heading | `.heading` | a reading's heading, e.g. "Ewangelia (J 20, 1. 11-18)" — the accent colour |
| Citation / subtitle | `.citation` | a section's subtitle line — muted |
| Verse number | `.vnum` | the "chapter:verse" prefix on a bible-version verse line — muted/secondary |
| Refrain | `.refrain` | a responsorial psalm's repeated response line — secondary |
| Links | `a` (and `a:hover`, `a:focus`) | any hyperlink rendered in the page |
| Borders | `.controls`, `.version-label`, `.reading-section + .reading-section`, and `.controls input/select/button` | the hairline rules base.css draws between controls, version columns and sections — `border-color` only; base.css owns the width/style |
The built-in themes also declare internal custom properties
(`--muted`, `--accent`, `--link`, `--refrain`, `--border`, …) purely to
keep the file organised — only the roles in the table above are load-bearing;
your own theme is free to skip the indirection and write literal colours
straight onto the selectors.
## Writing your own theme
1. Copy a built-in theme file (e.g.
`internal/web/static/themes/ordinary.css`) as a starting point.
2. Save it as `${XDG_CONFIG_HOME:-~/.config}/lectio/themes/<yourname>.css`.
3. Fill in every role above with your own colours.
4. Restart `lectio-web` (or reload) — `<yourname>` now appears in the theme
list, and a user theme file always overrides a built-in of the same
name.
Minimal template:
```css
:root {
--bg: #ffffff;
--fg: #111111;
--muted: #666666;
--accent: #0055aa;
--link: #0055aa;
--refrain: #886600;
--border: #dddddd;
}
.heading { color: var(--accent); }
.citation { color: var(--muted); }
.vnum { color: var(--muted); }
.refrain { color: var(--refrain); }
a { color: var(--link); }
a:hover, a:focus { color: var(--accent); }
.controls,
.version-label,
.reading-section + .reading-section,
.controls input,
.controls select,
.controls button {
border-color: var(--border);
}
```
## Built-in themes
Religious orders:
- **transfiguration** (dark) — bg `#262e28`, fg `#e6dec6`, accent `#d3b380`
(gold), muted `#99a18c`, link/refrain `#97ad6e` (olive), border `#4a5347`.
Verse numbers use the gold accent rather than muted, matching the source
transfiguration theme.
- **desert_fathers** (light) — sand `#ede4d3` / umber `#4a3f2f`, accent
ochre `#b8894a`.
- **benedictines** (dark) — black habit `#17130f` / parchment `#e8dcc0`,
accent gold `#c9a227`.
- **franciscans** (dark, warm) — undyed brown `#31271f` / `#e0d5c3`, accent
tau/terracotta `#a8703a`, link/refrain olive.
- **memento_mori** (dark, greyscale) — ash `#1a1a1a` / bone `#d8d4cc`;
`#7a4a42` (dried blood) is reserved for the `.error` role only.
- **dominicans** (black & white) — white habit `#f6f5f3` / black cappa
`#1c1c1c`; greyscale only, no accent colour.
Liturgical seasons and feasts:
- **advent** (dark violet) — `#241b33` / `#e6e0ef`, accent violet
`#8a6db0`, refrain rose `#b0708a`.
- **nativity** (light, white/gold) — `#faf6ec` / `#3a3226`, accent gold
`#c9a227`, refrain evergreen `#4a7a5a`.
- **lent** (dark, ashen violet) — `#2a2530` / `#cfc8d2`, accent muted
violet `#7a6a86`, refrain dried rose `#8a6a72`.
- **easter** (light, radiant white/gold) — `#fdfbf4` / `#33302a`, accent
bright gold `#d4af37`.
- **pentecost** (red/white/gold) — scarlet `#4d1418` / cream `#f5ecdb`,
accent gold `#e2b74a`, refrain soft gold `#e0c074`.
- **ordinary** (light green) — `#eef2e6` / `#33382e`, accent green
`#5a7a3f`.
- **epiphany** (dark, indigo/gold) — indigo night `#131a2e` / starlight
`#e6e8f2`, accent star gold `#d9bf6a`, refrain gold `#c9a94e`.
- **marian** (light, blue/white/gold) — white-blue `#f3f6fb` / navy
`#23303f`, accent Marian blue `#2f5fa6`, refrain gold `#b08d3a`.
The exact hex values live in `internal/web/static/themes/*.css` — this list
is a quick reference, the CSS files are the source of truth.
|
