74 lines
2.8 KiB
SCSS
74 lines
2.8 KiB
SCSS
// CSS Custom Properties for theme switching
|
|
// This allows dynamic switching between light and dark themes
|
|
|
|
:root {
|
|
// Light theme (default)
|
|
--color-bg-primary: #{$color__background-body};
|
|
--color-bg-secondary: #{$color__background-screen};
|
|
--color-bg-card: #{$color__background-card};
|
|
--color-bg-header: #{$color__background-header};
|
|
|
|
--color-text-primary: #{$color__text-main};
|
|
--color-text-secondary: #{$color__text-muted};
|
|
--color-text-tertiary: #{$color__text-light};
|
|
|
|
--color-link: #{$color__link};
|
|
--color-link-visited: #{$color__link-visited};
|
|
--color-link-hover: #{$color__link-hover};
|
|
|
|
--color-border-primary: #{$color__border-main};
|
|
--color-border-secondary: #{$color__border-input};
|
|
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
|
|
// Transitions
|
|
--transition-default: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
--transition-fast: all 0.15s ease-in-out;
|
|
}
|
|
|
|
// Dark theme
|
|
[data-theme="dark"] {
|
|
--color-bg-primary: #{$color__dark-background-body};
|
|
--color-bg-secondary: #{$color__dark-background-screen};
|
|
--color-bg-card: #{$color__dark-background-card};
|
|
--color-bg-header: #{$color__dark-background-header};
|
|
|
|
--color-text-primary: #{$color__dark-text-main};
|
|
--color-text-secondary: #{$color__dark-text-muted};
|
|
--color-text-tertiary: #{$color__dark-text-light};
|
|
|
|
--color-link: #{$color__dark-link};
|
|
--color-link-visited: #{$color__dark-link-visited};
|
|
--color-link-hover: #{$color__dark-link-hover};
|
|
|
|
--color-border-primary: #{$color__dark-border-main};
|
|
--color-border-secondary: #{$color__dark-border-input};
|
|
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
|
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
// Prefers dark color scheme
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--color-bg-primary: #{$color__dark-background-body};
|
|
--color-bg-secondary: #{$color__dark-background-screen};
|
|
--color-bg-card: #{$color__dark-background-card};
|
|
--color-bg-header: #{$color__dark-background-header};
|
|
|
|
--color-text-primary: #{$color__dark-text-main};
|
|
--color-text-secondary: #{$color__dark-text-muted};
|
|
--color-text-tertiary: #{$color__dark-text-light};
|
|
|
|
--color-link: #{$color__dark-link};
|
|
--color-link-visited: #{$color__dark-link-visited};
|
|
--color-link-hover: #{$color__dark-link-hover};
|
|
|
|
--color-border-primary: #{$color__dark-border-main};
|
|
--color-border-secondary: #{$color__dark-border-input};
|
|
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
|
|
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|