dashy/src/styles/Colors.scss

44 lines
1.1 KiB
SCSS

/* Global Color Palette */
:root {
/* Greyscale */
--bright-white: #ffffff;
--white: #f7f7f7;
--pale-grey: #e9e9e8;
--mid-grey: #a9a9a9;
--dark-grey: #18191a;
--black: #121212;
--pitch-black: #000000;
/* Action Colors */
--info: #35c9fa;
--success: #88ff88;
--warning: #ece715;
--danger: #f80363;
}
/* Themed Color Palette */
html { /* Light Theme */
--primary: #54bff7;
--background: var(--pale-grey);
--text-color: var(--black);
--hero-background: var(--bright-white);
--kinda-transparent: #ffffffd9;
--hyperlink: #ff62ce;
--feature-img-shadow: 4px 4px 6px #a9a9a980, -2px -2px 4px rgb(0 0 0 / 40%);
--footer-color: var(--white);
--footer-text-color: var(--black);
}
html[data-theme='dark'] { /* Dark Theme */
--primary: #db78fc;
--background: var(--dark-grey);
--text-color: var(--white);
--hero-background: var(--black);
--kinda-transparent: #000000d9;
--hyperlink: var(--primary);
--feature-img-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
--footer-color: var(--black);
--footer-text-color: var(--white);
}