mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
New switch light / dark mode toggle
This commit is contained in:
Yohn
parent
f4ccc51cb1
commit
9a9032fd9b
256 changed files with 2843 additions and 325 deletions
|
|
@ -103,14 +103,26 @@
|
|||
<p>A Pico CSS + example with addition to the standard Pico CSS library.</p>
|
||||
<p>Demo page from <a href="https://picocss.com/docs/modal#utilities">picocss.com model docs</a></p>
|
||||
</hgroup>
|
||||
<details class="dropdown">
|
||||
<div class="grid" style="justify-items: center;">
|
||||
<!--
|
||||
For the light / dark mode switch toggle, you need the following:
|
||||
V. 2.2.3 (will be released soon) - you can see the changed in the scss/forms/checkbox-radio-switch.scss
|
||||
<input name="color-mode-toggle" type="checkbox" role="switch">
|
||||
That name="color-mode-toggle" is important
|
||||
And then you'll need the js located at: js/SwitchColorMode.js
|
||||
-->
|
||||
<label>
|
||||
<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox" role="switch">
|
||||
</label>
|
||||
</div>
|
||||
<!--<details class="dropdown">
|
||||
<summary role="button" class="secondary">Theme</summary>
|
||||
<ul>
|
||||
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
|
||||
<li><a href="#" data-theme-switcher="light">Light</a></li>
|
||||
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</details>-->
|
||||
|
||||
<details class="dropdown">
|
||||
<summary style="background-color:var(--pico-primary-background); color: var(--pico-primary-inverse)">Color
|
||||
|
|
@ -758,71 +770,71 @@
|
|||
</p>
|
||||
<div class="row-fluid">
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<article class="pico-background-lime-750">col-6</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-6</article>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="col-3 offset-1">
|
||||
<article class="pico-background-lime-750">col-3 offset-1</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3 offset-1</article>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<article class="pico-background-lime-750">col-2</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2</article>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<article class="pico-background-lime-750">col-2</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2</article>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="col-2">
|
||||
<article class="pico-background-lime-750">col-2</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2</article>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<article class="pico-background-lime-750">col-8</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-8</article>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<article class="pico-background-lime-750">col-2</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="col-5">
|
||||
<article class="pico-background-lime-750">col-5</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-5</article>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<article class="pico-background-lime-750">col-7</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-7</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="col-9">
|
||||
<article class="pico-background-lime-750">col-9</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-9</article>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3</article>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -838,37 +850,37 @@
|
|||
|
||||
<div class="row-fluid">
|
||||
<div class="col-2 col-md-4">
|
||||
<article class="pico-background-lime-750">col-2, col-md-4</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2, col-md-4</article>
|
||||
</div>
|
||||
<div class="col-4 offset-8 col-md-6 offset-md-6">
|
||||
<article class="pico-background-lime-750">col-4, offset-8, col-md-6, offset-md-6</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-4, offset-8, col-md-6, offset-md-6</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="col-5 offset-1 col-md-11">
|
||||
<article class="pico-background-lime-550">col-5, offset-1, col-md-11</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-5, offset-1, col-md-11</article>
|
||||
</div>
|
||||
<div class="col-2 col-md-6">
|
||||
<article class="pico-background-lime-550">col-2, col-md-6</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-2, col-md-6</article>
|
||||
</div>
|
||||
<div class="col-3 offset-9 col-md-6 offset-md-6">
|
||||
<article class="pico-background-lime-550">col-3, offset-9, col-md-6, offset-md-6</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3, offset-9, col-md-6, offset-md-6</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid align-center">
|
||||
<div class="col-3 col-md-12 col-lg-6">
|
||||
<article class="pico-background-lime-850">col-3 col-md-12 col-lg-6</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3 col-md-12 col-lg-6</article>
|
||||
</div>
|
||||
<div class="col-3 col-md-12 col-lg-6">
|
||||
<article class="pico-background-lime-850">col-3 col-md-12 col-lg-6</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3 col-md-12 col-lg-6</article>
|
||||
</div>
|
||||
<div class="col-4 col-md-6 col-lg-3">
|
||||
<article class="pico-background-lime-850">col-4 col-md-6 col-lg-3</article>
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-4 col-md-6 col-lg-3</article>
|
||||
</div>
|
||||
<div class="col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10">
|
||||
<article class="pico-background-lime-850">col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10
|
||||
<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -887,17 +899,17 @@
|
|||
|
||||
<div class="row-fluid align-center" id="row-align-example">
|
||||
<div class="col-4">
|
||||
<article class="pico-background-lime-850">col-4</article>
|
||||
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-4</article>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<article class="pico-background-lime-850">
|
||||
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">
|
||||
<input type="button" class="change-row-align" data-align="start" value=".align-start">
|
||||
<input type="button" class="change-row-align" data-align="center" value=".align-center">
|
||||
<input type="button" class="change-row-align" data-align="end" value=".align-end">
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<article class="pico-background-lime-850">col-4</article>
|
||||
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-4</article>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -910,13 +922,13 @@
|
|||
</header>
|
||||
<div class="row-fluid">
|
||||
<div class="col-12 col-md-4">
|
||||
<article class="pico-background-lime-650">col-12, col-md-4</article>
|
||||
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12, col-md-4</article>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<article class="pico-background-lime-650">col-12, col-md-4</article>
|
||||
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12, col-md-4</article>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<article class="pico-background-lime-650">col-12, col-md-4</article>
|
||||
<article style="background-color:var(--pico-primary-focus); color:var(--pico-primary-inverse);">col-12, col-md-4</article>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -1343,8 +1355,8 @@
|
|||
</dialog>
|
||||
<!-- ./ Modal example -->
|
||||
|
||||
<!-- Minimal theme switcher -->
|
||||
<script src="js/MinimalThemeSwitcher.js"></script>
|
||||
<!-- input switch to change light and dark mode -->
|
||||
<script src="js/SwitchColorMode.js"></script>
|
||||
|
||||
<!-- Modal -->
|
||||
<script src="js/Modal.js"></script>
|
||||
|
|
|
|||
76
docs/js/SwitchColorMode.js
Normal file
76
docs/js/SwitchColorMode.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/*!
|
||||
* Minimal theme switcher using a checkbox
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2024 - Licensed under MIT
|
||||
* Modified by Yohn https://github.com/Yohn/PicoCSS
|
||||
*/
|
||||
|
||||
const SwitchColorMode = {
|
||||
// Config
|
||||
_scheme: "auto",
|
||||
toggleSelector: "input[name='color-mode-toggle']",
|
||||
rootAttribute: "data-theme",
|
||||
localStorageKey: "picoPreferredColorScheme",
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.checkbox = document.querySelector(this.toggleSelector);
|
||||
if (!this.checkbox) {
|
||||
console.error("Theme switcher toggle not found");
|
||||
return;
|
||||
}
|
||||
this.scheme = this.schemeFromLocalStorage;
|
||||
this.initToggle();
|
||||
},
|
||||
|
||||
// Get color scheme from local storage
|
||||
get schemeFromLocalStorage() {
|
||||
return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
|
||||
},
|
||||
|
||||
// Preferred color scheme
|
||||
get preferredColorScheme() {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
},
|
||||
|
||||
// Initialize the toggle switch
|
||||
initToggle() {
|
||||
// Set initial checkbox state based on the current scheme
|
||||
this.checkbox.checked = this.scheme === "dark";
|
||||
|
||||
// Listen for changes to the checkbox
|
||||
this.checkbox.addEventListener("change", () => {
|
||||
this.scheme = this.checkbox.checked ? "dark" : "light";
|
||||
});
|
||||
},
|
||||
|
||||
// Set scheme
|
||||
set scheme(scheme) {
|
||||
if (scheme === "auto") {
|
||||
this._scheme = this.preferredColorScheme;
|
||||
} else if (scheme === "dark" || scheme === "light") {
|
||||
this._scheme = scheme;
|
||||
}
|
||||
this.applyScheme();
|
||||
this.schemeToLocalStorage();
|
||||
},
|
||||
|
||||
// Get scheme
|
||||
get scheme() {
|
||||
return this._scheme;
|
||||
},
|
||||
|
||||
// Apply scheme
|
||||
applyScheme() {
|
||||
document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
|
||||
},
|
||||
|
||||
// Store scheme to local storage
|
||||
schemeToLocalStorage() {
|
||||
window.localStorage?.setItem(this.localStorageKey, this.scheme);
|
||||
},
|
||||
};
|
||||
|
||||
// Init
|
||||
SwitchColorMode.init();
|
||||
|
|
@ -232,19 +232,19 @@ nav details.dropdown summary:focus-visible {
|
|||
color-scheme: light;
|
||||
--pico-background-color: #fff;
|
||||
--pico-color: #373c44;
|
||||
--pico-text-selection-color: rgba(244, 93, 44, 0.25);
|
||||
--pico-text-selection-color: rgba(210, 122, 1, 0.25);
|
||||
--pico-muted-color: #646b79;
|
||||
--pico-muted-border-color: rgb(231, 234, 239.5);
|
||||
--pico-primary: #bd3c13;
|
||||
--pico-primary-background: #d24317;
|
||||
--pico-primary: #9c5900;
|
||||
--pico-primary-background: #ff9500;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(189, 60, 19, 0.5);
|
||||
--pico-primary-hover: #942d0d;
|
||||
--pico-primary-hover-background: #bd3c13;
|
||||
--pico-primary-underline: rgba(156, 89, 0, 0.5);
|
||||
--pico-primary-hover: #7a4400;
|
||||
--pico-primary-hover-background: #e48500;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(244, 93, 44, 0.5);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(210, 122, 1, 0.5);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #5d6b89;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -308,7 +308,7 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-switch-background-color: #bfc7d9;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #dfe3eb;
|
||||
--pico-range-active-border-color: #bfc7d9;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -343,7 +343,7 @@ nav details.dropdown summary:focus-visible {
|
|||
[data-theme=light] details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
||||
:root:not([data-theme=dark]) details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
||||
:host(:not([data-theme=dark])) details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
||||
filter: brightness(100) invert(0);
|
||||
filter: brightness(100) invert(1);
|
||||
}
|
||||
[data-theme=light] details summary.secondary[role=button]::after,
|
||||
:root:not([data-theme=dark]) details summary.secondary[role=button]::after,
|
||||
|
|
@ -358,7 +358,7 @@ nav details.dropdown summary:focus-visible {
|
|||
[data-theme=light] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
||||
:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
||||
:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
||||
filter: brightness(100) invert(0);
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
[data-theme=light] input:is([type=submit],
|
||||
[type=button],
|
||||
|
|
@ -387,19 +387,19 @@ nav details.dropdown summary:focus-visible {
|
|||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(245, 107, 61, 0.1875);
|
||||
--pico-text-selection-color: rgba(228, 133, 0, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #f56b3d;
|
||||
--pico-primary-background: #d24317;
|
||||
--pico-primary: #e48500;
|
||||
--pico-primary-background: #ff9500;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(245, 107, 61, 0.5);
|
||||
--pico-primary-hover: #f8a283;
|
||||
--pico-primary-hover-background: #e74b1a;
|
||||
--pico-primary-underline: rgba(228, 133, 0, 0.5);
|
||||
--pico-primary-hover: #ffa23a;
|
||||
--pico-primary-hover-background: #ffa23a;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(245, 107, 61, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(228, 133, 0, 0.375);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -463,7 +463,7 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-switch-background-color: #333c4e;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #202632;
|
||||
--pico-range-active-border-color: #2a3140;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -523,7 +523,7 @@ nav details.dropdown summary:focus-visible {
|
|||
}
|
||||
:root:not([data-theme]) details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
||||
:host(:not([data-theme])) details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
||||
filter: brightness(100) invert(0);
|
||||
filter: brightness(100) invert(1);
|
||||
}
|
||||
:root:not([data-theme]) details summary.secondary[role=button]::after,
|
||||
:host(:not([data-theme])) details summary.secondary[role=button]::after {
|
||||
|
|
@ -535,26 +535,26 @@ nav details.dropdown summary:focus-visible {
|
|||
}
|
||||
:root:not([data-theme]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
||||
:host(:not([data-theme])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
||||
filter: brightness(100) invert(1);
|
||||
filter: brightness(100) invert(0);
|
||||
}
|
||||
}
|
||||
[data-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||
--pico-color: #c2c7d0;
|
||||
--pico-text-selection-color: rgba(245, 107, 61, 0.1875);
|
||||
--pico-text-selection-color: rgba(228, 133, 0, 0.1875);
|
||||
--pico-muted-color: #7b8495;
|
||||
--pico-muted-border-color: #202632;
|
||||
--pico-primary: #f56b3d;
|
||||
--pico-primary-background: #d24317;
|
||||
--pico-primary: #e48500;
|
||||
--pico-primary-background: #ff9500;
|
||||
--pico-primary-border: var(--pico-primary-background);
|
||||
--pico-primary-underline: rgba(245, 107, 61, 0.5);
|
||||
--pico-primary-hover: #f8a283;
|
||||
--pico-primary-hover-background: #e74b1a;
|
||||
--pico-primary-underline: rgba(228, 133, 0, 0.5);
|
||||
--pico-primary-hover: #ffa23a;
|
||||
--pico-primary-hover-background: #ffa23a;
|
||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||
--pico-primary-focus: rgba(245, 107, 61, 0.375);
|
||||
--pico-primary-inverse: #fff;
|
||||
--pico-primary-focus: rgba(228, 133, 0, 0.375);
|
||||
--pico-primary-inverse: #000;
|
||||
--pico-secondary: #969eaf;
|
||||
--pico-secondary-background: #525f7a;
|
||||
--pico-secondary-border: var(--pico-secondary-background);
|
||||
|
|
@ -618,7 +618,7 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-switch-background-color: #333c4e;
|
||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||
--pico-switch-color: #fff;
|
||||
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
||||
--pico-range-border-color: #202632;
|
||||
--pico-range-active-border-color: #2a3140;
|
||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||
|
|
@ -666,7 +666,7 @@ nav details.dropdown summary:focus-visible {
|
|||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||
}
|
||||
[data-theme=dark] details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
||||
filter: brightness(100) invert(0);
|
||||
filter: brightness(100) invert(1);
|
||||
}
|
||||
[data-theme=dark] details summary.secondary[role=button]::after {
|
||||
filter: brightness(100) invert(0);
|
||||
|
|
@ -675,7 +675,7 @@ nav details.dropdown summary:focus-visible {
|
|||
filter: brightness(100) invert(1);
|
||||
}
|
||||
[data-theme=dark] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
||||
filter: brightness(100) invert(1);
|
||||
filter: brightness(100) invert(0);
|
||||
}
|
||||
|
||||
progress,
|
||||
|
|
@ -2266,6 +2266,25 @@ label:has([type=checkbox], [type=radio]) {
|
|||
[type=checkbox][role=switch][disabled] {
|
||||
--pico-background-color: var(--pico-border-color);
|
||||
}
|
||||
[type=checkbox][role=switch][name=color-mode-toggle]:before {
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
-webkit-mask-size: contain; /* For WebKit browsers */
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
transition: margin 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
||||
}
|
||||
[type=checkbox][role=switch][name=color-mode-toggle]:checked::before {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278'/%3E%3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278'/%3E%3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z'/%3E%3C/svg%3E");
|
||||
background-color: var(--pico-primary-inverse);
|
||||
}
|
||||
[type=checkbox][role=switch][name=color-mode-toggle]:not(:checked)::before {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708'/%3E%3C/svg%3E");
|
||||
background-color: var(--pico-primary-inverse);
|
||||
}
|
||||
|
||||
:not([novalidate]) [type=checkbox][aria-invalid=false]:checked, :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:active, :not([novalidate]) [type=checkbox][aria-invalid=false]:checked:focus,
|
||||
:not([novalidate]) [type=checkbox][role=switch][aria-invalid=false]:checked,
|
||||
|
|
|
|||
2
docs/pico.min.css
vendored
2
docs/pico.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue