diff --git a/docs/configuration.md b/docs/configuration.md index e97d8df96..1dc114816 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -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 - `tertiary`: hover states and visited [[graph view|graph]] nodes - `highlight`: internal link background, highlighted text, [[syntax highlighting|highlighted lines of code]] + - `textHighlight`: markdown highlighted text background ## Plugins diff --git a/quartz.config.ts b/quartz.config.ts index fa08723e9..b6abbb2d3 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -36,6 +36,7 @@ const config: QuartzConfig = { secondary: "#284b63", tertiary: "#84a59d", highlight: "rgba(143, 159, 169, 0.15)", + textHighlight: "#fff23688", }, darkMode: { light: "#161618", @@ -46,6 +47,7 @@ const config: QuartzConfig = { secondary: "#7b97aa", tertiary: "#84a59d", highlight: "rgba(143, 159, 169, 0.15)", + textHighlight: "#b3aa0288", }, }, }, diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 37aa8ce0b..52cd1020c 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -20,11 +20,10 @@ section { } .text-highlight { - background-color: #fff23688; + background-color: var(--textHighlight); padding: 0 0.1rem; border-radius: 5px; } - ::selection { background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0)); color: var(--darkgray); diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts index d3bfb9a0d..9046cec66 100644 --- a/quartz/util/theme.ts +++ b/quartz/util/theme.ts @@ -7,6 +7,7 @@ export interface ColorScheme { secondary: string tertiary: string highlight: string + textHighlight: string } interface Colors { @@ -49,6 +50,7 @@ ${stylesheet.join("\n\n")} --secondary: ${theme.colors.lightMode.secondary}; --tertiary: ${theme.colors.lightMode.tertiary}; --highlight: ${theme.colors.lightMode.highlight}; + --textHighlight: ${theme.colors.lightMode.textHighlight}; --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF}; --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF}; @@ -64,6 +66,7 @@ ${stylesheet.join("\n\n")} --secondary: ${theme.colors.darkMode.secondary}; --tertiary: ${theme.colors.darkMode.tertiary}; --highlight: ${theme.colors.darkMode.highlight}; + --textHighlight: ${theme.colors.darkMode.textHighlight}; } ` }