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
-
+
+
+
@@ -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
*/