🎨 Add theme support
- Move root (var) style properties to `/assets/css/themes.scss` - Improve mobile navigation - Create section component for the collapsable sections. - Create logo component, so color can be changed. - Add settings page - Add option to select theme color - Add option to select theme background - Add option to enable/disable multi-colored frames. - Add settings to VueX Store - Persist VueX store in LocalStorage.
This commit is contained in:
39
assets/css/themes.scss
Normal file
39
assets/css/themes.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
Main Themes:
|
||||
|
||||
- dark (default)
|
||||
- light
|
||||
*/
|
||||
|
||||
// Dark is the default theme variant.
|
||||
:root {
|
||||
--bg-dark-color: #000000;
|
||||
// Background color
|
||||
--bg-color: #121212;
|
||||
// Text color
|
||||
--fg-color: #FFF;
|
||||
|
||||
// Error color
|
||||
--err-color: #393939;
|
||||
|
||||
// Active color
|
||||
--ac-color: #51FF0D;
|
||||
// Active text color
|
||||
--act-color: #121212;
|
||||
}
|
||||
|
||||
:root.light {
|
||||
--bg-dark-color: #ffffff;
|
||||
// Background color
|
||||
--bg-color: #F6F8FA;
|
||||
// Text color
|
||||
--fg-color: #121212;
|
||||
|
||||
// Error color
|
||||
--err-color: invert(#393939, 1);
|
||||
|
||||
// Active color
|
||||
--ac-color: #51FF0D;
|
||||
// Active text color
|
||||
--act-color: #121212;
|
||||
}
|
||||
Reference in New Issue
Block a user