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

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 -->