The Trans Directory
feat(style): Add textHighlight theme setting (#1242)
* Add textHighlight theme setting
* update docs to include textHighlight
* Remove errant `S`
+7
-2
+1
docs/configuration.md
+1
docs/configuration.md
···
53
53
- `secondary`: link colour, current [[graph view|graph]] node
54
54
- `tertiary`: hover states and visited [[graph view|graph]] nodes
55
55
- `highlight`: internal link background, highlighted text, [[syntax highlighting|highlighted lines of code]]
56
+
- `textHighlight`: markdown highlighted text background
56
57
57
58
## Plugins
58
59
+2
quartz.config.ts
+2
quartz.config.ts
···
36
36
secondary: "#284b63",
37
37
tertiary: "#84a59d",
38
38
highlight: "rgba(143, 159, 169, 0.15)",
39
+
textHighlight: "#fff23688",
39
40
},
40
41
darkMode: {
41
42
light: "#161618",
···
46
47
secondary: "#7b97aa",
47
48
tertiary: "#84a59d",
48
49
highlight: "rgba(143, 159, 169, 0.15)",
50
+
textHighlight: "#b3aa0288",
49
51
},
50
52
},
51
53
},
+1
-2
quartz/styles/base.scss
+1
-2
quartz/styles/base.scss
···
20
20
}
21
21
22
22
.text-highlight {
23
-
background-color: #fff23688;
23
+
background-color: var(--textHighlight);
24
24
padding: 0 0.1rem;
25
25
border-radius: 5px;
26
26
}
27
-
28
27
::selection {
29
28
background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
30
29
color: var(--darkgray);
+3
quartz/util/theme.ts
+3
quartz/util/theme.ts
···
7
7
secondary: string
8
8
tertiary: string
9
9
highlight: string
10
+
textHighlight: string
10
11
}
11
12
12
13
interface Colors {
···
49
50
--secondary: ${theme.colors.lightMode.secondary};
50
51
--tertiary: ${theme.colors.lightMode.tertiary};
51
52
--highlight: ${theme.colors.lightMode.highlight};
53
+
--textHighlight: ${theme.colors.lightMode.textHighlight};
52
54
53
55
--headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
54
56
--bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
···
64
66
--secondary: ${theme.colors.darkMode.secondary};
65
67
--tertiary: ${theme.colors.darkMode.tertiary};
66
68
--highlight: ${theme.colors.darkMode.highlight};
69
+
--textHighlight: ${theme.colors.darkMode.textHighlight};
67
70
}
68
71
`
69
72
}