mirrors/an-anime-game-launcher
1
0
Fork 0
mirror of https://github.com/an-anime-team/an-anime-game-launcher.git synced 2024-12-25 11:08:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

Dark mode hacks

Browse source 
Fist iteration to implement dark mode in launcher's setting window
This commit is contained in:
shirin 2021-11-27 10:47:42 +07:00
parent 6c404236e7
commit e9a269cd11
7 changed files with 188 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/html/settings.html
View file

@ -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>
@ -154,6 +162,8 @@
</div> </div>
<br> <br>
<br>
</div> </div>
<div class="settings-item" id="runners"> <div class="settings-item" id="runners">

2
public/locales/id.json
View file

@ -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",

3
src/sass/basic.sass
View file

@ -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

83
src/sass/components.sass
View file

@ -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
@ -299,6 +366,15 @@ $secondary: #e1e7ff
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
color: white color: white
@ -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

43
src/sass/settings.sass
View file

@ -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

1
src/ts/lib/LauncherLib.ts
View file

@ -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

50
src/ts/settings.ts
View file

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