Lncvrt-Games/launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add themes

Browse Source
This commit is contained in:
Lncvrt
2025-11-03 13:52:25 -07:00
parent 6734b47d71
commit 6005fa9348
7 changed files with 146 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/Globals.css
View File

@@ -1,7 +1,67 @@
@import "tailwindcss";
body {
@apply bg-[#0f0f0f] text-white select-none;
@apply bg-(--col0) text-white select-none;
}
.dark-theme {
--col0: rgb(8, 8, 8);
--col1: rgb(16, 16, 16);
--col2: rgb(32, 32, 32);
--col3: rgb(48, 48, 48);
--col4: rgb(64, 64, 64);
--col5: rgb(80, 80, 80);
--col6: rgb(96, 96, 96);
--col7: rgb(112, 112, 112);
--col8: rgb(128, 128, 128);
}
.red-theme {
--col0: rgb(32, 8, 8);
--col1: rgb(40, 16, 16);
--col2: rgb(56, 32, 32);
--col3: rgb(72, 48, 48);
--col4: rgb(88, 64, 64);
--col5: rgb(104, 80, 80);
--col6: rgb(120, 96, 96);
--col7: rgb(136, 112, 112);
--col8: rgb(152, 128, 128);
}
.green-theme {
--col0: rgb(8, 32, 8);
--col1: rgb(16, 40, 16);
--col2: rgb(32, 56, 32);
--col3: rgb(48, 72, 48);
--col4: rgb(64, 88, 64);
--col5: rgb(80, 104, 80);
--col6: rgb(96, 120, 96);
--col7: rgb(112, 136, 112);
--col8: rgb(128, 152, 128);
}
.blue-theme {
--col0: rgb(8, 8, 32);
--col1: rgb(16, 16, 40);
--col2: rgb(32, 32, 56);
--col3: rgb(48, 48, 72);
--col4: rgb(64, 64, 88);
--col5: rgb(80, 80, 104);
--col6: rgb(96, 96, 120);
--col7: rgb(112, 112, 136);
--col8: rgb(128, 128, 152);
}
.purple-theme {
--col0: rgb(20, 8, 32);
--col1: rgb(28, 16, 40);
--col2: rgb(44, 32, 56);
--col3: rgb(60, 48, 72);
--col4: rgb(76, 64, 88);
--col5: rgb(92, 80, 104);
--col6: rgb(108, 96, 120);
--col7: rgb(124, 112, 136);
--col8: rgb(140, 128, 152);
}
.button {
@@ -17,11 +77,11 @@ body {
}
::-webkit-scrollbar-track {
@apply bg-[#1f1f1f] rounded-lg;
@apply bg-(--col2) rounded-lg;
}
::-webkit-scrollbar-thumb {
@apply bg-[#555] w-1 rounded-lg active:bg-[#888];
@apply bg-(--col4) w-1 rounded-lg active:bg-(--col5);
}
@keyframes fadeIn {
@@ -51,15 +111,15 @@ body {
}
.popup-box {
@apply relative w-[60vw] h-[80vh] rounded-lg bg-[#161616] border border-[#323232] flex flex-col p-6;
@apply relative w-[60vw] h-[80vh] rounded-lg bg-(--col1) border border-(--col3) flex flex-col p-6;
}
.popup-content {
@apply flex-1 overflow-auto bg-[#242424] border border-[#484848] rounded-lg mt-4;
@apply flex-1 overflow-auto bg-(--col2) border border-(--col4) rounded-lg mt-4;
}
.popup-entry {
@apply relative h-fit bg-[#323232] m-2 p-2 rounded-lg border border-[#646464];
@apply relative h-fit bg-(--col3) m-2 p-2 rounded-lg border border-(--col5);
}
.popup-entry button {
@@ -67,7 +127,7 @@ body {
}
.close-button {
@apply flex justify-center items-center absolute bg-[#323232] hover:bg-[#484848] text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl left-2 top-2 transition-colors border border-[#484848] hover:border-[#646464];
@apply flex justify-center items-center absolute bg-(--col3) hover:bg-(--col4) text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl left-2 top-2 transition-colors border border-(--col4) hover:border-(--col5);
}
*:focus {
@@ -75,13 +135,13 @@ body {
}
.input-field {
@apply border-2 border-[#484848] rounded-md bg-[#242424] p-2 px-4 focus:border-blue-600 transition-colors;
@apply border-2 border-(--col4) rounded-md bg-(--col2) p-2 px-4 focus:border-blue-600 transition-colors;
}
.entry-info-item {
@apply flex flex-row items-center gap-1 bg-[rgb(16,16,16)] text-gray-300 py-1 px-2 rounded-lg w-fit text-[16px];
@apply flex flex-row items-center gap-1 bg-(--col1) text-gray-300 py-1 px-2 rounded-lg w-fit text-[16px];
}
.downloads-entry:hover .entry-info-item {
@apply bg-[rgb(32,32,32)];
@apply bg-(--col2);
}

4
src/app/Installs.css
View File

@@ -5,11 +5,11 @@
}
.downloads-scroll {
@apply h-[515px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto w-full;
@apply h-[515px] bg-(--col1) border border-(--col3) rounded-lg overflow-y-auto w-full;
}
.downloads-entry {
@apply flex justify-between items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-[#242424] hover:bg-[#323232] border border-[#484848] hover:border-[#565656];
@apply flex justify-between items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5);
}
.downloads-entry p.score {

2
src/app/componets/Setting.css
View File

@@ -5,7 +5,7 @@
}
.setting-checkbox {
@apply appearance-none w-full h-full border-2 border-[#484848] rounded-md bg-[#242424] transition-colors duration-200 cursor-pointer;
@apply appearance-none w-full h-full border-2 border-(--col4) rounded-md bg-(--col2) transition-colors duration-200 cursor-pointer;
}
.setting-checkbox:checked {

10
src/app/componets/Sidebar.css
View File

@@ -1,16 +1,16 @@
@import "tailwindcss";
.sidebar {
@apply fixed top-0 left-0 w-60 h-screen bg-[#161616] flex flex-col border-e border-[#242424] z-1;
@apply fixed top-0 left-0 w-60 h-screen bg-(--col1) flex flex-col border-e border-(--col2) z-1;
}
.sidebar-downloads {
@apply text-[#bdbdbd] fixed bottom-3 left-2 bg-[#242424] rounded-lg border border-[#323232] w-55 p-4 cursor-pointer transition-colors duration-[0.25s];
@apply text-[#bdbdbd] fixed bottom-3 left-2 bg-(--col2) rounded-lg border border-(--col3) w-55 p-4 cursor-pointer transition-colors duration-[0.25s];
}
.sidebar-downloads:hover {
@apply text-white;
@apply bg-[#323232] border-[#484848];
@apply bg-(--col3) border-(--col4);
}
.logo {
@@ -26,7 +26,7 @@
}
.link.active {
@apply bg-[#242424] border-[#323232];
@apply bg-(--col2) border-(--col3);
}
.link.active,
@@ -35,5 +35,5 @@
}
.link.active:hover {
@apply bg-[#323232] border-[#484848];
@apply bg-(--col3) border-(--col4);
}

16
src/app/layout.tsx
View File

@@ -343,7 +343,19 @@ export default function RootLayout ({
return (
<>
<html lang='en' className={roboto.className}>
<body>
<body
className={
normalConfig?.settings.theme === 1
? 'red-theme'
: normalConfig?.settings.theme === 2
? 'green-theme'
: normalConfig?.settings.theme === 3
? 'blue-theme'
: normalConfig?.settings.theme === 4
? 'purple-theme'
: 'dark-theme'
}
>
{loading ? (
<div className='w-screen h-screen flex items-center justify-center'>
{outdated ? (
@@ -408,7 +420,7 @@ export default function RootLayout ({
>
<Sidebar />
<div
className='relative z-2 ml-[239px] w-[761px] border-b border-[#242424] h-[33px] bg-[#161616]'
className='relative z-2 ml-[239px] w-[761px] border-b border-(--col3) h-[33px] bg-(--col1)'
style={{
display: platform() === 'windows' ? 'block' : 'none'
}}

55
src/app/settings/page.tsx
View File

@@ -9,6 +9,8 @@ export default function Settings () {
const [allowNotifications, setAllowNotifications] = useState(false)
const [alwaysShowGamesInSidebar, setAlwaysShowGamesInSidebar] =
useState(false)
const [theme, setTheme] = useState(0)
const [loaded, setLoaded] = useState(false)
const { normalConfig, setNormalConfig } = useGlobal()
@@ -19,6 +21,7 @@ export default function Settings () {
setAlwaysShowGamesInSidebar(
normalConfig.settings.alwaysShowGamesInSidebar
)
setTheme(normalConfig.settings.theme)
setLoaded(true)
break
}
@@ -29,15 +32,27 @@ export default function Settings () {
<>
<p className='text-3xl ml-4 mt-4'>Settings</p>
{loaded && (
<div className='ml-4 mt-4 bg-[#161616] border border-[#242424] rounded-lg p-4 w-fit h-fit'>
<div className='ml-4 mt-4 bg-(--col1) border border-(--col3) rounded-lg p-4 w-fit h-fit'>
<Setting
label='Allow sending notifications'
value={allowNotifications}
onChange={async () => {
while (normalConfig != null) {
setAllowNotifications(!allowNotifications)
normalConfig.settings.allowNotifications = !allowNotifications
await writeNormalConfig(normalConfig)
setNormalConfig({
...normalConfig,
settings: {
...normalConfig.settings,
allowNotifications: !allowNotifications
}
})
writeNormalConfig({
...normalConfig,
settings: {
...normalConfig.settings,
allowNotifications: !allowNotifications
}
})
break
}
}}
@@ -66,6 +81,40 @@ export default function Settings () {
}
}}
/>
<div>
<label className='text-lg'>Theme:</label>
<select
className='ml-2 bg-(--col2) border border-(--col4) rounded-md'
value={theme}
onChange={async e => {
const newTheme = parseInt(e.target.value)
while (normalConfig != null) {
setTheme(newTheme)
setNormalConfig({
...normalConfig,
settings: {
...normalConfig.settings,
theme: newTheme
}
})
writeNormalConfig({
...normalConfig,
settings: {
...normalConfig.settings,
theme: newTheme
}
})
break
}
}}
>
<option value={0}>Dark (default)</option>
<option value={1}>Red</option>
<option value={2}>Green</option>
<option value={3}>Blue</option>
<option value={4}>Purple</option>
</select>
</div>
</div>
)}
</>

3
src/app/types/SettingsType.ts
View File

@@ -1,6 +1,7 @@
export class SettingsType {
constructor(
public allowNotifications: boolean = true,
public alwaysShowGamesInSidebar: boolean = true
public alwaysShowGamesInSidebar: boolean = true,
public theme: number = 0
) { }
}