yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(style): Add textHighlight theme setting (#1242)

Browse Source 
* Add textHighlight theme setting

* update docs to include textHighlight

* Remove errant `S`
This commit is contained in:
Peter
2024-07-10 01:21:00 +01:00
committed by GitHub
parent ef375d265d
commit b7793bd856
4 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/configuration.md
View File

@@ -53,6 +53,7 @@ This part of the configuration concerns anything that can affect the whole site.
- `secondary`: link colour, current [[graph view|graph]] node - `secondary`: link colour, current [[graph view|graph]] node
- `tertiary`: hover states and visited [[graph view|graph]] nodes - `tertiary`: hover states and visited [[graph view|graph]] nodes
- `highlight`: internal link background, highlighted text, [[syntax highlighting|highlighted lines of code]] - `highlight`: internal link background, highlighted text, [[syntax highlighting|highlighted lines of code]]
- `textHighlight`: markdown highlighted text background
## Plugins ## Plugins

2
quartz.config.ts
View File

@@ -36,6 +36,7 @@ const config: QuartzConfig = {
secondary: "#284b63", secondary: "#284b63",
tertiary: "#84a59d", tertiary: "#84a59d",
highlight: "rgba(143, 159, 169, 0.15)", highlight: "rgba(143, 159, 169, 0.15)",
textHighlight: "#fff23688",
}, },
darkMode: { darkMode: {
light: "#161618", light: "#161618",
@@ -46,6 +47,7 @@ const config: QuartzConfig = {
secondary: "#7b97aa", secondary: "#7b97aa",
tertiary: "#84a59d", tertiary: "#84a59d",
highlight: "rgba(143, 159, 169, 0.15)", highlight: "rgba(143, 159, 169, 0.15)",
textHighlight: "#b3aa0288",
}, },
}, },
}, },

3
quartz/styles/base.scss
View File

@@ -20,11 +20,10 @@ section {
} }
.text-highlight { .text-highlight {
background-color: #fff23688; background-color: var(--textHighlight);
padding: 0 0.1rem; padding: 0 0.1rem;
border-radius: 5px; border-radius: 5px;
} }
::selection { ::selection {
background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0)); background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
color: var(--darkgray); color: var(--darkgray);

3
quartz/util/theme.ts
View File

@@ -7,6 +7,7 @@ export interface ColorScheme {
secondary: string secondary: string
tertiary: string tertiary: string
highlight: string highlight: string
textHighlight: string
} }
interface Colors { interface Colors {
@@ -49,6 +50,7 @@ ${stylesheet.join("\n\n")}
--secondary: ${theme.colors.lightMode.secondary}; --secondary: ${theme.colors.lightMode.secondary};
--tertiary: ${theme.colors.lightMode.tertiary}; --tertiary: ${theme.colors.lightMode.tertiary};
--highlight: ${theme.colors.lightMode.highlight}; --highlight: ${theme.colors.lightMode.highlight};
--textHighlight: ${theme.colors.lightMode.textHighlight};
--headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF}; --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
--bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF}; --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
@@ -64,6 +66,7 @@ ${stylesheet.join("\n\n")}
--secondary: ${theme.colors.darkMode.secondary}; --secondary: ${theme.colors.darkMode.secondary};
--tertiary: ${theme.colors.darkMode.tertiary}; --tertiary: ${theme.colors.darkMode.tertiary};
--highlight: ${theme.colors.darkMode.highlight}; --highlight: ${theme.colors.darkMode.highlight};
--textHighlight: ${theme.colors.darkMode.textHighlight};
} }
` `
} }