Description
I propose adding a robust Dark Mode Token Layer that allows developers to easily switch their entire EaseMotion CSS application between light and dark themes. This implementation utilizes a data-theme="dark" attribute on the or tag to swap the global CSS color variables, providing a seamless, JS-controllable dark mode while maintaining full fallback support for prefers-color-scheme.
This addresses the "Dark mode token layer" requirement currently listed as "Planned — v1.1" in the project Roadmap.
Why is this useful for EaseMotion CSS?
Currently, EaseMotion components rely heavily on hardcoded dark mode media queries (@media (prefers-color-scheme: dark)). While this is great for automatically matching system preferences, it makes it impossible for developers to provide a manual "Theme Toggle" button on their websites. By abstracting the colors into a token layer that responds to a data-theme attribute, developers gain full control over the theme state, allowing for dynamic, animated theme switching without breaking the zero-dependency philosophy.
HTML Snippet
html
Dark Mode Activated
The colors automatically adjust based on the data-theme token layer.
<!-- Simple JS to toggle the token layer -->
<button class="ease-btn ease-btn-primary" onclick="document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark')">
Toggle Theme
</button>
CSS Snippet
css
/* Base Light Theme Tokens (Default) */
:root,
[data-theme="light"] {
--ease-color-bg: #f8fafc;
--ease-color-surface: #ffffff;
--ease-color-text: #0f172a;
--ease-color-muted: #64748b;
--ease-color-border: #e2e8f0;
/* Primary color usually stays the same, but can be adjusted /
--ease-color-primary: #6c63ff;
}
/ Dark Theme Tokens (Overrides) */
[data-theme="dark"] {
--ease-color-bg: #0f172a;
--ease-color-surface: #1e293b;
--ease-color-text: #f8fafc;
--ease-color-muted: #94a3b8;
--ease-color-border: #334155;
/* Darker shadows for dark mode /
--ease-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
--ease-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
/ Optional: Support system preference if no data-theme is explicitly set /
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ease-color-bg: #0f172a;
--ease-color-surface: #1e293b;
--ease-color-text: #f8fafc;
--ease-color-muted: #94a3b8;
--ease-color-border: #334155;
}
}
/ Base resets applying the tokens globally */
body {
background-color: var(--ease-color-bg);
color: var(--ease-color-text);
transition: background-color var(--ease-speed-medium) var(--ease-ease),
color var(--ease-speed-medium) var(--ease-ease);
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.
Description
I propose adding a robust Dark Mode Token Layer that allows developers to easily switch their entire EaseMotion CSS application between light and dark themes. This implementation utilizes a data-theme="dark" attribute on the or tag to swap the global CSS color variables, providing a seamless, JS-controllable dark mode while maintaining full fallback support for prefers-color-scheme.
This addresses the "Dark mode token layer" requirement currently listed as "Planned — v1.1" in the project Roadmap.
Why is this useful for EaseMotion CSS?
Currently, EaseMotion components rely heavily on hardcoded dark mode media queries (@media (prefers-color-scheme: dark)). While this is great for automatically matching system preferences, it makes it impossible for developers to provide a manual "Theme Toggle" button on their websites. By abstracting the colors into a token layer that responds to a data-theme attribute, developers gain full control over the theme state, allowing for dynamic, animated theme switching without breaking the zero-dependency philosophy.
HTML Snippet
html
Dark Mode Activated
The colors automatically adjust based on the data-theme token layer.
/* Primary color usually stays the same, but can be adjusted /
--ease-color-primary: #6c63ff;
}
/ Dark Theme Tokens (Overrides) */
[data-theme="dark"] {
--ease-color-bg: #0f172a;
--ease-color-surface: #1e293b;
--ease-color-text: #f8fafc;
--ease-color-muted: #94a3b8;
--ease-color-border: #334155;
/* Darker shadows for dark mode /
--ease-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
--ease-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
/ Optional: Support system preference if no data-theme is explicitly set /
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ease-color-bg: #0f172a;
--ease-color-surface: #1e293b;
--ease-color-text: #f8fafc;
--ease-color-muted: #94a3b8;
--ease-color-border: #334155;
}
}
/ Base resets applying the tokens globally */
body {
background-color: var(--ease-color-bg);
color: var(--ease-color-text);
transition: background-color var(--ease-speed-medium) var(--ease-ease),
color var(--ease-speed-medium) var(--ease-ease);
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.