diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-06-24 23:47:20 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-06-24 23:47:56 +1000 |
| commit | 12b6f8c6d4bbbb3131c239ba1cf3334401b02562 (patch) | |
| tree | 848a3efb37f5e83f2b73f99e322be776ffb20bfc | |
| parent | f35ac92ead27d3cf541c58ce20650281a405cf86 (diff) | |
Use bg[-dark/light] variables for UI color options
| -rw-r--r-- | src/App.vue | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/src/App.vue b/src/App.vue index 33f09f2..effaded 100644 --- a/src/App.vue +++ b/src/App.vue @@ -57,6 +57,7 @@ function getDefaultLytOpts(): LayoutOptions { } function getDefaultUiOpts(){ let screenSz = getBreakpoint(); + let bgColor = '#292524', bgLight1 = '#44403c', bgLight2 = '#57534e', bgDark1 = '#1c1917', bgDark2 = '#0e0c0b'; return { // Shared styling borderRadius: 5, // px @@ -64,8 +65,8 @@ function getDefaultUiOpts(){ shadowHovered: '0 0 1px 2px greenyellow', shadowFocused: '0 0 1px 2px orange', // Styling for App - appBgColor: '#292524', - titleBarBgColor: 'black', + appBgColor: bgColor, + titleBarBgColor: bgDark2, mainTileMargin: screenSz == 'sm' ? 6 : 10, // px // Styling for tiles textColor: '#fafaf9', @@ -74,16 +75,16 @@ function getDefaultUiOpts(){ infoIconMargin: 2, // px leafPadding: 4, // px leafHeaderFontSz: 15, // px - nonleafBgColors: ['#44403c', '#57534e'], + nonleafBgColors: [bgLight1, bgLight2], nonleafHeaderFontSz: 15, // px - nonleafHeaderBgColor: '#1c1917', + nonleafHeaderBgColor: bgDark1, // Styling for other components infoModalImgSz: 200, // px - ancestryBarBgColor: '#44403c', + ancestryBarBgColor: 'transparent', ancestryBarImgSz: 100, // px ancestryTileGap: 5, // px tutPaneSz: 200, // px - tutPaneBgColor: '#1c1917', + tutPaneBgColor: bgDark1, // Timing related clickHoldDuration: 400, // ms transitionDuration: 300, // ms |