Make --color-opacity variable "private", tweak switch style
This commit is contained in:
daudix
@ -586,16 +586,6 @@ Blah blah <q>Inline Quote</q> hmm.
|
||||
<input id="color-picker-dark" type="color" value="#ffa348" />
|
||||
<label for="color-picker-dark">Dark theme</label>
|
||||
<br />
|
||||
<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" />
|
||||
@ -645,23 +635,9 @@ Blah blah <q>Inline Quote</q> hmm.
|
||||
#color-picker-light,
|
||||
#color-picker-dark,
|
||||
#contrast-color-light,
|
||||
#contrast-color-dark,
|
||||
#opacity-light-value,
|
||||
#opacity-dark-value,
|
||||
#opacity-light,
|
||||
#opacity-dark {
|
||||
#contrast-color-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">
|
||||
@ -669,25 +645,14 @@ 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");
|
||||
|
||||
let primaryColorLight = colorPickerLight.value;
|
||||
let primaryColorDark = colorPickerDark.value;
|
||||
let opacityLight = opacityInputLight.value;
|
||||
let opacityDark = opacityInputDark.value;
|
||||
|
||||
opacityValueLight.textContent = opacityLight;
|
||||
opacityValueDark.textContent = opacityDark;
|
||||
|
||||
colorPickerLight.addEventListener("input", updatePrimaryColorLight);
|
||||
colorPickerDark.addEventListener("input", updatePrimaryColorDark);
|
||||
contrastCheckboxLight.addEventListener("change", updateStyles);
|
||||
contrastCheckboxDark.addEventListener("change", updateStyles);
|
||||
opacityInputLight.addEventListener("input", updateOpacityLight);
|
||||
opacityInputDark.addEventListener("input", updateOpacityDark);
|
||||
|
||||
function updatePrimaryColorLight() {
|
||||
primaryColorLight = colorPickerLight.value;
|
||||
@ -699,18 +664,6 @@ Blah blah <q>Inline Quote</q> hmm.
|
||||
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;
|
||||
@ -726,16 +679,13 @@ Blah blah <q>Inline Quote</q> hmm.
|
||||
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};
|
||||
--color-opacity: ${opacityDark};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -24,7 +24,7 @@ Duckquill is pretty easy to restyle with just a few lines of SCSS in the [approp
|
||||
|
||||
### Navbar
|
||||
|
||||
You can make navbar have more classic look:
|
||||
You can make navbar have more traditional look:
|
||||
|
||||
|
||||
|
||||
@ -94,7 +94,7 @@ Or you can make it sticked to top but not full-width:
|
||||
|
||||
### Headings
|
||||
|
||||
Default headings might not fit your taste, that's understandable. Good thing that we can ~~make them boring~~ fix them:
|
||||
Default headings might not fit your taste, that's understandable. Good thing is that we can ~~make them boring~~ fix them:
|
||||
|
||||
|
||||
|
||||
@ -111,33 +111,33 @@ h6 {
|
||||
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: 3rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
```
|
||||
|
||||
### Strikethrough
|
||||
|
||||
The default strikethrough style is too much for you? Let's sort this out:
|
||||
The default strikethrough style is too much? Let's sort this out:
|
||||
|
||||
|
||||
|
||||
@ -153,11 +153,15 @@ del {
|
||||
|
||||
### Edge Highlights
|
||||
|
||||
Hate the skeuomorphic edge highlight on all semi-transparent elements? It's easy to get rid of them:
|
||||
Hate the skeuomorphic edge highlight on all semi-transparent elements? Let's get rid of them:
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--edge-highlight: 0 0 0 transparent;
|
||||
@import "../themes/duckquill/sass/_variables.scss";
|
||||
|
||||
@include theme-variables using ($theme) {
|
||||
@else {
|
||||
--edge-highlight: 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -180,24 +184,26 @@ hr {
|
||||
|
||||
### Background Image
|
||||
|
||||
Want to set some nice image as a background? I got you covered:
|
||||
Want to set some nice image as a background? We got you covered:
|
||||
|
||||
|
||||
|
||||
```scss
|
||||
@import "../themes/duckquill/sass/_variables.scss";
|
||||
|
||||
@include theme-variables using ($theme) {
|
||||
@if $theme =="dark" {
|
||||
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
}
|
||||
|
||||
@else {
|
||||
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-color), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
|
||||
}
|
||||
```
|
||||
|
||||
Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` to your needs:
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
}
|
||||
}
|
||||
```
|
||||
Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` based on your needs.
|
||||
|
||||
Reference in New Issue
Block a user