From e9a269cd114f8a6f0729e69204d77cb3992cbc4d Mon Sep 17 00:00:00 2001 From: shirin Date: Sat, 27 Nov 2021 10:47:42 +0700 Subject: [PATCH] Dark mode hacks Fist iteration to implement dark mode in launcher's setting window --- public/html/settings.html | 12 +++++- public/locales/id.json | 2 +- src/sass/basic.sass | 3 ++ src/sass/components.sass | 83 +++++++++++++++++++++++++++++++++++++++ src/sass/settings.sass | 43 +++++++++++++++++++- src/ts/lib/LauncherLib.ts | 1 + src/ts/settings.ts | 50 ++++++++++++++++++++++- 7 files changed, 188 insertions(+), 6 deletions(-) diff --git a/public/html/settings.html b/public/html/settings.html index ce31962..37f71fe 100644 --- a/public/html/settings.html +++ b/public/html/settings.html @@ -17,7 +17,7 @@ Settings - +
General
Enhancements
@@ -109,6 +109,14 @@
+
+ Dark Mode + +
+ +
+
+
@@ -152,6 +160,8 @@ + +

diff --git a/public/locales/id.json b/public/locales/id.json index 8cced31..29f5fbe 100644 --- a/public/locales/id.json +++ b/public/locales/id.json @@ -17,7 +17,7 @@ "NoImages": "Tidak ada gambar ditambahkan", "SettingsTitle": "Pengaturan", "General": "Umum", - "Enhancements": "Enhancements", + "Enhancements": "Peningkatan", "WineVersion": "Versi Wine", "Environment": "Lingkungan", "EnvironmentalVariables": "Variabel Lingkungan", diff --git a/src/sass/basic.sass b/src/sass/basic.sass index 54738d8..90e3e24 100644 --- a/src/sass/basic.sass +++ b/src/sass/basic.sass @@ -10,6 +10,9 @@ body ::-webkit-scrollbar-track background: #f1f1f1 +::-webkit-scrollbar-track-dark + background: #2E3440 + ::-webkit-scrollbar-thumb background: #888 border-radius: 8px diff --git a/src/sass/components.sass b/src/sass/components.sass index ab4a76f..c0bb617 100644 --- a/src/sass/components.sass +++ b/src/sass/components.sass @@ -3,6 +3,12 @@ $light2: #eff2ff $primary: #657ef8 $secondary: #e1e7ff +$dark: #3B4252 +$dark2: #2E3440 +$dark3: #4C566A +$dark-fg-disabled: #D8DEE9 +$dark-fg: #ECEFF4 + /* Editable list of properties */ .properties-list @@ -76,6 +82,21 @@ $secondary: #e1e7ff .button:not(:last-child) margin-right: 8px + +.properties-list-dark + table + tr + &:hover + background-color: $dark3 + + td + input + background-color: $dark2 + color: $dark-fg + + .selected + background-color: $dark2 !important + /* List of buttons */ .list-item @@ -119,6 +140,12 @@ $secondary: #e1e7ff display: none +.list-item-dark + background-color: $dark2 + + &:hover + background-color: $dark + .list-item-active background-color: $primary !important color: white !important @@ -182,12 +209,26 @@ $secondary: #e1e7ff height: 12px width: 12px +.checkbox-dark + .checkbox-mark + background-color: $dark2 + + svg + filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%) + .checkbox-disabled background-color: $light .checkbox-mark display: none +.checkbox-disabled-dark + background-color: $dark + color: $dark3 + + .checkbox-mark + display: none + .checkbox-active .checkbox-mark background-color: $primary @@ -270,6 +311,32 @@ $secondary: #e1e7ff background-color: $light2 color: $primary + .select-options-dark + background-color: $dark2 + + &::-webkit-scrollbar-track + background-color: $dark2 + + &::-webkit-scrollbar-thumb + background: #D8DEE9 + + &:hover + background: #E5E9F0 + + ul + li + color: $dark-fg + + &:hover:not([disabled]) + background-color: $dark + + &[disabled] + color: $dark3 + + li.selected + background-color: $dark + + .selected-item display: flex align-items: baseline @@ -298,6 +365,15 @@ $secondary: #e1e7ff margin-left: 8px transform: rotate(90deg) + + .selected-item-dark + background-color: $dark2 + + &:hover + background-color: $dark + + svg + filter: invert(100%) .select-active .selected-item @@ -331,3 +407,10 @@ $secondary: #e1e7ff &:hover background-color: $primary color: white + +.button-dark + background-color: $dark2 + color: $dark-fg + + &:hover + background-color: $dark \ No newline at end of file diff --git a/src/sass/settings.sass b/src/sass/settings.sass index 25fd842..94ab37f 100644 --- a/src/sass/settings.sass +++ b/src/sass/settings.sass @@ -1,8 +1,15 @@ @import "basic" -body +.body background-color: rgb(245, 246, 251) +.body-dark + background-color: #2E3440 + + &::-webkit-scrollbar-track + background: #2E3440 + + .menu position: absolute width: 200px @@ -13,9 +20,15 @@ body margin: 16px 32px padding: 12px 16px - background-color: white border-radius: 16px + background-color: white + box-shadow: none + +.menu-dark + background-color: #434C5E + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.28) + .menu-item display: flex align-items: center @@ -25,13 +38,24 @@ body padding: 0 12px border-radius: 12px + color: black font-size: 18px cursor: pointer +.menu-item-dark + color: #ECEFF4 + .menu-item-active, .menu-item:hover background-color: #eff2ff + // background-color: #4C566A + color: #657ef8 + +.menu-item-active-dark, +.menu-item-dark:hover + //background-color: #eff2ff + background-color: #4C566A color: #657ef8 .settings @@ -46,9 +70,24 @@ body padding: 0 24px background-color: white + color: black border-radius: 16px overflow: auto +.settings-dark + background-color: #434C5E + color: #ECEFF4 + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.28) + + &::-webkit-scrollbar-track + background: #434C5E + + &::-webkit-scrollbar-thumb + background: #D8DEE9 + + &:hover + background: #E5E9F0 + .settings-item:last-child margin-bottom: 24px diff --git a/src/ts/lib/LauncherLib.ts b/src/ts/lib/LauncherLib.ts index a7dc77b..74e6787 100644 --- a/src/ts/lib/LauncherLib.ts +++ b/src/ts/lib/LauncherLib.ts @@ -36,6 +36,7 @@ const config = new store ({ gamemode: false, // GameMode gpu: 'default', // GPU autodelete_dxvk_logs: false, // Auto-delete DXVK logs + darkmode: false, // Version of the game we asked about analytics last time, // or null if user said don't ask him again diff --git a/src/ts/settings.ts b/src/ts/settings.ts index e08d750..2124fad 100644 --- a/src/ts/settings.ts +++ b/src/ts/settings.ts @@ -22,14 +22,24 @@ $(() => { $('.settings')[0]!.scrollTop = document.getElementById(e.target.getAttribute('anchor'))!.offsetTop - 16; $('.menu-item').removeClass('menu-item-active'); - $(e.target).addClass('menu-item-active'); + $('.menu-item').removeClass('menu-item-active-dark'); + $(e.target).addClass( + LauncherLib.getConfig('darkmode') ? + 'menu-item-active-dark' : + 'menu-item-active' + ); }); $('.settings').on('scroll', () => { const anchor = $('.settings-item').filter((index, item) => $(item).offset()!.top < 180).last()[0]!.id; // 264 $('.menu-item').removeClass('menu-item-active'); - $(`.menu-item[anchor=${anchor}]`).addClass('menu-item-active'); + $('.menu-item').removeClass('menu-item-active-dark'); + $(`.menu-item[anchor=${anchor}]`).addClass( + LauncherLib.getConfig('darkmode') ? + 'menu-item-active-dark' : + 'menu-item-active' + ); }); /** @@ -105,6 +115,42 @@ $(() => { ipcRenderer.send('rpc-toggle'); }); + /** + * Dark Mode + */ + + let darkMode = LauncherLib.getConfig('darkmode'); + const toggledItem: string[] = + ['menu', 'menu-item', 'menu-item-active', + 'settings', 'list-item', 'selected-item', + 'select-options', 'checkbox', 'checkbox-disabled', + 'properties-list', 'button']; + + if (darkMode === true) { + $('#darkmode').addClass('checkbox-active'); + $('body').addClass('body-dark'); + toggledItem.forEach((e:string) =>{ + $(`.${e}`).addClass(`${e}-dark`); + }) + } + + if (darkMode === false) { + $('#darkmode').removeClass('checkbox-active'); + $('body').removeClass('body-dark'); + toggledItem.forEach((e:string) =>{ + $(`.${e}`).removeClass(`${e}-dark`); + }) + } + + + $('#darkmode').on('classChange', () => { + LauncherLib.updateConfig('darkmode', $('#darkmode').hasClass('checkbox-active')); + $('body').toggleClass('body-dark'); + toggledItem.forEach(e =>{ + $(`.${e}`).toggleClass(`${e}-dark`); + }) + }); + /** * Auto-delete DXVK logs */