mirror of
https://github.com/guimar10/monochroYou.git
synced 2026-07-22 03:30:25 +00:00
75 lines
2.4 KiB
CSS
75 lines
2.4 KiB
CSS
.theme-light {
|
|
/* Material You Tokens - Light Mode ✨☀️ */
|
|
--colorPrimary: hsl(var(--accent-h), 100%, 31%);
|
|
--colorPrimaryContainer: hsl(var(--accent-h), 100%, 93%);
|
|
--colorPrimaryContainerVariant: hsl(var(--accent-h), 100%, 85%);
|
|
--colorPrimaryContainerVariantHover: hsl(var(--accent-h), 100%, 91%);
|
|
--colorOnPrimary: white;
|
|
--colorBackgroundPrimary: hsl(var(--accent-h), 100%, 97%);
|
|
--colorBackgroundSecondary: hsla(
|
|
var(--accent-h),
|
|
var(--accent-s),
|
|
var(--accent-l),
|
|
2%
|
|
);
|
|
|
|
/* Navigation Items - Light Mode ✨☀️ */
|
|
--nav-item-color: black;
|
|
}
|
|
|
|
.theme-dark {
|
|
/* Material You Tokens - Dark Mode ✨🌝 */
|
|
--colorPrimary: hsl(var(--accent-h), 100%, 80%);
|
|
--colorPrimaryContainer: hsl(var(--accent-h), 100%, 10%);
|
|
--colorPrimaryContainerVariant: hsl(var(--accent-h), 100%, 20%);
|
|
--colorPrimaryContainerVariantHover: hsl(var(--accent-h), 100%, 10%);
|
|
--colorOnPrimary: var(--colorBackgroundSecondary);
|
|
--colorBackgroundPrimary: hsl(var(--accent-h), 20%, 7%);
|
|
--colorBackgroundSecondary: hsl(var(--accent-h), 30%, 12%);
|
|
|
|
/* Navigation Items - Dark Mode ✨🌝 */
|
|
--nav-item-color: white;
|
|
}
|
|
|
|
body {
|
|
/* Interactive */
|
|
--interactive-normal: hsl(var(--accent-h), 100%, 90%);
|
|
--interactive-accent: var(--colorPrimary);
|
|
--interactive-accent-hover: var(--colorPrimary);
|
|
|
|
/* Background */
|
|
--background-primary: var(--colorBackgroundPrimary);
|
|
--background-secondary: var(--colorBackgroundSecondary);
|
|
--background-modifier-border: transparent;
|
|
--titlebar-background-focused: var(--colorBackgroundSecondary);
|
|
|
|
/* Navigation */
|
|
--tab-background-active: var(--colorPrimaryContainerVariant);
|
|
--nav-item-background-hover: var(--colorPrimaryContainerVariantHover);
|
|
--nav-item-background-active: var(--colorPrimaryContainerVariant);
|
|
--text-highlight-bg: var(--colorPrimaryContainerVariant);
|
|
|
|
/* Code */
|
|
--code-background: var(--colorPrimaryContainer);
|
|
--code-normal: var(--colorPrimary);
|
|
|
|
/* Link */
|
|
--link-external-color: var(--colorPrimary);
|
|
--link-external-color-hover: var(--colorPrimary);
|
|
|
|
/* Tags */
|
|
--tag-color: var(--colorPrimary);
|
|
--tag-background: var(--colorPrimaryContainerVariant);
|
|
--tag-background-hover: var(--colorPrimaryContainerVariant);
|
|
|
|
/* Radius */
|
|
--button-radius: 100px;
|
|
--radius-s: 100px;
|
|
|
|
/* Toggle */
|
|
--toggle-thumb-color: var(--colorOnPrimary);
|
|
|
|
/* On accent */
|
|
--text-on-accent: var(--colorOnPrimary);
|
|
--text-on-accent-inverted: var(--colorOnPrimary);
|
|
}
|