mirror of
https://github.com/openwrt/luci.git
synced 2026-06-17 12:40:24 +04:00
Shannon Barber
54338546bc
Add dark mode following the luci-theme-bootstrap pattern: auto-detect via prefers-color-scheme, with forced MaterialDark/MaterialLight variants. Replace ~60 hardcoded colors in cascade.css with CSS variables and override them in a :root[data-darkmode="true"] block. Signed-off-by: Shannon Barber <sgbarber@gmail.com>
118 lines
3.0 KiB
CSS
118 lines
3.0 KiB
CSS
/**
|
|
The CSS variables in this file should be treated as a public API. The
|
|
colors have been put in a separate file to allow end users to
|
|
override the color variables with their own values by creating their
|
|
own custom.css file, which mean we can't delete/rename defined
|
|
variables which is already used in cascade.css.
|
|
*/
|
|
:root {
|
|
/** General colors */
|
|
--white-color: #ffffff;
|
|
--white-color-low: #f9f9f9;
|
|
--black-color: #000000;
|
|
--black-color-low: #202124;
|
|
--yellow-color: #f0ad4e;
|
|
--yellow-color-high: #eea236;
|
|
--on-yellow-color: var(--white-color);
|
|
--red-color: #d9534f;
|
|
--red-color-high: #d43f3a;
|
|
--on-red-color: var(--white-color);
|
|
--green-color: #5cb85c;
|
|
--green-color-high: #4cae4c;
|
|
--on-green-color: var(--white-color);
|
|
--dark-blue-color: #337ab7;
|
|
--dark-blue-color-high: #2e6da4;
|
|
--on-dark-blue-color: var(--white-color);
|
|
--gray-color: #d4d4d4;
|
|
--gray-color-high: #bfbfbf;
|
|
--light-blue-color: #5bc0de;
|
|
--light-blue-color-high: #46b8da;
|
|
--on-light-blue-color: var(--white-color);
|
|
|
|
--main-color: #00B5E2;
|
|
--secondary-color: #0099cc;
|
|
|
|
--header-bg: #00B5E2;
|
|
--header-color: #fff;
|
|
--bar-bg: #5bc0de;
|
|
--menu-bg-color: #fff;
|
|
--menu-color: #5f6368;
|
|
--menu-color-hover: #202124;
|
|
--main-menu-color: #202124;
|
|
--submenu-bg-hover: #d4d4d4;
|
|
--submenu-bg-hover-active: #00B5E2;
|
|
|
|
--notice-color: #002B49;
|
|
--on-notice-color: var(--white-color);
|
|
|
|
--danger-color: var(--red-color);
|
|
--on-danger-color: var(--on-red-color);
|
|
|
|
--warning-color: #f0e68c;
|
|
--on-warning-color: var(--black-color);
|
|
|
|
--success-color: var(--green-color);
|
|
--on-success-color: var(--on-green-color);
|
|
|
|
--error-color: #ff0000;
|
|
--on-error-color: var(--white-color);
|
|
|
|
--font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
:root[data-darkmode="true"] {
|
|
--white-color: #1a1a1a;
|
|
--white-color-low: #111111;
|
|
--black-color: #e0e0e0;
|
|
--black-color-low: #cccccc;
|
|
--yellow-color: #c4903e;
|
|
--yellow-color-high: #b8832e;
|
|
--on-yellow-color: #1a1a1a;
|
|
--red-color: #b34440;
|
|
--red-color-high: #a33530;
|
|
--on-red-color: #e0e0e0;
|
|
--green-color: #4a9a4a;
|
|
--green-color-high: #3d8d3d;
|
|
--on-green-color: #e0e0e0;
|
|
--dark-blue-color: #4a8cc2;
|
|
--dark-blue-color-high: #3d7aad;
|
|
--on-dark-blue-color: #e0e0e0;
|
|
--gray-color: #3a3a3a;
|
|
--gray-color-high: #4a4a4a;
|
|
--light-blue-color: #3a9ab5;
|
|
--light-blue-color-high: #2e8aa5;
|
|
--on-light-blue-color: #e0e0e0;
|
|
|
|
--main-color: #00a0cc;
|
|
--secondary-color: #0088b3;
|
|
|
|
--header-bg: #005570;
|
|
--header-color: #e0e0e0;
|
|
--bar-bg: #3a9ab5;
|
|
--menu-bg-color: #0d0d0d;
|
|
--menu-color: #a0a0a0;
|
|
--menu-color-hover: #d0d0d0;
|
|
--main-menu-color: #d0d0d0;
|
|
--submenu-bg-hover: #333333;
|
|
--submenu-bg-hover-active: #005570;
|
|
|
|
--notice-color: #1a4a6a;
|
|
--on-notice-color: #e0e0e0;
|
|
|
|
--danger-color: var(--red-color);
|
|
--on-danger-color: var(--on-red-color);
|
|
|
|
--warning-color: #6b6330;
|
|
--on-warning-color: #e0e0e0;
|
|
|
|
--success-color: var(--green-color);
|
|
--on-success-color: var(--on-green-color);
|
|
|
|
--error-color: #cc3333;
|
|
--on-error-color: #e0e0e0;
|
|
|
|
color-scheme: dark;
|
|
}
|