hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update CSS and configuration for theme opacity and color management

Browse Source
This commit is contained in:
daudix
2024-09-01 20:06:34 +03:00
parent db499a9363
commit 607567248c
6 changed files with 178 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
CHANGELOG.md
View File

@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- Add `--disabled` CSS variable for setting opacity of disabled elements.
- Add `--hover` CSS variable for setting zoom on hover.
- Add `config.extra.color_opacity` and `config.extra.color_opacity_dark` config variables to set global color opacity used by `-bg` colors and `--primary-color-alpha`.
- Add `external` class to comment timestamp.
- Add active state to footer's "Powered by" links.
- Add active state to footnotes' go back button.
@ -20,13 +23,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- **[BREAKING]** Change the `--active` CSS variable to include `scale()` as well.
- Add margin between comment author name and timestamp.
- Make comment timestamp more subtle.
- Reduce the target heading transition time.
- Reduce top margin of the target heading.
- Set socials icons as CSS variables and not inline styles.
- Show theme switcher if `config.extra.default_theme` is set, even if `config.extra.nav.show_theme_switcher` is not.
- Tweak padding of verified instance badge.
- Use more fitting cursors in some contexts.
- Use relative colors for `-bg` color variants.
### Removed
- **[BREAKING]** Remove the `config.extra.primary_color_alpha` and `config.extra.primary_color_alpha_dark` config variables; they're now automatically generated from the primary color.
### Fixed
- `config.extra.fix_contrast_dark` should now work even if `config.extra.primary_color_dark` is not set.
## [4.8.0](https://codeberg.org/daudix/duckquill/compare/v4.7.1...v4.8.0)

14
config.toml
View File

@ -53,23 +53,29 @@ taxonomies = [{ name = "tags", feed = true }]
[extra]
# Which theme should be used by default (light/dark).
# Strongly recommended to use this only with the manual theme switcher enabled,
# it's important for a11y.
#
# default_theme = "dark"
#
# Sets theme and browser theme color.
# See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
primary_color = "#ff7800"
# Ditto but for the dark mode.
# Ditto but for the dark theme.
# If not set regular variant will be used.
primary_color_dark = "#ffa348"
# Sets the opacity used for most colors.
#
# color_opacity = "0.1"
#
# Ditto but for the dark theme.
#
# color_opacity_dark = "0.1"
#
# Whether to fix low contrast in text selection, checkboxes, etc.
# Use only if the default doesn't provide enough contrast, e.g. the primary color is set to yellow.
#
# fix_contrast = true
#
# Ditto but for the dark mode.
# Ditto but for the dark theme.
fix_contrast_dark = true
# Use emoji as a favicon.
# Only one emoji is being rendered, everything else is truncated.

190
content/demo/index.md
View File

@ -581,21 +581,30 @@ Blah blah <q>Inline Quote</q> hmm.
<small>Primary color:</small>
<br />
<input id="color-picker-light" type="color" value="#ff7800" />
<label for="color-picker-light">&nbsp;Light theme</label>
<label for="color-picker-light">Light theme</label>
<br />
<input id="color-picker-dark" type="color" value="#ffa348" />
<label for="color-picker-dark">&nbsp;Dark theme</label>
<label for="color-picker-dark">Dark theme</label>
<br />
<small>Fix contrast for:</small>
<small>Color opacity:</small>
<br />
<small id="opacity-light-value">0.1</small>
<input type="range" id="opacity-light" min="0.1" max="0.9" step="0.1" value="0.1">
<label for="opacity-light">Light theme</label>
<br />
<small id="opacity-dark-value">0.1</small>
<input type="range" id="opacity-dark" min="0.1" max="0.9" step="0.1" value="0.1">
<label for="opacity-dark">Dark theme</label>
<br />
<small>Fix contrast:</small>
<br />
<input id="contrast-color-light" type="checkbox" />
<label for="contrast-color-light">&nbsp;Light theme</label>
<label for="contrast-color-light">Light theme</label>
<br />
<input id="contrast-color-dark" type="checkbox" checked />
<label for="contrast-color-dark">&nbsp;Dark theme</label>
<label for="contrast-color-dark">Dark theme</label>
</div>
<style>
#color-picker-container {
-webkit-backdrop-filter: var(--blur);
@ -608,6 +617,7 @@ Blah blah <q>Inline Quote</q> hmm.
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-start-end-radius: var(--rounded-corner);
border-end-end-radius: var(--rounded-corner);
background-color: var(--nav-bg);
padding: 0.5rem;
}
@ -631,6 +641,27 @@ Blah blah <q>Inline Quote</q> hmm.
:root[dir*="rtl"] #color-picker-container:hover {
transform: none;
}
#color-picker-light,
#color-picker-dark,
#contrast-color-light,
#contrast-color-dark,
#opacity-light-value,
#opacity-dark-value,
#opacity-light,
#opacity-dark {
margin-inline-end: 0.25rem;
}
#opacity-light,
#opacity-dark {
width: 8rem;
}
#opacity-light-value,
#opacity-dark-value {
font-variant-numeric: tabular-nums;
}
</style>
<script type="text/javascript">
@ -638,34 +669,52 @@ Blah blah <q>Inline Quote</q> hmm.
const colorPickerDark = document.querySelector("#color-picker-dark");
const contrastCheckboxLight = document.querySelector("#contrast-color-light");
const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
const opacityInputLight = document.querySelector("#opacity-light");
const opacityInputDark = document.querySelector("#opacity-dark");
const opacityValueLight = document.querySelector("#opacity-light-value");
const opacityValueDark = document.querySelector("#opacity-dark-value");
colorPickerLight.value = "#ff7800";
colorPickerDark.value = "#ffa348";
let primaryColorLight = colorPickerLight.value;
let primaryColorDark = colorPickerDark.value;
let opacityLight = opacityInputLight.value;
let opacityDark = opacityInputDark.value;
colorPickerLight.addEventListener("input", function () {
updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
});
opacityValueLight.textContent = opacityLight;
opacityValueDark.textContent = opacityDark;
colorPickerDark.addEventListener("input", function () {
updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
});
colorPickerLight.addEventListener("input", updatePrimaryColorLight);
colorPickerDark.addEventListener("input", updatePrimaryColorDark);
contrastCheckboxLight.addEventListener("change", updateStyles);
contrastCheckboxDark.addEventListener("change", updateStyles);
opacityInputLight.addEventListener("input", updateOpacityLight);
opacityInputDark.addEventListener("input", updateOpacityDark);
contrastCheckboxLight.addEventListener("change", function () {
updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
});
contrastCheckboxDark.addEventListener("change", function () {
updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
});
function hexToRGBA(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
function updatePrimaryColorLight() {
primaryColorLight = colorPickerLight.value;
updateStyles();
}
function updateStyles(primaryColorLight, primaryColorDark, contrastColorLight, contrastColorDark) {
function updatePrimaryColorDark() {
primaryColorDark = colorPickerDark.value;
updateStyles();
}
function updateOpacityLight() {
opacityLight = opacityInputLight.value;
opacityValueLight.textContent = opacityLight;
updateStyles();
}
function updateOpacityDark() {
opacityDark = opacityInputDark.value;
opacityValueDark.textContent = opacityDark;
updateStyles();
}
function updateStyles() {
const contrastColorLight = contrastCheckboxLight.checked;
const contrastColorDark = contrastCheckboxDark.checked;
let styleElement = document.getElementById("dynamic-styles");
if (!styleElement) {
@ -674,73 +723,64 @@ Blah blah <q>Inline Quote</q> hmm.
document.head.appendChild(styleElement);
}
const primaryColorLightAlpha = hexToRGBA(primaryColorLight, 0.2);
const primaryColorDarkAlpha = hexToRGBA(primaryColorDark, 0.2);
let styles = "";
styles += `
:root {
--primary-color: ${primaryColorLight};
--primary-color-alpha: ${primaryColorLightAlpha};
}
`;
styles += `
[data-theme="dark"] {
let styles = `
:root {
--primary-color: ${primaryColorLight};
--color-opacity: ${opacityLight};
}
[data-theme="dark"] {
--primary-color: ${primaryColorDark};
--color-opacity: ${opacityDark};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: ${primaryColorDark};
--primary-color-alpha: ${primaryColorDarkAlpha};
--color-opacity: ${opacityDark};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: ${primaryColorDark};
--primary-color-alpha: ${primaryColorDarkAlpha};
}
}
`;
}
`;
if (contrastColorLight) {
styles += `
:root {
--contrast-color: rgb(0 0 0 / 0.8);
}
`;
:root {
--contrast-color: rgb(0 0 0 / 0.8);
}
`;
} else {
styles += `
:root {
--contrast-color: #fff;
}
`;
:root {
--contrast-color: #fff;
}
`;
}
if (contrastColorDark) {
styles += `
[data-theme="dark"] {
[data-theme="dark"] {
--contrast-color: rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: rgb(0 0 0 / 0.8);
}
}
`;
}
`;
} else {
styles += `
[data-theme="dark"] {
[data-theme="dark"] {
--contrast-color: #fff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: #fff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: #fff;
}
}
`;
}
`;
}
styleElement.textContent = styles;
}
updateStyles();
</script>
<!-- End -->

32
sass/_variables.scss
View File

@ -26,53 +26,47 @@
--fg-muted-5: rgb(255 255 255 / 0.6);
--fg-contrast: rgb(0 0 0 / 0.8);
--nav-bg: rgb(25 25 25 / 0.7);
--blue-bg: rgb(153 193 241 / 0.1);
--blue-fg: rgb(153 193 241);
--brown-bg: rgb(205 171 143 / 0.1);
--brown-fg: rgb(205 171 143);
--green-bg: rgb(143 240 164 / 0.1);
--green-fg: rgb(143 240 164);
--purple-bg: rgb(220 138 221 / 0.1);
--purple-fg: rgb(220 138 221);
--red-bg: rgb(226 97 81 / 0.1);
--red-fg: rgb(246 97 81);
--yellow-bg: rgb(248 228 92 / 0.1);
--yellow-fg: rgb(248 228 92);
color-scheme: dark;
}
@else {
// COLORS
--primary-color-alpha: rgb(from var(--primary-color) r g b / 0.1);
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
--brown-fg: rgb(99 69 44);
--fg-color: rgb(0 0 0 / 0.8);
--fg-contrast: rgb(255 255 255);
--fg-muted-1: rgb(0 0 0 / 0.05);
--fg-muted-2: rgb(0 0 0 / 0.1);
--fg-muted-3: rgb(0 0 0 / 0.2);
--fg-muted-4: rgb(0 0 0 / 0.5);
--fg-muted-5: rgb(0 0 0 / 0.6);
--fg-contrast: rgb(255 255 255);
--nav-bg: rgb(242 242 242 / 0.7);
--blue-bg: rgb(53 132 228 / 0.1);
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(99 69 44 / 0.1);
--brown-fg: rgb(99 69 44);
--green-bg: rgb(38 162 105 / 0.1);
--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
--green-fg: rgb(38 162 105);
--purple-bg: rgb(145 65 172 / 0.1);
--nav-bg: rgb(242 242 242 / 0.7);
--primary-color-alpha: rgb(from var(--primary-color) r g b / var(--color-opacity));
--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
--purple-fg: rgb(145 65 172);
--red-bg: rgb(224 27 36 / 0.1);
--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));
--red-fg: rgb(224 27 36);
--yellow-bg: rgb(156 110 3 / 0.1);
--yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity));
--yellow-fg: rgb(156 110 3);
// VARIABLES
--disabled: 0.6;
--hover: scale(1.1);
--active: scale(0.9);
--blur: saturate(180%) blur(0.75rem);
--container-width: 720px;
--disabled: 0.6;
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--hover: scale(1.1);
--rounded-corner-small: 0.5rem;
--rounded-corner: 0.75rem;
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);

27
templates/partials/head.html
View File

@ -42,18 +42,41 @@
:root {
--primary-color: {{ config.extra.primary_color | default(value="#6f8396") | safe }};
--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
--color-opacity: {{ config.extra.color_opacity | default(value="0.1") }};
}
{%- if config.extra.primary_color_dark %}
[data-theme="dark"] {
--primary-color: {{ config.extra.primary_color_dark | safe }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: {{ config.extra.primary_color_dark | safe }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgb(0 0 0 / 0.8){% else %}#fff{% endif %};
}
}
{%- endif %}
{%- if config.extra.fix_contrast_dark %}
[data-theme="dark"] {
--contrast-color: rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: rgb(0 0 0 / 0.8);
}
}
{%- endif %}
{%- if config.extra.color_opacity_dark %}
[data-theme="dark"] {
--color-opacity: {{ config.extra.color_opacity_dark | default(value="0.1") }};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-opacity: {{ config.extra.color_opacity_dark | default(value="0.1") }};
}
}
{%- endif %}

2
templates/partials/nav.html
View File

@ -78,7 +78,7 @@
{%- if config.languages | length > 0 %}
{%- include "partials/language_switcher.html" %}
{%- endif -%}
{%- if config.extra.nav.show_theme_switcher %}
{%- if config.extra.default_theme or config.extra.nav.show_theme_switcher %}
<li id="theme-switcher">
<details>
<summary class="circle" title="{{ macros_translate::translate(key='theme', default='Theme', language_strings=language_strings) }}">