mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-19 23:14:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: new dark theme

Browse Source
This commit is contained in:
David Ralph
2021-03-20 16:29:21 +00:00
parent e092c805e8
commit b7656fa951
10 changed files with 58 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/scss/_themes.scss Normal file
View File

@@ -0,0 +1,33 @@
@import 'variables';
$main-text: map-get($theme-colours, 'main');
$modal-text: map-get($modal, 'text');
$background: map-get($modal, 'background');
$sidebar: map-get($modal, 'sidebar');
$tab-active: map-get($modal, 'tab-active');
$photo-info: map-get($theme-colours, 'photo-info');
$main-text-dark: map-get($theme-colours, 'secondary');
$modal-text-dark: map-get($theme-colours, 'main');
$background-dark: map-get($modal, 'background-dark');
$sidebar-dark: map-get($modal, 'sidebar-dark');
$tab-active-dark: map-get($modal, 'tab-active-dark');
$photo-info-dark: map-get($theme-colours, 'photo-info-dark');
:root {
--main-text: #{$main-text};
--modal-text: #{$modal-text};
--background: #{$background};
--sidebar: #{$sidebar};
--tab-active: #{$tab-active};
--photo-info: #{$photo-info};
}
.dark {
--main-text: #{$main-text-dark};
--modal-text: #{$modal-text-dark};
--background: #{$background-dark};
--sidebar: #{$sidebar-dark};
--tab-active: #{$tab-active-dark};
--photo-info: #{$photo-info-dark};
}

6
src/scss/_variables.scss
View File

@@ -5,6 +5,8 @@ $theme-colours: (
'main': rgba(242, 243, 244, 1),
'secondary': rgba(0, 0, 0, 1),
'main-text-color': rgba(242, 243, 244, 1),
'photo-info': #2d3436,
'photo-info-dark': #ffff
);
$modal: (
@@ -14,6 +16,10 @@ $modal: (
'tab-underline': rgba(204, 204, 204, 1),
'tab-underline-active': rgba(0, 0, 0, 1),
'border-radius': 12px,
'sidebar': #f0f0f0,
'tab-active': rgba(219, 219, 219, 0.72),
'sidebar-dark': #353b48,
'tab-active-dark': rgba(65, 71, 84, .9)
);
$marketplace: (

13
src/scss/index.scss
View File

@@ -1,22 +1,11 @@
@import 'variables';
@import 'mixins';
@import 'themes';
@import 'modules/toast';
@import 'modules/marketplace';
@import 'modules/buttons';
:root {
--main-text: map-get($theme-colours, 'main');
--modal-text: map-get($modal, 'text');
--background: map-get($modal, 'background');
}
.dark {
--main-text: map-get($theme-colours, 'secondary');
--modal-text: map-get($theme-colours, 'main');
--background: map-get($modal, 'background-dark');
}
body {
background: #2f3640;
margin: 0;