102 lines
2.9 KiB
CSS
102 lines
2.9 KiB
CSS
/**
|
|
* 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;
|
|
}
|