Skip to content

Commit d247cc5

Browse files
0x2E0x2E
authored
refactor: update color scheme (#91)
* refactor: update color variables and improve component styles for better UI consistency * doc: update screenshots
1 parent 887215d commit d247cc5

File tree

11 files changed

+64
-53
lines changed

11 files changed

+64
-53
lines changed

‎assets/screenshot-dark.png‎

-4.13 KB
Loading

‎assets/screenshot-light.png‎

-982 Bytes
Loading

‎frontend/src/app.css‎

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,24 @@
1010
color-scheme: 'light';
1111
--color-base-100: oklch(100% 0 0);
1212
--color-base-200: oklch(98% 0 0);
13-
--color-base-300: oklch(95% 0 0);
14-
--color-base-content: oklch(21% 0.006 285.885);
13+
--color-base-300: oklch(96% 0.001 286.375);
14+
--color-base-content: oklch(0% 0 0);
1515
--color-primary: oklch(42% 0.199 265.638);
16-
--color-primary-content: oklch(97% 0.014 254.604);
17-
--color-secondary: oklch(51% 0.262 276.966);
18-
--color-secondary-content: oklch(94% 0.028 342.258);
19-
--color-accent: oklch(64% 0.222 41.116);
20-
--color-accent-content: oklch(98% 0.016 73.684);
21-
--color-neutral: oklch(27% 0.006 286.033);
22-
--color-neutral-content: oklch(96% 0.001 286.375);
23-
--color-info: oklch(58% 0.158 241.966);
24-
--color-info-content: oklch(97% 0.013 236.62);
25-
--color-success: oklch(52% 0.154 150.069);
26-
--color-success-content: oklch(98% 0.018 155.826);
16+
--color-primary-content: oklch(100% 0 0);
17+
--color-secondary: oklch(42% 0.199 265.638);
18+
--color-secondary-content: oklch(100% 0 0);
19+
--color-accent: oklch(42% 0.199 265.638);
20+
--color-accent-content: oklch(100% 0 0);
21+
--color-neutral: oklch(92% 0.004 286.32);
22+
--color-neutral-content: oklch(0% 0 0);
23+
--color-info: oklch(68% 0.169 237.323);
24+
--color-info-content: oklch(100% 0 0);
25+
--color-success: oklch(62% 0.194 149.214);
26+
--color-success-content: oklch(100% 0 0);
2727
--color-warning: oklch(76% 0.188 70.08);
28-
--color-warning-content: oklch(98% 0.022 95.277);
29-
--color-error: oklch(50% 0.213 27.518);
30-
--color-error-content: oklch(97% 0.013 17.38);
28+
--color-warning-content: oklch(100% 0 0);
29+
--color-error: oklch(57% 0.245 27.325);
30+
--color-error-content: oklch(100% 0 0);
3131
--radius-selector: 0.25rem;
3232
--radius-field: 0.5rem;
3333
--radius-box: 0.5rem;
@@ -43,26 +43,26 @@
4343
default: false;
4444
prefersdark: false;
4545
color-scheme: 'dark';
46-
--color-base-100: oklch(21% 0.006 285.885);
47-
--color-base-200: oklch(14% 0.005 285.823);
48-
--color-base-300: oklch(0% 0 0);
49-
--color-base-content: oklch(87% 0.006 286.286);
46+
--color-base-100: oklch(14% 0.005 285.823);
47+
--color-base-200: oklch(21% 0.006 285.885);
48+
--color-base-300: oklch(27% 0.006 286.033);
49+
--color-base-content: oklch(92% 0.004 286.32);
5050
--color-primary: oklch(37% 0.146 265.522);
51-
--color-primary-content: oklch(97% 0.014 254.604);
52-
--color-secondary: oklch(45% 0.085 224.283);
53-
--color-secondary-content: oklch(98% 0.019 200.873);
54-
--color-accent: oklch(67.271% 0.167 35.791);
55-
--color-accent-content: oklch(13.454% 0.033 35.791);
56-
--color-neutral: oklch(27.441% 0.013 253.041);
57-
--color-neutral-content: oklch(85.488% 0.002 253.041);
58-
--color-info: oklch(50% 0.134 242.749);
59-
--color-info-content: oklch(97% 0.013 236.62);
60-
--color-success: oklch(44% 0.119 151.328);
61-
--color-success-content: oklch(98% 0.018 155.826);
62-
--color-warning: oklch(68% 0.162 75.834);
63-
--color-warning-content: oklch(98% 0.026 102.212);
64-
--color-error: oklch(50% 0.213 27.518);
65-
--color-error-content: oklch(97% 0.013 17.38);
51+
--color-primary-content: oklch(92% 0.004 286.32);
52+
--color-secondary: oklch(37% 0.146 265.522);
53+
--color-secondary-content: oklch(92% 0.004 286.32);
54+
--color-accent: oklch(37% 0.146 265.522);
55+
--color-accent-content: oklch(92% 0.004 286.32);
56+
--color-neutral: oklch(30% 0 0);
57+
--color-neutral-content: oklch(92% 0.004 286.32);
58+
--color-info: oklch(58% 0.158 241.966);
59+
--color-info-content: oklch(100% 0 0);
60+
--color-success: oklch(52% 0.154 150.069);
61+
--color-success-content: oklch(100% 0 0);
62+
--color-warning: oklch(79% 0.184 86.047);
63+
--color-warning-content: oklch(100% 0 0);
64+
--color-error: oklch(57% 0.245 27.325);
65+
--color-error-content: oklch(100% 0 0);
6666
--radius-selector: 0.25rem;
6767
--radius-field: 0.5rem;
6868
--radius-box: 0.5rem;
@@ -77,6 +77,20 @@ html {
7777
@apply font-sans;
7878
}
7979

80-
body {
81-
@apply bg-base-200;
80+
@utility modal {
81+
.modal-box {
82+
@apply border-neutral border;
83+
}
84+
85+
&.modal-open,
86+
&[open],
87+
&:target {
88+
background-color: oklch(0% 0 0 / 0.8);
89+
}
90+
}
91+
92+
@utility btn-ghost {
93+
&:hover {
94+
@apply bg-neutral;
95+
}
8296
}

‎frontend/src/lib/components/ItemList.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
<li class="group rounded-md">
4949
<a
5050
href={'/items/' + item.id}
51-
class="hover:bg-base-300 relative flex w-full flex-col items-center justify-between space-y-1 space-x-2 rounded-md px-2 py-2 transition-colors md:flex-row"
51+
class="hover:bg-base-200 relative flex w-full flex-col items-center justify-between space-y-1 space-x-2 rounded-md px-2 py-2 transition-colors md:flex-row"
5252
>
5353
<div class="flex w-full md:w-[80%] md:shrink-0">
5454
<h2

‎frontend/src/lib/components/PageNavHeader.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
let { title, children, showSearch }: Props = $props();
1313
</script>
1414

15-
<header class="bg-base-100 border-base-300 sticky top-0 z-50 border-b py-2">
15+
<header class="bg-base-100 border-neutral sticky top-0 z-50 border-b py-2">
1616
<div class="flex flex-col justify-between px-1 md:px-4 lg:flex-row lg:items-center lg:px-8">
1717
<div class="flex items-center justify-between gap-4">
1818
<label for="sidebar-toggle" class="btn btn-ghost btn-square lg:hidden">

‎frontend/src/lib/components/Sidebar.svelte‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
<a
7171
href="https://github.com/0x2E/fusion"
7272
target="_blank"
73-
class="btn btn-ghost hover:bg-base-content/10 flex items-center justify-start gap-2"
73+
class="btn btn-ghost flex items-center justify-start gap-2"
7474
>
7575
<img src="/icon-96.png" alt="icon" class="w-6" />
7676
<span class="text-lg font-bold">Fusion</span>
@@ -84,7 +84,7 @@
8484
onclick={() => {
8585
toggleShow();
8686
}}
87-
class="btn btn-sm bg-base-100 hover:bg-base-content/10"
87+
class="btn btn-sm btn-ghost bg-base-100"
8888
>
8989
<CirclePlus class="size-4" />
9090
<span>Add Feeds</span>
@@ -111,10 +111,11 @@
111111
<span class="line-clamp-1">{group.name}</span>
112112
</summary>
113113
<ul>
114-
{#each feeds.filter((v) => v.group.id === group.id).sort((a, b) => a.name.localeCompare(b.name)) as feed}
115-
{@const domain = new URL(feed.link).hostname}
114+
{#each feeds
115+
.filter((v) => v.group.id === group.id)
116+
.sort((a, b) => a.name.localeCompare(b.name)) as feed}
116117
{@const textColor = feed.suspended
117-
? 'text-base-content/60'
118+
? 'text-neutral-content/60'
118119
: feed.failure
119120
? 'text-error'
120121
: ''}

‎frontend/src/lib/components/ThemeController.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
});
88
</script>
99

10-
<label class="btn btn-ghost btn-square swap swap-rotate hover:bg-base-100">
10+
<label class="btn btn-ghost btn-square swap swap-rotate hover:bg-neutral">
1111
<!-- this hidden checkbox controls the state -->
1212
<input type="checkbox" class="theme-controller" value="dark" bind:checked={isDark} />
1313

‎frontend/src/routes/(authed)/+layout.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="drawer lg:drawer-open">
1414
<input id="sidebar-toggle" type="checkbox" bind:checked={showSidebar} class="drawer-toggle" />
1515
<div class="drawer-content bg-base-100 relative z-10 min-h-screen overflow-x-clip">
16-
<div class="mx-auto h-full max-w-6xl pb-4">
16+
<div class="mx-auto flex h-full max-w-6xl flex-col pb-4">
1717
{@render children()}
1818
</div>
1919
</div>

‎frontend/src/routes/(authed)/items/[id]/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
<ItemActionVisitLink {data} />
9494
</PageNavHeader>
9595

96-
<div class="relative flex h-full w-full justify-around px-4 py-6">
96+
<div class="relative flex w-full grow justify-around px-4 py-6">
9797
<ItemSwitcher itemID={data.id} action="previous" />
9898
<article class="w-full max-w-prose">
9999
<p class="text-base-content/60 flex flex-col text-sm md:flex-row">

‎frontend/src/routes/(authed)/settings/+page.svelte‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,7 @@
3838
<ul class="menu rounded-box sticky top-10 w-full">
3939
{#each links as link}
4040
<li>
41-
<a
42-
href={link.hash}
43-
class="font-medium"
44-
class:menu-active={page.url.hash === link.hash}
45-
>
41+
<a href={link.hash} class={`${page.url.hash === link.hash ? 'font-semibold' : ''}`}>
4642
{link.label}
4743
</a>
4844
</li>

0 commit comments

Comments
 (0)