mirror of
https://github.com/an-anime-team/an-anime-game-launcher.git
synced 2024-12-24 18:48:14 +03:00
Dark mode hacks
Fist iteration to implement dark mode in launcher's setting window
This commit is contained in:
parent
6c404236e7
commit
e9a269cd11
7 changed files with 188 additions and 6 deletions
|
@ -17,7 +17,7 @@
|
||||||
<title i18id="SettingsTitle">Settings</title>
|
<title i18id="SettingsTitle">Settings</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body class="body">
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="menu-item menu-item-active" anchor="general" i18id="General">General</div>
|
<div class="menu-item menu-item-active" anchor="general" i18id="General">General</div>
|
||||||
<div class="menu-item" anchor="enhancements" i18id="Enhancements">Enhancements</div>
|
<div class="menu-item" anchor="enhancements" i18id="Enhancements">Enhancements</div>
|
||||||
|
@ -109,6 +109,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="checkbox" id="darkmode">
|
||||||
|
Dark Mode
|
||||||
|
|
||||||
|
<div class="checkbox-mark">
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -152,6 +160,8 @@
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
"NoImages": "Tidak ada gambar ditambahkan",
|
"NoImages": "Tidak ada gambar ditambahkan",
|
||||||
"SettingsTitle": "Pengaturan",
|
"SettingsTitle": "Pengaturan",
|
||||||
"General": "Umum",
|
"General": "Umum",
|
||||||
"Enhancements": "Enhancements",
|
"Enhancements": "Peningkatan",
|
||||||
"WineVersion": "Versi Wine",
|
"WineVersion": "Versi Wine",
|
||||||
"Environment": "Lingkungan",
|
"Environment": "Lingkungan",
|
||||||
"EnvironmentalVariables": "Variabel Lingkungan",
|
"EnvironmentalVariables": "Variabel Lingkungan",
|
||||||
|
|
|
@ -10,6 +10,9 @@ body
|
||||||
::-webkit-scrollbar-track
|
::-webkit-scrollbar-track
|
||||||
background: #f1f1f1
|
background: #f1f1f1
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track-dark
|
||||||
|
background: #2E3440
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb
|
::-webkit-scrollbar-thumb
|
||||||
background: #888
|
background: #888
|
||||||
border-radius: 8px
|
border-radius: 8px
|
||||||
|
|
|
@ -3,6 +3,12 @@ $light2: #eff2ff
|
||||||
$primary: #657ef8
|
$primary: #657ef8
|
||||||
$secondary: #e1e7ff
|
$secondary: #e1e7ff
|
||||||
|
|
||||||
|
$dark: #3B4252
|
||||||
|
$dark2: #2E3440
|
||||||
|
$dark3: #4C566A
|
||||||
|
$dark-fg-disabled: #D8DEE9
|
||||||
|
$dark-fg: #ECEFF4
|
||||||
|
|
||||||
/* Editable list of properties */
|
/* Editable list of properties */
|
||||||
|
|
||||||
.properties-list
|
.properties-list
|
||||||
|
@ -76,6 +82,21 @@ $secondary: #e1e7ff
|
||||||
.button:not(:last-child)
|
.button:not(:last-child)
|
||||||
margin-right: 8px
|
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 of buttons */
|
||||||
|
|
||||||
.list-item
|
.list-item
|
||||||
|
@ -119,6 +140,12 @@ $secondary: #e1e7ff
|
||||||
|
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
|
.list-item-dark
|
||||||
|
background-color: $dark2
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: $dark
|
||||||
|
|
||||||
.list-item-active
|
.list-item-active
|
||||||
background-color: $primary !important
|
background-color: $primary !important
|
||||||
color: white !important
|
color: white !important
|
||||||
|
@ -182,12 +209,26 @@ $secondary: #e1e7ff
|
||||||
height: 12px
|
height: 12px
|
||||||
width: 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
|
.checkbox-disabled
|
||||||
background-color: $light
|
background-color: $light
|
||||||
|
|
||||||
.checkbox-mark
|
.checkbox-mark
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
|
.checkbox-disabled-dark
|
||||||
|
background-color: $dark
|
||||||
|
color: $dark3
|
||||||
|
|
||||||
|
.checkbox-mark
|
||||||
|
display: none
|
||||||
|
|
||||||
.checkbox-active
|
.checkbox-active
|
||||||
.checkbox-mark
|
.checkbox-mark
|
||||||
background-color: $primary
|
background-color: $primary
|
||||||
|
@ -270,6 +311,32 @@ $secondary: #e1e7ff
|
||||||
background-color: $light2
|
background-color: $light2
|
||||||
color: $primary
|
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
|
.selected-item
|
||||||
display: flex
|
display: flex
|
||||||
align-items: baseline
|
align-items: baseline
|
||||||
|
@ -298,6 +365,15 @@ $secondary: #e1e7ff
|
||||||
margin-left: 8px
|
margin-left: 8px
|
||||||
|
|
||||||
transform: rotate(90deg)
|
transform: rotate(90deg)
|
||||||
|
|
||||||
|
.selected-item-dark
|
||||||
|
background-color: $dark2
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: $dark
|
||||||
|
|
||||||
|
svg
|
||||||
|
filter: invert(100%)
|
||||||
|
|
||||||
.select-active
|
.select-active
|
||||||
.selected-item
|
.selected-item
|
||||||
|
@ -331,3 +407,10 @@ $secondary: #e1e7ff
|
||||||
&:hover
|
&:hover
|
||||||
background-color: $primary
|
background-color: $primary
|
||||||
color: white
|
color: white
|
||||||
|
|
||||||
|
.button-dark
|
||||||
|
background-color: $dark2
|
||||||
|
color: $dark-fg
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: $dark
|
|
@ -1,8 +1,15 @@
|
||||||
@import "basic"
|
@import "basic"
|
||||||
|
|
||||||
body
|
.body
|
||||||
background-color: rgb(245, 246, 251)
|
background-color: rgb(245, 246, 251)
|
||||||
|
|
||||||
|
.body-dark
|
||||||
|
background-color: #2E3440
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track
|
||||||
|
background: #2E3440
|
||||||
|
|
||||||
|
|
||||||
.menu
|
.menu
|
||||||
position: absolute
|
position: absolute
|
||||||
width: 200px
|
width: 200px
|
||||||
|
@ -13,9 +20,15 @@ body
|
||||||
margin: 16px 32px
|
margin: 16px 32px
|
||||||
padding: 12px 16px
|
padding: 12px 16px
|
||||||
|
|
||||||
background-color: white
|
|
||||||
border-radius: 16px
|
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
|
.menu-item
|
||||||
display: flex
|
display: flex
|
||||||
align-items: center
|
align-items: center
|
||||||
|
@ -25,13 +38,24 @@ body
|
||||||
padding: 0 12px
|
padding: 0 12px
|
||||||
|
|
||||||
border-radius: 12px
|
border-radius: 12px
|
||||||
|
color: black
|
||||||
|
|
||||||
font-size: 18px
|
font-size: 18px
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
|
.menu-item-dark
|
||||||
|
color: #ECEFF4
|
||||||
|
|
||||||
.menu-item-active,
|
.menu-item-active,
|
||||||
.menu-item:hover
|
.menu-item:hover
|
||||||
background-color: #eff2ff
|
background-color: #eff2ff
|
||||||
|
// background-color: #4C566A
|
||||||
|
color: #657ef8
|
||||||
|
|
||||||
|
.menu-item-active-dark,
|
||||||
|
.menu-item-dark:hover
|
||||||
|
//background-color: #eff2ff
|
||||||
|
background-color: #4C566A
|
||||||
color: #657ef8
|
color: #657ef8
|
||||||
|
|
||||||
.settings
|
.settings
|
||||||
|
@ -46,9 +70,24 @@ body
|
||||||
padding: 0 24px
|
padding: 0 24px
|
||||||
|
|
||||||
background-color: white
|
background-color: white
|
||||||
|
color: black
|
||||||
border-radius: 16px
|
border-radius: 16px
|
||||||
|
|
||||||
overflow: auto
|
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
|
.settings-item:last-child
|
||||||
margin-bottom: 24px
|
margin-bottom: 24px
|
||||||
|
|
|
@ -36,6 +36,7 @@ const config = new store ({
|
||||||
gamemode: false, // GameMode
|
gamemode: false, // GameMode
|
||||||
gpu: 'default', // GPU
|
gpu: 'default', // GPU
|
||||||
autodelete_dxvk_logs: false, // Auto-delete DXVK logs
|
autodelete_dxvk_logs: false, // Auto-delete DXVK logs
|
||||||
|
darkmode: false,
|
||||||
|
|
||||||
// Version of the game we asked about analytics last time,
|
// Version of the game we asked about analytics last time,
|
||||||
// or null if user said don't ask him again
|
// or null if user said don't ask him again
|
||||||
|
|
|
@ -22,14 +22,24 @@ $(() => {
|
||||||
$('.settings')[0]!.scrollTop = document.getElementById(e.target.getAttribute('anchor'))!.offsetTop - 16;
|
$('.settings')[0]!.scrollTop = document.getElementById(e.target.getAttribute('anchor'))!.offsetTop - 16;
|
||||||
|
|
||||||
$('.menu-item').removeClass('menu-item-active');
|
$('.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', () => {
|
$('.settings').on('scroll', () => {
|
||||||
const anchor = $('.settings-item').filter((index, item) => $(item).offset()!.top < 180).last()[0]!.id; // 264
|
const anchor = $('.settings-item').filter((index, item) => $(item).offset()!.top < 180).last()[0]!.id; // 264
|
||||||
|
|
||||||
$('.menu-item').removeClass('menu-item-active');
|
$('.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');
|
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
|
* Auto-delete DXVK logs
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in a new issue