Commit 5c1f6091 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Rework colour theming, allowing for better customisation/maintenance

Towards starters-theme#164
parent 6fd74eed
/* Light mode
- - - - - - - - - - - - - - - - - - - - - */
/* When the theme’s dark mode is set to 'auto' or 'never',
set the lightmode version of the use variables. */
[data-darkmode="auto"], [data-darkmode="auto"] > *,
[data-darkmode="never"], [data-darkmode="never"] > * {
--background: var(--background-lightmode);
--highlighted-background: var(--highlighted-background-lightmode);
--input-background: var(--input-background-lightmode);
--header-background: var(--header-background-lightmode);
--footer-background: var(--footer-background-lightmode);
--text: var(--text-lightmode);
--placeholder-text: var(--placeholder-text-lightmode);
--link-text: var(--link-text-lightmode);
--link-action: var(--link-action-lightmode);
--heading-text: var(--heading-text-lightmode);
--title-text: var(--title-text-lightmode);
--button-background: var(--button-background-lightmode);
--button-action: var(--button-action-lightmode);
--button-text: var(--button-text-lightmode);
--input-border: var(--input-border-lightmode);
--accent-line: var(--accent-line-lightmode);
--focus: var(--focus-lightmode);
--background-selection: var(--background-selection-lightmode);
--shadow: var(--shadow-lightmode);
--error-text: var(--error-text-lightmode);
--background-code-block: var(--background-code-block-lightmode);
--code-block-highlight: var(--code-block-highlight-lightmode);
--code-scrollbar: var(--code-scrollbar-lightmode);
--code-linenumber: var(--code-linenumber-lightmode);
--code-text: var(--code-text-lightmode);
--code-comment: var(--code-comment-lightmode);
--code-red: var(--code-red-lightmode);
--code-orange: var(--code-orange-lightmode);
--code-blue: var(--code-blue-lightmode);
--code-aqua: var(--code-aqua-lightmode);
--code-green: var(--code-green-lightmode);
--code-yellow: var(--code-yellow-lightmode);
}
/* Dark mode
- - - - - - - - - - - - - - - - - - - - - */
/* When the theme’s dark mode is set to 'always',
set the darkmode version of the use variables. */
[data-darkmode="always"], [data-darkmode="always"] > * {
--background: var(--background-darkmode);
--highlighted-background: var(--highlighted-background-darkmode);
--complementary-background: var(--complementary-background-darkmode);
--input-background: var(--input-background-darkmode);
--header-background: var(--header-background-darkmode);
--footer-background: var(--footer-background-darkmode);
--text: var(--text-darkmode);
--placeholder-text: var(--placeholder-text-darkmode);
--link-text: var(--link-text-darkmode);
--link-action: var(--link-action-darkmode);
--heading-text: var(--heading-text-darkmode);
--title-text: var(--title-text-darkmode);
--button-background: var(--button-background-darkmode);
--button-action: var(--button-action-darkmode);
--button-text: var(--button-text-darkmode);
--input-border: var(--input-border-darkmode);
--accent-line: var(--accent-line-darkmode);
--focus: var(--focus-darkmode);
--background-selection: var(--background-selection-darkmode);
--shadow: var(--shadow-darkmode);
--error-text: var(--error-text-darkmode);
--background-code-block: var(--background-code-block-darkmode);
--code-block-highlight: var(--code-block-highlight-darkmode);
--code-scrollbar: var(--code-scrollbar-darkmode);
--code-linenumber: var(--code-linenumber-darkmode);
--code-text: var(--code-text-darkmode);
--code-comment: var(--code-comment-darkmode);
--code-red: var(--code-red-darkmode);
--code-orange: var(--code-orange-darkmode);
--code-blue: var(--code-blue-darkmode);
--code-aqua: var(--code-aqua-darkmode);
--code-green: var(--code-green-darkmode);
--code-yellow: var(--code-yellow-darkmode);
}
/* When the visitor’s operating system requests dark mode,
and the theme’s dark mode is set to 'auto',
set the darkmode version of the use variables. */
@media (prefers-color-scheme: dark) {
[data-darkmode="auto"], [data-darkmode="auto"] > * {
--background: var(--background-darkmode);
--highlighted-background: var(--highlighted-background-darkmode);
--complementary-background: var(--complementary-background-darkmode);
--input-background: var(--input-background-darkmode);
--header-background: var(--header-background-darkmode);
--footer-background: var(--footer-background-darkmode);
--text: var(--text-darkmode);
--placeholder-text: var(--placeholder-text-darkmode);
--link-text: var(--link-text-darkmode);
--link-action: var(--link-action-darkmode);
--heading-text: var(--heading-text-darkmode);
--title-text: var(--title-text-darkmode);
--button-background: var(--button-background-darkmode);
--button-action: var(--button-action-darkmode);
--button-text: var(--button-text-darkmode);
--input-border: var(--input-border-darkmode);
--accent-line: var(--accent-line-darkmode);
--focus: var(--focus-darkmode);
--background-selection: var(--background-selection-darkmode);
--shadow: var(--shadow-darkmode);
--error-text: var(--error-text-darkmode);
--background-code-block: var(--background-code-block-darkmode);
--code-block-highlight: var(--code-block-highlight-darkmode);
--code-scrollbar: var(--code-scrollbar-darkmode);
--code-linenumber: var(--code-linenumber-darkmode);
--code-text: var(--code-text-darkmode);
--code-comment: var(--code-comment-darkmode);
--code-red: var(--code-red-darkmode);
--code-orange: var(--code-orange-darkmode);
--code-blue: var(--code-blue-darkmode);
--code-aqua: var(--code-aqua-darkmode);
--code-green: var(--code-green-darkmode);
--code-yellow: var(--code-yellow-darkmode);
}
}
\ No newline at end of file
This diff is collapsed.
{{- /* get the CSS for the webfont fontface */}}
{{- $fontsFiles := resources.Get "css/fonts-fontface.css" }}
{{- /* get the variables to fit the colour mode options */}}
{{- /* get the variables to fit the colour theme options */}}
{{- $colours := resources.Get "css/colours.css" }}
{{- /* get the variables to fit the colour mode options */}}
{{- $coloursMode := resources.Get "css/colour-modes.css" }}
{{- /* get the CSS for the base styles */}}
{{- $base := resources.Get "css/base.css" }}
......@@ -56,5 +59,5 @@
{{- $custom := resources.Get "css/custom.css" }}
{{- /* concatenate and minify the above styles into one stylesheet in the following order: */}}
{{- $CSS := slice $colours $base $fontsBase $fontsFamily $layout $header $navigation $code $pagination $footer $print $syntax $custom | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint }}
{{- $CSS := slice $colours $coloursMode $base $fontsBase $fontsFamily $layout $header $navigation $code $pagination $footer $print $syntax $custom | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint }}
<link href='{{ $CSS.RelPermalink }}' rel='stylesheet' type='text/css' />
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment