feat: Themes

apps/frontend/src/index.tsx

@@ -10,6 +10,7 @@ import '@fontsource/poppins/600.css';
 import 'virtual:uno.css';
 import '@unocss/reset/tailwind.css';
 import 'overlayscrollbars/overlayscrollbars.css';
+import '~styles/themes.scss';
 import '~styles/globals.css';
 import '~styles/highlightjs.css';
 
@@ -23,11 +24,9 @@ import { render } from 'solid-js/web';
 import RootLayout from './RootLayout';
 import HomePage from './ui/pages/Home';
 import UpdatesPage from './ui/pages/Updates';
-import { getProgramInfo, initProgramInfo } from '@onelauncher/client';
+import { initProgramInfo } from '@onelauncher/client';
 
 initProgramInfo().finally(() => {
-	document.body.setAttribute('data-platform', getProgramInfo().platform);
-
 	render(() => (
 		<Router root={RootLayout}>
 			<Route component={App}>

apps/frontend/src/styles/globals.css

@@ -2,6 +2,18 @@ body {
     @apply font-sans text-fg-primary text-md;
 }
 
+body.theme-transition * {
+	transition-delay: 0ms !important;
+	transition-duration: 400ms !important;
+	transition-property: color, border, background-color !important;
+}
+
+body[data-platform="linux"].theme-transition * {
+	transition-delay: 0ms !important;
+	transition-duration: 400ms !important;
+	transition-property: background-color !important;
+}
+
 /* start lynith's native experience (tm) */
 * {
     -webkit-user-select: none;
@@ -24,13 +36,13 @@ img {
 }
 /* end lynith's native experience (tm) */
 
-/* lynith's epic webkit gtk <=2.44 fixer */
-body[data-platform="linux"] img {
-	/* Forces webkit gtk to use the GPU for image rendering, should speed up loading of some pages. Temporary until Tauri updates to at least 2.45
-	2.45 is the first version to use Skia for rendering, which prioritises the GPU over the CPU unlike Cairo */
+/* lynith's epic webkit gtk <=2.45 fixer */
+body[data-platform="linux"][data-skia-renderer="false"] img {
+	/* Forces webkit gtk to use the GPU for image rendering, should speed up loading of some pages. Temporary until Tauri updates to at least 2.46
+	2.46 is the first version to use Skia for rendering, which prioritises the GPU over the CPU unlike Cairo */
 	@apply transform-gpu;
 }
-/* end lynith's epic webkit gtk <=2.44 fixer */
+/* end lynith's epic webkit gtk <=2.45 fixer */
 
 h1 { @apply text-2xl font-semibold; line-height: 1.5 !important; }
 h2 { @apply text-xxl font-semibold; line-height: 1.25 !important; }

apps/frontend/src/styles/themes.scss

@@ -0,0 +1,126 @@
+@mixin define-theme($name, $selectors: "") {
+	$selector: "#{$selectors} [data-theme="#{$name}"], .theme-#{$name}";
+
+	#{$selector} {
+		@content;
+	}
+}
+
+@include define-theme("dark", ":root,") {
+	--clr-white: 255, 255, 255;
+	--clr-black: 0, 0, 0;
+
+	--clr-border: 255, 255, 255;
+
+	--clr-fg-primary: 213, 219, 255;
+	--clr-fg-primary-hover: 218, 224, 255;
+	--clr-fg-primary-pressed: 225, 229, 255;
+	--clr-fg-primary-disabled: 225, 229, 255, 0.5;
+
+	--clr-fg-secondary: 120, 129, 141;
+	--clr-fg-secondary-hover: 95, 104, 116;
+	--clr-fg-secondary-pressed: 130, 141, 155;
+	--clr-fg-secondary-disabled: 120, 129, 141, 0.5;
+
+	--clr-brand: 43, 75, 255;
+	--clr-brand-hover: 40, 67, 221;
+	--clr-brand-pressed: 57, 87, 255;
+	--clr-brand-disabled: 57, 87, 255, 0.5;
+
+	--clr-onbrand: 213, 219, 255;
+	--clr-onbrand-hover: 218, 224, 255;
+	--clr-onbrand-pressed: 225, 229, 255;
+	--clr-onbrand-disabled: 225, 229, 255, 0.5;
+
+	--clr-danger: 255, 68, 68;
+	--clr-danger-hover: 214, 52, 52;
+	--clr-danger-pressed: 255, 86, 86;
+	--clr-danger-disabled: 255, 68, 68, 0.5;
+
+	--clr-success: 35, 154, 96;
+	--clr-success-hover: 26, 135, 82;
+	--clr-success-pressed: 44, 172, 110;
+	--clr-success-disabled: 35, 154, 96, 0.5;
+
+	--clr-component-bg: 26, 34, 41;
+	--clr-component-bg-hover: 23, 31, 37;
+	--clr-component-bg-pressed: 34, 44, 53;
+	--clr-component-bg-disabled: 26, 34, 41, 0.5;
+
+	--clr-code-info: 97, 175, 239;
+	--clr-code-warn: 229, 192, 123;
+	--clr-code-error: 190, 80, 70;
+	--clr-code-debug: 43, 75, 255;
+	--clr-code-trace: 253, 253, 253;
+
+	--clr-link: 97, 175, 239;
+	--clr-link-hover: 95, 135, 255;
+	--clr-link-pressed: 114, 175, 255;
+	--clr-link-disabled: 97, 175, 239, 0.5;
+
+	--clr-page: 17, 23, 28;
+	--clr-page-elevated: 21, 28, 34;
+	--clr-page-pressed: 14, 19, 23;
+
+	--clr-secondary: 25, 32, 38;
+}
+
+@include define-theme("light") {
+	--clr-white: 255, 255, 255;
+	--clr-black: 0, 0, 0;
+
+	--clr-border: 40, 40, 40;
+
+	--clr-fg-primary: 40, 40, 40;
+	--clr-fg-primary-hover: 30, 30, 30;
+	--clr-fg-primary-pressed: 20, 20, 20;
+	--clr-fg-primary-disabled: 40, 40, 40, 0.5;
+
+	--clr-fg-secondary: 80, 80, 80;
+	--clr-fg-secondary-hover: 60, 60, 60;
+	--clr-fg-secondary-pressed: 100, 100, 100;
+	--clr-fg-secondary-disabled: 80, 80, 80, 0.5;
+
+	--clr-brand: 43, 75, 255;
+	--clr-brand-hover: 35, 60, 200;
+	--clr-brand-pressed: 30, 50, 170;
+	--clr-brand-disabled: 43, 75, 255, 0.5;
+
+	--clr-onbrand: 255, 255, 255;
+	--clr-onbrand-hover: 245, 245, 245;
+	--clr-onbrand-pressed: 230, 230, 230;
+	--clr-onbrand-disabled: 230, 230, 230, 0.5;
+
+	--clr-danger: 200, 50, 50;
+	--clr-danger-hover: 180, 40, 40;
+	--clr-danger-pressed: 220, 60, 60;
+	--clr-danger-disabled: 200, 50, 50, 0.5;
+
+	--clr-success: 50, 160, 100;
+	--clr-success-hover: 40, 140, 90;
+	--clr-success-pressed: 60, 180, 110;
+	--clr-success-disabled: 50, 160, 100, 0.5;
+
+	--clr-component-bg: 240, 240, 240;
+	--clr-component-bg-hover: 230, 230, 230;
+	--clr-component-bg-pressed: 220, 220, 220;
+	--clr-component-bg-disabled: 240, 240, 240, 0.5;
+
+	--clr-code-info: 40, 120, 200;
+	--clr-code-warn: 200, 150, 90;
+	--clr-code-error: 180, 70, 60;
+	--clr-code-debug: 40, 70, 200;
+	--clr-code-trace: 40, 40, 40;
+
+	--clr-link: 40, 120, 200;
+	--clr-link-hover: 30, 100, 180;
+	--clr-link-pressed: 20, 80, 160;
+	--clr-link-disabled: 40, 120, 200, 0.5;
+
+	--clr-page: 255, 255, 255;
+	--clr-page-elevated: 245, 245, 245;
+	--clr-page-pressed: 230, 230, 230;
+
+	--clr-secondary: 220, 220, 220;
+
+}

apps/frontend/src/ui/components/Navbar.tsx

@@ -41,8 +41,8 @@ function Navbar() {
 
 	return (
 		<div class="h-15 min-h-[60px] flex flex-row items-center *:flex-1">
-			<div>
-				<div class="w-min flex items-center justify-center transition-transform active:scale-90" onClick={() => open(WEBSITE)}>
+			<div class="h-full flex items-center justify-start">
+				<div class="h-full flex items-start justify-start transition-transform active:scale-90" onClick={() => open(WEBSITE)}>
 					<PolyfrostFull />
 				</div>
 			</div>

apps/frontend/src/ui/components/Sidebar.tsx

@@ -48,7 +48,7 @@ function Sidebar(props: SidebarProps) {
 										return (
 											<a
 												class={
-													`px-3 py-1 rounded-md text-md border hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2], link[3]) ? 'bg-component-bg border-gray-05' : 'border-transparent'}`
+													`px-3 py-1 rounded-md text-md border hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2], link[3]) ? 'bg-component-bg border-border/05' : 'border-transparent'}`
 												}
 												onClick={() => goto(link[2], link[3])}
 											>

apps/frontend/src/ui/components/base/Button.module.scss

@@ -7,7 +7,7 @@
     }
 
     &__secondary, &__iconSecondary {
-        @apply border box-border border-gray-05;
+        @apply border box-border border-border/05;
         @apply text-fg-primary hover:text-fg-primary-hover active:text-fg-primary-pressed disabled:text-fg-primary-disabled;
         @apply bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed disabled:bg-component-bg-disabled;
     }
@@ -22,7 +22,7 @@
 	}
 
     &__ghost {
-        @apply hover:bg-gray-05 [&[aria-checked="true"]]:bg-gray-10 active:bg-gray-10;
+        @apply hover:bg-border/05 [&[aria-checked="true"]]:(bg-border/10) active:bg-border/10;
     }
 
     &__icon, &__iconPrimary, &__iconSecondary, &__iconDanger {
@@ -41,7 +41,7 @@
     }
 
     &__icon, &__iconSecondary {
-        @apply hover:bg-gray-05 [&[aria-checked="true"]]:bg-gray-10 active:bg-gray-10;
+        @apply hover:bg-border/05 [&[aria-checked="true"]]:bg-border/10 active:bg-border/10;
 
         &:hover > * {
             @apply stroke-fg-primary-hover;

apps/frontend/src/ui/components/base/Checkbox.module.scss

@@ -2,19 +2,19 @@
     @apply flex flex-row gap-x-1 items-center;
 
     .box {
-        @apply w-[18px] h-[18px] flex flex-col justify-center items-center rounded-md bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-05 transition-all;
+        @apply w-[18px] h-[18px] flex flex-col justify-center items-center rounded-md bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-border/05 transition-all;
 
         > svg {
             @apply w-[18px] h-[18px] mt-px opacity-0 transition-opacity;
         }
 
         &.checked {
             @apply bg-brand hover:bg-brand-hover active:bg-brand-pressed border-transparent;
-        
+
             > svg {
                 @apply opacity-100;
             }
         }
 
     }
-}
+}

apps/frontend/src/ui/components/base/Dropdown.module.scss

@@ -10,7 +10,7 @@
     }
 
     .dropdown_element {
-        @apply bg-page-elevated rounded-lg border border-gray-05 p-1 shadow-md shadow-black/30 h-full;
+        @apply bg-page-elevated rounded-lg border border-border/05 p-1 shadow-md shadow-black/30 h-full;
     }
 
     .list {

apps/frontend/src/ui/components/base/Dropdown.tsx

@@ -82,7 +82,7 @@ function Dropdown(props: DropdownProps) {
 						<Index each={items()}>
 							{(item, index) => (
 								<div onClick={() => select(index)}>
-									<div class="flex flex-row items-center justify-between gap-2 rounded-lg p-2 hover:bg-gray-05">
+									<div class="flex flex-row items-center justify-between gap-2 rounded-lg p-2 hover:bg-border/05">
 										{item()}
 										<div class={styles.selected! + (selected() === index ? ` ${styles.visible}` : '')} />
 									</div>

apps/frontend/src/ui/components/base/SelectList.module.scss

@@ -1,5 +1,5 @@
 .select_list {
-    @apply bg-component-bg rounded-lg overflow-hidden border border-gray-05;
+    @apply bg-component-bg rounded-lg overflow-hidden border border-border/05;
 
     .row {
         @apply min-h-4 py-1 px-2 text-left;
@@ -9,4 +9,4 @@
             @apply bg-white/10;
         }
     }
-}
+}

apps/frontend/src/ui/components/base/Tag.module.scss

@@ -1,6 +1,6 @@
 .tag {
     @apply flex flex-row justify-center items-center gap-x-2;
-    @apply bg-component-bg/60 border border-gray-05 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
+    @apply bg-component-bg/60 border border-border/05 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
 }
 
 .icon > * {

apps/frontend/src/ui/components/base/TextField.module.scss

@@ -1,6 +1,6 @@
 .textfield {
     @apply bg-component-bg [&:not(:focus-within)]:hover:bg-component-bg-hover focus-within:bg-component-bg-pressed disabled:bg-component-bg-disabled;
-    @apply border border-gray-05 text-fg-primary fill-fg-primary;
+    @apply border border-border/05 text-fg-primary fill-fg-primary;
     @apply rounded-lg px-2.5 py-1.5 min-h-8;
     @apply flex flex-row items-center justify-start gap-x-1.5;
     @apply text-sm;

apps/frontend/src/ui/components/base/Toggle.tsx

@@ -23,7 +23,7 @@ function Toggle(props: ToggleProps) {
 
 	return (
 		<div
-			class={`w-[40px] h-[22px] p-3 flex flex-row relative rounded-full transition-colors overflow-hidden ${checked() ? 'bg-brand' : 'bg-gray-10'}${` ${split.class}` || ''}`}
+			class={`w-[40px] h-[22px] p-3 flex flex-row relative rounded-full transition-colors overflow-hidden ${checked() ? 'bg-brand' : 'bg-border/10'}${` ${split.class}` || ''}`}
 			onClick={() => toggle()}
 			{...rest}
 		>

apps/frontend/src/ui/components/content/FormattedLog.tsx

@@ -43,7 +43,7 @@ function FormattedLog(props: FormattedLogProps) {
 	return (
 		<div class="relative h-full flex flex-1 flex-col overflow-hidden rounded-md bg-component-bg">
 			<Show when={props.enableAutoScroll === true}>
-				<div class="absolute right-0 top-0 z-1 h-6 w-full flex flex-row justify-end border border-gray-05 rounded-t-md bg-page p-px">
+				<div class="absolute right-0 top-0 z-1 h-6 w-full flex flex-row justify-end border border-border/05 rounded-t-md bg-page p-px">
 					<Button.Toggle
 						buttonStyle="icon"
 						checked={shouldScroll}

apps/frontend/src/ui/components/content/LauncherIcon.tsx

@@ -50,7 +50,7 @@ function LauncherIcon(props: LauncherIconProps) {
 		<Show
 			children={getLauncherLogoElement(split.launcher!)({ ...rest, ...(split.class ? { class: split.class } : {}) })}
 			fallback={(
-				<div class={`bg-gray-05 ${split.class || ''}`} {...rest as JSX.HTMLAttributes<HTMLDivElement>} />
+				<div class={`bg-border/05 ${split.class || ''}`} {...rest as JSX.HTMLAttributes<HTMLDivElement>} />
 			)}
 			when={split.launcher !== undefined}
 		/>

apps/frontend/src/ui/components/content/ProviderIcon.tsx

@@ -43,7 +43,7 @@ function ProviderIcon(props: ProviderIconProps) {
 				<Element />
 			)}
 			fallback={(
-				<div class={`bg-gray-05 ${split.class || ''}`} {...rest as JSX.HTMLAttributes<HTMLDivElement>} />
+				<div class={`bg-border/05 ${split.class || ''}`} {...rest as JSX.HTMLAttributes<HTMLDivElement>} />
 			)}
 			when={split.provider !== undefined}
 		/>

apps/frontend/src/ui/components/content/SearchResults.tsx

@@ -122,7 +122,7 @@ function PackageItem(props: SearchResult & { provider: Providers; row?: boolean
 				<Show
 					fallback={(
 						<div
-							class="aspect-ratio-square rounded-md bg-gray-05"
+							class="aspect-ratio-square rounded-md bg-border/05"
 							classList={{
 								'w-2/5': !props.row,
 								'w-3/4': props.row,

apps/frontend/src/ui/components/game/ClusterCover.module.scss

@@ -11,5 +11,5 @@
 	-webkit-mask: linear-gradient(var(--degrees), transparent, black 50%);
 	mask: linear-gradient(var(--degrees), transparent, black 50%);
 
-	background: linear-gradient(var(--degrees), transparent, rgba(0, 0, 0, 0.4) 50%);
+	background: linear-gradient(var(--degrees), transparent, rgba(0, 0, 0, 0.85) 80%);
 }

apps/frontend/src/ui/components/logos/PolyfrostFull.tsx

@@ -1,6 +1,6 @@
 function PolyfrostFull() {
 	return (
-		<svg fill="none" height="30" viewBox="0 0 174 30" width="174" xmlns="http://www.w3.org/2000/svg">
+		<svg class="h-full w-full" fill="none" height="30" viewBox="0 0 174 30" width="174" xmlns="http://www.w3.org/2000/svg">
 			<path clip-rule="evenodd" d="M22.86 16.6283L13.8843 1.08171C13.0516 -0.36057 11.689 -0.36057 10.8564 1.08171L0.947095 18.2464C-1.74381 22.9075 1.61965 28.7332 7.00145 28.7332H15.8719L22.8601 16.629L29.8482 28.7331H34.7491C38.7858 28.7331 41.3082 24.3637 39.2898 20.8681L31.3646 7.14161C30.532 5.70003 29.1701 5.70003 28.3374 7.14161L22.86 16.6283Z" fill="#0A5BE8" fill-rule="evenodd" />
 			<path d="M117.79 11.03H120.95V14.6499H117.92V24.3499H113.26V14.6499H111.32V11.03H113.26V10.6699C113.26 9 113.74 7.66992 114.69 6.67993C115.65 5.67993 117.02 5.17993 118.8 5.17993C119.37 5.17993 119.93 5.23999 120.49 5.35986C121.04 5.47998 121.51 5.65991 121.89 5.8999L120.73 9.31982C120.54 9.19995 120.32 9.09985 120.07 9.02002C119.83 8.94995 119.58 8.90991 119.34 8.90991C118.85 8.90991 118.47 9.05981 118.2 9.35986C117.93 9.6499 117.79 10.1099 117.79 10.72V11.03Z" fill="#0A5BE8" />
 			<path d="M131.74 10.29V14.6501L131.626 14.6343C131.457 14.6104 131.313 14.5901 131.19 14.5901C131.03 14.5801 130.86 14.5701 130.68 14.5701C129.74 14.5701 128.97 14.8401 128.38 15.3801C127.79 15.9102 127.5 16.79 127.5 17.99V24.3501H122.84V10.52H127.28V12.1799C127.61 11.72 128.03 11.3501 128.53 11.0601C129.41 10.55 130.48 10.29 131.74 10.29Z" fill="#0A5BE8" />

apps/frontend/src/ui/components/overlay/ContextMenu.tsx

@@ -36,7 +36,7 @@ function ContextMenu(props: ContextMenuProps) {
 			setVisible={props.setVisible}
 			visible={props.visible}
 		>
-			<div class="border border-gray-05 rounded-xl bg-page-elevated p-1 shadow-black/30 shadow-md" ref={setRef}>
+			<div class="border border-border/05 rounded-xl bg-page-elevated p-1 shadow-black/30 shadow-md" ref={setRef}>
 				<div class="flex flex-col gap-y-1 text-fg-primary">
 					{props.children}
 				</div>
@@ -46,7 +46,7 @@ function ContextMenu(props: ContextMenuProps) {
 }
 
 ContextMenu.Seperator = function () {
-	return <div class="mx-1 border-b border-gray-05" />;
+	return <div class="mx-1 border-b border-border/05" />;
 };
 
 interface ContextMenuRowProps {
@@ -58,7 +58,7 @@ interface ContextMenuRowProps {
 ContextMenu.Row = function (props: ContextMenuRowProps) {
 	return (
 		<div
-			class="m-px flex items-center gap-x-2 rounded-lg px-1.5 py-0.5 [&>svg]:w-[18px] active:bg-gray-10 hover:bg-gray-05"
+			class="m-px flex items-center gap-x-2 rounded-lg px-1.5 py-0.5 [&>svg]:w-[18px] active:bg-border/10 hover:bg-border/05"
 			onClick={e => props.onClick?.(e)}
 		>
 			{props.icon}