268 lines
7.1 KiB
SCSS
268 lines
7.1 KiB
SCSS
@mixin baseTheme {
|
|
--font-sans: "Montserrat", "sans-serif";
|
|
--font-mono: "Roboto Mono", "monospace";
|
|
--font-icon: "Material Icons";
|
|
}
|
|
|
|
@mixin darkTheme {
|
|
// Background color
|
|
--primary-color: rgba(32, 33, 36, 1);
|
|
// Light Background color
|
|
--primary-light-color: rgba(255, 255, 255, 0.04);
|
|
// Dark Background color
|
|
--primary-dark-color: rgba(12, 12, 12, 1);
|
|
// Text color
|
|
--secondary-color: rgba(255, 255, 255, 0.9);
|
|
// Light Text color
|
|
--secondary-light-color: rgba(255, 255, 255, 0.5);
|
|
// Dark Text color
|
|
--secondary-dark-color: rgba(0, 0, 0, 0.5);
|
|
// Border color
|
|
--divider-color: rgba(255, 255, 255, 0.05);
|
|
// Light Border color
|
|
--divider-light-color: rgba(255, 255, 255, 0.05);
|
|
// Dark Border color
|
|
--divider-dark-color: rgba(255, 255, 255, 0.05);
|
|
// Error color
|
|
--error-color: rgba(255, 255, 255, 0.05);
|
|
// Tooltip color
|
|
--tooltip-color: rgba(48, 48, 48, 1);
|
|
// Editor theme
|
|
--editor-theme: "twilight";
|
|
}
|
|
|
|
@mixin lightTheme {
|
|
// Background color
|
|
--primary-color: theme("colors.white");
|
|
// Light Background color
|
|
--primary-light-color: theme("colors.gray.50");
|
|
// Dark Background color
|
|
--primary-dark-color: theme("colors.gray.100");
|
|
// Text color
|
|
--secondary-color: theme("colors.gray.600");
|
|
// Light Text color
|
|
--secondary-light-color: theme("colors.gray.500");
|
|
// Dark Text color
|
|
--secondary-dark-color: theme("colors.gray.700");
|
|
// Border color
|
|
--divider-color: theme("colors.gray.200");
|
|
// Light Border color
|
|
--divider-light-color: theme("colors.gray.100");
|
|
// Dark Border color
|
|
--divider-dark-color: theme("colors.gray.300");
|
|
// Error color
|
|
--error-color: theme("colors.gray.700");
|
|
// Tooltip color
|
|
--tooltip-color: theme("colors.gray.50");
|
|
// Editor theme
|
|
--editor-theme: "iplastic";
|
|
}
|
|
|
|
@mixin blackTheme {
|
|
// Background color
|
|
--primary-color: rgba(0, 0, 0, 1);
|
|
// Light Background color
|
|
--primary-light-color: rgba(255, 255, 255, 0.02);
|
|
// Dark Background color
|
|
--primary-dark-color: rgba(255, 255, 255, 0.07);
|
|
// Text color
|
|
--secondary-color: rgba(255, 255, 255, 0.9);
|
|
// Light Text color
|
|
--secondary-light-color: rgba(255, 255, 255, 0.5);
|
|
// Dark Text color
|
|
--secondary-dark-color: rgba(9, 9, 9, 0.5);
|
|
// Border color
|
|
--divider-color: rgba(255, 255, 255, 0.11);
|
|
// Light Border color
|
|
--divider-light-color: rgba(255, 255, 255, 0.11);
|
|
// Dark Border color
|
|
--divider-dark-color: rgba(255, 255, 255, 0.11);
|
|
// Error color
|
|
--error-color: rgba(255, 255, 255, 0.05);
|
|
// Tooltip color
|
|
--tooltip-color: rgba(32, 32, 32, 1);
|
|
// Editor theme
|
|
--editor-theme: "vibrant_ink";
|
|
}
|
|
|
|
@mixin blueTheme {
|
|
// Accent color
|
|
--accent-color: theme("colors.blue.400");
|
|
// Light Accent color
|
|
--accent-light-color: theme("colors.blue.200");
|
|
// Dark Accent color
|
|
--accent-dark-color: theme("colors.blue.600");
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.blue.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.blue.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.blue.600");
|
|
}
|
|
|
|
@mixin greenTheme {
|
|
// Accent color
|
|
--accent-color: rgba(73, 204, 104, 1);
|
|
// Light Accent color
|
|
--accent-light-color: rgba(73, 204, 104, 1);
|
|
// Dark Accent color
|
|
--accent-dark-color: rgba(64, 182, 91, 1);
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.green.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.green.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.green.600");
|
|
}
|
|
|
|
@mixin tealTheme {
|
|
// Accent color
|
|
--accent-color: theme("colors.teal.400");
|
|
// Light Accent color
|
|
--accent-light-color: theme("colors.teal.200");
|
|
// Dark Accent color
|
|
--accent-dark-color: theme("colors.teal.600");
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.blue.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.blue.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.blue.600");
|
|
}
|
|
|
|
@mixin indigoTheme {
|
|
// Accent color
|
|
--accent-color: theme("colors.indigo.400");
|
|
// Light Accent color
|
|
--accent-light-color: theme("colors.indigo.200");
|
|
// Dark Accent color
|
|
--accent-dark-color: theme("colors.indigo.600");
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.blue.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.blue.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.blue.600");
|
|
}
|
|
|
|
@mixin purpleTheme {
|
|
// Accent color
|
|
--accent-color: theme("colors.purple.400");
|
|
// Light Accent color
|
|
--accent-light-color: theme("colors.purple.200");
|
|
// Dark Accent color
|
|
--accent-dark-color: theme("colors.purple.600");
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.blue.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.blue.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.blue.600");
|
|
}
|
|
|
|
@mixin orangeTheme {
|
|
// Accent color
|
|
--accent-color: theme("colors.orange.400");
|
|
// Light Accent color
|
|
--accent-light-color: theme("colors.orange.200");
|
|
// Dark Accent color
|
|
--accent-dark-color: theme("colors.orange.600");
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.blue.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.blue.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.blue.600");
|
|
}
|
|
|
|
@mixin pinkTheme {
|
|
// Accent color
|
|
--accent-color: theme("colors.pink.400");
|
|
// Light Accent color
|
|
--accent-light-color: theme("colors.pink.200");
|
|
// Dark Accent color
|
|
--accent-dark-color: theme("colors.pink.600");
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.blue.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.blue.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.blue.600");
|
|
}
|
|
|
|
@mixin redTheme {
|
|
// Accent color
|
|
--accent-color: theme("colors.red.400");
|
|
// Light Accent color
|
|
--accent-light-color: theme("colors.red.200");
|
|
// Dark Accent color
|
|
--accent-dark-color: theme("colors.red.600");
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.blue.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.blue.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.blue.600");
|
|
}
|
|
|
|
@mixin yellowTheme {
|
|
// Accent color
|
|
--accent-color: theme("colors.yellow.400");
|
|
// Light Accent color
|
|
--accent-light-color: theme("colors.yellow.200");
|
|
// Dark Accent color
|
|
--accent-dark-color: theme("colors.yellow.600");
|
|
// Gradient from
|
|
--gradient-from-color: theme("colors.blue.200");
|
|
// Gradient via
|
|
--gradient-via-color: theme("colors.blue.400");
|
|
// Gradient to
|
|
--gradient-to-color: theme("colors.blue.600");
|
|
}
|
|
|
|
:root {
|
|
@include baseTheme;
|
|
@include darkTheme;
|
|
@include greenTheme;
|
|
}
|
|
|
|
:root.light-mode {
|
|
@include lightTheme;
|
|
}
|
|
|
|
:root.dark-mode {
|
|
@include darkTheme;
|
|
}
|
|
|
|
:root.black-mode {
|
|
@include blackTheme;
|
|
}
|
|
|
|
:root[data-accent="blue"] {
|
|
@include blueTheme;
|
|
}
|
|
:root[data-accent="green"] {
|
|
@include greenTheme;
|
|
}
|
|
:root[data-accent="teal"] {
|
|
@include tealTheme;
|
|
}
|
|
:root[data-accent="indigo"] {
|
|
@include indigoTheme;
|
|
}
|
|
:root[data-accent="purple"] {
|
|
@include purpleTheme;
|
|
}
|
|
:root[data-accent="orange"] {
|
|
@include orangeTheme;
|
|
}
|
|
:root[data-accent="pink"] {
|
|
@include pinkTheme;
|
|
}
|
|
:root[data-accent="red"] {
|
|
@include redTheme;
|
|
}
|
|
:root[data-accent="yellow"] {
|
|
@include yellowTheme;
|
|
}
|