Florent/Light-Dark_Mode_Toggle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Second commit

Browse Source
This commit is contained in:
Florent Guichard
2026-06-05 13:44:31 +02:00
parent 55e03bb1db
commit 3034bf8794
5 changed files with 570 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/dark-theme.css
+101
View File
@@ -0,0 +1,101 @@
/**
* Dark palette for Twenty Twenty-Five default style variation.
* Overrides theme preset CSS variables when html.tt5-ldt-dark is set.
*/
html.tt5-ldt-dark {
color-scheme: dark;
--wp--preset--color--base: #111111;
--wp--preset--color--contrast: #f5f5f5;
--wp--preset--color--accent-1: #ffee58;
--wp--preset--color--accent-2: #d4a8d0;
--wp--preset--color--accent-3: #9b8fd4;
--wp--preset--color--accent-4: #a3a3a3;
--wp--preset--color--accent-5: #1c1c1a;
--wp--preset--color--accent-6: color-mix(in srgb, currentColor 25%, transparent);
}
html.tt5-ldt-dark body,
html.tt5-ldt-dark .wp-site-blocks {
background-color: var(--wp--preset--color--base) !important;
color: var(--wp--preset--color--contrast) !important;
}
/* Blocks that use preset background/text colors */
html.tt5-ldt-dark .has-base-background-color {
background-color: var(--wp--preset--color--base) !important;
}
html.tt5-ldt-dark .has-contrast-background-color {
background-color: var(--wp--preset--color--contrast) !important;
}
html.tt5-ldt-dark .has-base-color {
color: var(--wp--preset--color--base) !important;
}
html.tt5-ldt-dark .has-contrast-color {
color: var(--wp--preset--color--contrast) !important;
}
html.tt5-ldt-dark .has-accent-1-color {
color: var(--wp--preset--color--accent-1) !important;
}
html.tt5-ldt-dark .has-accent-2-color {
color: var(--wp--preset--color--accent-2) !important;
}
html.tt5-ldt-dark .has-accent-3-color {
color: var(--wp--preset--color--accent-3) !important;
}
html.tt5-ldt-dark .has-accent-4-color {
color: var(--wp--preset--color--accent-4) !important;
}
html.tt5-ldt-dark .has-accent-5-color {
color: var(--wp--preset--color--accent-5) !important;
}
html.tt5-ldt-dark .has-accent-1-background-color {
background-color: var(--wp--preset--color--accent-1) !important;
}
html.tt5-ldt-dark .has-accent-2-background-color {
background-color: var(--wp--preset--color--accent-2) !important;
}
html.tt5-ldt-dark .has-accent-3-background-color {
background-color: var(--wp--preset--color--accent-3) !important;
}
html.tt5-ldt-dark .has-accent-4-background-color {
background-color: var(--wp--preset--color--accent-4) !important;
}
html.tt5-ldt-dark .has-accent-5-background-color {
background-color: var(--wp--preset--color--accent-5) !important;
}
/* Form controls follow dark scheme */
html.tt5-ldt-dark input:not([type="submit"]):not([type="button"]):not([type="reset"]),
html.tt5-ldt-dark textarea,
html.tt5-ldt-dark select {
background-color: #1a1a1a;
color: var(--wp--preset--color--contrast);
border-color: var(--wp--preset--color--accent-4);
}
html.tt5-ldt-dark ::selection {
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--contrast);
}
/* Smooth transition when toggling */
html.tt5-ldt-animate,
html.tt5-ldt-animate body,
html.tt5-ldt-animate .wp-site-blocks {
transition: background-color 0.25s ease, color 0.25s ease;
}
assets/css/toggle.css
+63
View File
@@ -0,0 +1,63 @@
.tt5-ldt-toggle {
position: fixed;
z-index: 99999;
right: 1.25rem;
bottom: 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1rem;
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
border-radius: 999px;
background: var(--wp--preset--color--base, #fff);
color: var(--wp--preset--color--contrast, #111);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
font: 600 0.875rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tt5-ldt-toggle:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}
.tt5-ldt-toggle:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-3, #503aa8);
outline-offset: 3px;
}
.tt5-ldt-toggle__icon {
font-size: 1.1rem;
line-height: 1;
}
html:not(.tt5-ldt-dark) .tt5-ldt-toggle__icon--moon,
html.tt5-ldt-dark .tt5-ldt-toggle__icon--sun {
display: none;
}
html.tt5-ldt-dark .tt5-ldt-toggle {
background: #1a1a1a;
color: #f5f5f5;
border-color: rgba(255, 255, 255, 0.15);
}
@media (max-width: 480px) {
.tt5-ldt-toggle__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.tt5-ldt-toggle {
padding: 0.75rem;
border-radius: 50%;
}
}