Skip to content

Commit cbc7ae8

Browse files
LynithDevLynithDev
committed
feat: Themes
1 parent 139f61f commit cbc7ae8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+374
-163
lines changed

‎apps/frontend/src/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import '@fontsource/poppins/600.css';
1010
import 'virtual:uno.css';
1111
import '@unocss/reset/tailwind.css';
1212
import 'overlayscrollbars/overlayscrollbars.css';
13+
import '~styles/themes.scss';
1314
import '~styles/globals.css';
1415
import '~styles/highlightjs.css';
1516

@@ -23,11 +24,9 @@ import { render } from 'solid-js/web';
2324
import RootLayout from './RootLayout';
2425
import HomePage from './ui/pages/Home';
2526
import UpdatesPage from './ui/pages/Updates';
26-
import { getProgramInfo, initProgramInfo } from '@onelauncher/client';
27+
import { initProgramInfo } from '@onelauncher/client';
2728

2829
initProgramInfo().finally(() => {
29-
document.body.setAttribute('data-platform', getProgramInfo().platform);
30-
3130
render(() => (
3231
<Router root={RootLayout}>
3332
<Route component={App}>

‎apps/frontend/src/styles/globals.css‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@ body {
22
@apply font-sans text-fg-primary text-md;
33
}
44

5+
body.theme-transition * {
6+
transition-delay: 0ms !important;
7+
transition-duration: 400ms !important;
8+
transition-property: color, border, background-color !important;
9+
}
10+
11+
body[data-platform="linux"].theme-transition * {
12+
transition-delay: 0ms !important;
13+
transition-duration: 400ms !important;
14+
transition-property: background-color !important;
15+
}
16+
517
/* start lynith's native experience (tm) */
618
* {
719
-webkit-user-select: none;
@@ -24,13 +36,13 @@ img {
2436
}
2537
/* end lynith's native experience (tm) */
2638

27-
/* lynith's epic webkit gtk <=2.44 fixer */
28-
body[data-platform="linux"] img {
29-
/* 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
30-
2.45 is the first version to use Skia for rendering, which prioritises the GPU over the CPU unlike Cairo */
39+
/* lynith's epic webkit gtk <=2.45 fixer */
40+
body[data-platform="linux"][data-skia-renderer="false"] img {
41+
/* 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
42+
2.46 is the first version to use Skia for rendering, which prioritises the GPU over the CPU unlike Cairo */
3143
@apply transform-gpu;
3244
}
33-
/* end lynith's epic webkit gtk <=2.44 fixer */
45+
/* end lynith's epic webkit gtk <=2.45 fixer */
3446

3547
h1 { @apply text-2xl font-semibold; line-height: 1.5 !important; }
3648
h2 { @apply text-xxl font-semibold; line-height: 1.25 !important; }

‎apps/frontend/src/styles/themes.scss‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
@mixin define-theme($name, $selectors: "") {
2+
$selector: "#{$selectors} [data-theme="#{$name}"], .theme-#{$name}";
3+
4+
#{$selector} {
5+
@content;
6+
}
7+
}
8+
9+
@include define-theme("dark", ":root,") {
10+
--clr-white: 255, 255, 255;
11+
--clr-black: 0, 0, 0;
12+
13+
--clr-border: 255, 255, 255;
14+
15+
--clr-fg-primary: 213, 219, 255;
16+
--clr-fg-primary-hover: 218, 224, 255;
17+
--clr-fg-primary-pressed: 225, 229, 255;
18+
--clr-fg-primary-disabled: 225, 229, 255, 0.5;
19+
20+
--clr-fg-secondary: 120, 129, 141;
21+
--clr-fg-secondary-hover: 95, 104, 116;
22+
--clr-fg-secondary-pressed: 130, 141, 155;
23+
--clr-fg-secondary-disabled: 120, 129, 141, 0.5;
24+
25+
--clr-brand: 43, 75, 255;
26+
--clr-brand-hover: 40, 67, 221;
27+
--clr-brand-pressed: 57, 87, 255;
28+
--clr-brand-disabled: 57, 87, 255, 0.5;
29+
30+
--clr-onbrand: 213, 219, 255;
31+
--clr-onbrand-hover: 218, 224, 255;
32+
--clr-onbrand-pressed: 225, 229, 255;
33+
--clr-onbrand-disabled: 225, 229, 255, 0.5;
34+
35+
--clr-danger: 255, 68, 68;
36+
--clr-danger-hover: 214, 52, 52;
37+
--clr-danger-pressed: 255, 86, 86;
38+
--clr-danger-disabled: 255, 68, 68, 0.5;
39+
40+
--clr-success: 35, 154, 96;
41+
--clr-success-hover: 26, 135, 82;
42+
--clr-success-pressed: 44, 172, 110;
43+
--clr-success-disabled: 35, 154, 96, 0.5;
44+
45+
--clr-component-bg: 26, 34, 41;
46+
--clr-component-bg-hover: 23, 31, 37;
47+
--clr-component-bg-pressed: 34, 44, 53;
48+
--clr-component-bg-disabled: 26, 34, 41, 0.5;
49+
50+
--clr-code-info: 97, 175, 239;
51+
--clr-code-warn: 229, 192, 123;
52+
--clr-code-error: 190, 80, 70;
53+
--clr-code-debug: 43, 75, 255;
54+
--clr-code-trace: 253, 253, 253;
55+
56+
--clr-link: 97, 175, 239;
57+
--clr-link-hover: 95, 135, 255;
58+
--clr-link-pressed: 114, 175, 255;
59+
--clr-link-disabled: 97, 175, 239, 0.5;
60+
61+
--clr-page: 17, 23, 28;
62+
--clr-page-elevated: 21, 28, 34;
63+
--clr-page-pressed: 14, 19, 23;
64+
65+
--clr-secondary: 25, 32, 38;
66+
}
67+
68+
@include define-theme("light") {
69+
--clr-white: 255, 255, 255;
70+
--clr-black: 0, 0, 0;
71+
72+
--clr-border: 40, 40, 40;
73+
74+
--clr-fg-primary: 40, 40, 40;
75+
--clr-fg-primary-hover: 30, 30, 30;
76+
--clr-fg-primary-pressed: 20, 20, 20;
77+
--clr-fg-primary-disabled: 40, 40, 40, 0.5;
78+
79+
--clr-fg-secondary: 80, 80, 80;
80+
--clr-fg-secondary-hover: 60, 60, 60;
81+
--clr-fg-secondary-pressed: 100, 100, 100;
82+
--clr-fg-secondary-disabled: 80, 80, 80, 0.5;
83+
84+
--clr-brand: 43, 75, 255;
85+
--clr-brand-hover: 35, 60, 200;
86+
--clr-brand-pressed: 30, 50, 170;
87+
--clr-brand-disabled: 43, 75, 255, 0.5;
88+
89+
--clr-onbrand: 255, 255, 255;
90+
--clr-onbrand-hover: 245, 245, 245;
91+
--clr-onbrand-pressed: 230, 230, 230;
92+
--clr-onbrand-disabled: 230, 230, 230, 0.5;
93+
94+
--clr-danger: 200, 50, 50;
95+
--clr-danger-hover: 180, 40, 40;
96+
--clr-danger-pressed: 220, 60, 60;
97+
--clr-danger-disabled: 200, 50, 50, 0.5;
98+
99+
--clr-success: 50, 160, 100;
100+
--clr-success-hover: 40, 140, 90;
101+
--clr-success-pressed: 60, 180, 110;
102+
--clr-success-disabled: 50, 160, 100, 0.5;
103+
104+
--clr-component-bg: 240, 240, 240;
105+
--clr-component-bg-hover: 230, 230, 230;
106+
--clr-component-bg-pressed: 220, 220, 220;
107+
--clr-component-bg-disabled: 240, 240, 240, 0.5;
108+
109+
--clr-code-info: 40, 120, 200;
110+
--clr-code-warn: 200, 150, 90;
111+
--clr-code-error: 180, 70, 60;
112+
--clr-code-debug: 40, 70, 200;
113+
--clr-code-trace: 40, 40, 40;
114+
115+
--clr-link: 40, 120, 200;
116+
--clr-link-hover: 30, 100, 180;
117+
--clr-link-pressed: 20, 80, 160;
118+
--clr-link-disabled: 40, 120, 200, 0.5;
119+
120+
--clr-page: 255, 255, 255;
121+
--clr-page-elevated: 245, 245, 245;
122+
--clr-page-pressed: 230, 230, 230;
123+
124+
--clr-secondary: 220, 220, 220;
125+
126+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ function Navbar() {
4141

4242
return (
4343
<div class="h-15 min-h-[60px] flex flex-row items-center *:flex-1">
44-
<div>
45-
<div class="w-min flex items-center justify-center transition-transform active:scale-90" onClick={() => open(WEBSITE)}>
44+
<div class="h-full flex items-center justify-start">
45+
<div class="h-full flex items-start justify-start transition-transform active:scale-90" onClick={() => open(WEBSITE)}>
4646
<PolyfrostFull />
4747
</div>
4848
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function Sidebar(props: SidebarProps) {
4848
return (
4949
<a
5050
class={
51-
`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'}`
51+
`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'}`
5252
}
5353
onClick={() => goto(link[2], link[3])}
5454
>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88

99
&__secondary, &__iconSecondary {
10-
@apply border box-border border-gray-05;
10+
@apply border box-border border-border/05;
1111
@apply text-fg-primary hover:text-fg-primary-hover active:text-fg-primary-pressed disabled:text-fg-primary-disabled;
1212
@apply bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed disabled:bg-component-bg-disabled;
1313
}
@@ -22,7 +22,7 @@
2222
}
2323

2424
&__ghost {
25-
@apply hover:bg-gray-05 [&[aria-checked="true"]]:bg-gray-10 active:bg-gray-10;
25+
@apply hover:bg-border/05 [&[aria-checked="true"]]:(bg-border/10) active:bg-border/10;
2626
}
2727

2828
&__icon, &__iconPrimary, &__iconSecondary, &__iconDanger {
@@ -41,7 +41,7 @@
4141
}
4242

4343
&__icon, &__iconSecondary {
44-
@apply hover:bg-gray-05 [&[aria-checked="true"]]:bg-gray-10 active:bg-gray-10;
44+
@apply hover:bg-border/05 [&[aria-checked="true"]]:bg-border/10 active:bg-border/10;
4545

4646
&:hover > * {
4747
@apply stroke-fg-primary-hover;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
@apply flex flex-row gap-x-1 items-center;
33

44
.box {
5-
@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;
5+
@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;
66

77
> svg {
88
@apply w-[18px] h-[18px] mt-px opacity-0 transition-opacity;
99
}
1010

1111
&.checked {
1212
@apply bg-brand hover:bg-brand-hover active:bg-brand-pressed border-transparent;
13-
13+
1414
> svg {
1515
@apply opacity-100;
1616
}
1717
}
1818

1919
}
20-
}
20+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
}
1111

1212
.dropdown_element {
13-
@apply bg-page-elevated rounded-lg border border-gray-05 p-1 shadow-md shadow-black/30 h-full;
13+
@apply bg-page-elevated rounded-lg border border-border/05 p-1 shadow-md shadow-black/30 h-full;
1414
}
1515

1616
.list {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ function Dropdown(props: DropdownProps) {
8282
<Index each={items()}>
8383
{(item, index) => (
8484
<div onClick={() => select(index)}>
85-
<div class="flex flex-row items-center justify-between gap-2 rounded-lg p-2 hover:bg-gray-05">
85+
<div class="flex flex-row items-center justify-between gap-2 rounded-lg p-2 hover:bg-border/05">
8686
{item()}
8787
<div class={styles.selected! + (selected() === index ? ` ${styles.visible}` : '')} />
8888
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.select_list {
2-
@apply bg-component-bg rounded-lg overflow-hidden border border-gray-05;
2+
@apply bg-component-bg rounded-lg overflow-hidden border border-border/05;
33

44
.row {
55
@apply min-h-4 py-1 px-2 text-left;
@@ -9,4 +9,4 @@
99
@apply bg-white/10;
1010
}
1111
}
12-
}
12+
}

0 commit comments

Comments
 (0)