Skip to content

Commit 094e7a0

Browse files
C4illinC4illin
authored
Merge pull request #160 from C4illin/feature-light-theme
feat: add light theme
2 parents 291cfc8 + 72636c5 commit 094e7a0

File tree

5 files changed

+89
-40
lines changed

5 files changed

+89
-40
lines changed

‎src/components/base.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@ export const BaseHtml = ({
2727
/>
2828
<link rel="manifest" href="/site.webmanifest" />
2929
</head>
30-
<body class="w-full bg-gray-900 text-gray-200">{children}</body>
30+
<body class="w-full bg-neutral-900 text-neutral-200">{children}</body>
3131
</html>
3232
);

‎src/components/header.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ export const Header = ({
88
<ul class="flex gap-4 ">
99
<li>
1010
<a
11-
class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
11+
class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
1212
href="/history">
1313
History
1414
</a>
1515
</li>
1616
<li>
1717
<a
18-
class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
18+
class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
1919
href="/logoff">
2020
Logout
2121
</a>
@@ -27,15 +27,15 @@ export const Header = ({
2727
<ul class="flex gap-4">
2828
<li>
2929
<a
30-
class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
30+
class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
3131
href="/login">
3232
Login
3333
</a>
3434
</li>
3535
{accountRegistration ? (
3636
<li>
3737
<a
38-
class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
38+
class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
3939
href="/register">
4040
Register
4141
</a>
@@ -47,7 +47,7 @@ export const Header = ({
4747

4848
return (
4949
<header class="w-full p-4">
50-
<nav class="mx-auto flex max-w-4xl justify-between rounded bg-gray-900 p-4">
50+
<nav class="mx-auto flex max-w-4xl justify-between rounded bg-neutral-900 p-4">
5151
<ul>
5252
<li>
5353
<strong>

‎src/index.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -141,15 +141,15 @@ const app = new Elysia({
141141
<main class="mx-auto w-full max-w-4xl px-4">
142142
<h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
143143
<article class="article p-0">
144-
<header class="w-full bg-gray-800 p-4">Create your account</header>
144+
<header class="w-full bg-neutral-800 p-4">Create your account</header>
145145
<form method="post" action="/register" class="p-4">
146146
<fieldset class="mb-4 flex flex-col gap-4">
147147
<label class="flex flex-col gap-1">
148148
Email
149149
<input
150150
type="email"
151151
name="email"
152-
class="rounded bg-gray-800 p-3"
152+
class="rounded bg-neutral-800 p-3"
153153
placeholder="Email"
154154
autocomplete="email"
155155
required
@@ -160,7 +160,7 @@ const app = new Elysia({
160160
<input
161161
type="password"
162162
name="password"
163-
class="rounded bg-gray-800 p-3"
163+
class="rounded bg-neutral-800 p-3"
164164
placeholder="Password"
165165
autocomplete="current-password"
166166
required
@@ -172,7 +172,7 @@ const app = new Elysia({
172172
<footer class="p-4">
173173
Report any issues on{" "}
174174
<a
175-
class="text-lime-500 underline hover:text-lime-400"
175+
class="text-accent-500 underline hover:text-accent-400"
176176
href="https://github.com/C4illin/ConvertX"
177177
>
178178
GitHub
@@ -202,7 +202,7 @@ const app = new Elysia({
202202
<input
203203
type="email"
204204
name="email"
205-
class="rounded bg-gray-800 p-3"
205+
class="rounded bg-neutral-800 p-3"
206206
placeholder="Email"
207207
autocomplete="email"
208208
required
@@ -213,7 +213,7 @@ const app = new Elysia({
213213
<input
214214
type="password"
215215
name="password"
216-
class="rounded bg-gray-800 p-3"
216+
class="rounded bg-neutral-800 p-3"
217217
placeholder="Password"
218218
autocomplete="current-password"
219219
required
@@ -324,7 +324,7 @@ const app = new Elysia({
324324
<input
325325
type="email"
326326
name="email"
327-
class="rounded bg-gray-800 p-3"
327+
class="rounded bg-neutral-800 p-3"
328328
placeholder="Email"
329329
autocomplete="email"
330330
required
@@ -335,7 +335,7 @@ const app = new Elysia({
335335
<input
336336
type="password"
337337
name="password"
338-
class="rounded bg-gray-800 p-3"
338+
class="rounded bg-neutral-800 p-3"
339339
placeholder="Password"
340340
autocomplete="current-password"
341341
required
@@ -528,12 +528,12 @@ const app = new Elysia({
528528
<div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
529529
<table
530530
id="file-list"
531-
class="w-full table-auto rounded bg-gray-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800"
531+
class="w-full table-auto rounded bg-neutral-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"
532532
/>
533533
</div>
534534
<div
535535
id="dropzone"
536-
class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-gray-700 transition-all hover:border-gray-600 [&.dragover]:border-4 [&.dragover]:border-gray-500"
536+
class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-neutral-700 transition-all hover:border-neutral-600 [&.dragover]:border-4 [&.dragover]:border-neutral-500"
537537
>
538538
<span>
539539
<b>Choose a file</b> or drag it here
@@ -558,14 +558,14 @@ const app = new Elysia({
558558
name="convert_to_search"
559559
placeholder="Search for conversions"
560560
autocomplete="off"
561-
class="w-full rounded bg-gray-800 p-4"
561+
class="w-full rounded bg-neutral-800 p-4"
562562
/>
563563
<div class="select_container relative">
564-
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-gray-800 sm:h-[30vh]">
564+
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
565565
{Object.entries(getAllTargets()).map(
566566
([converter, targets]) => (
567567
<article
568-
class="convert_to_group w-full border-b border-gray-700 p-4 flex flex-col"
568+
class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
569569
data-converter={converter}
570570
>
571571
<header class="mb-2 w-full text-xl font-bold" safe>
@@ -576,7 +576,7 @@ const app = new Elysia({
576576
<button
577577
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
578578
tabindex={0}
579-
class="target rounded bg-gray-700 p-1 text-base hover:bg-gray-600"
579+
class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
580580
data-value={`${target},${converter}`}
581581
data-target={target}
582582
data-converter={converter}
@@ -629,11 +629,11 @@ const app = new Elysia({
629629
({ body }) => {
630630
return (
631631
<>
632-
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-gray-800 sm:h-[30vh]">
632+
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
633633
{Object.entries(getPossibleTargets(body.fileType)).map(
634634
([converter, targets]) => (
635635
<article
636-
class="convert_to_group w-full border-b border-gray-700 p-4 flex flex-col"
636+
class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
637637
data-converter={converter}
638638
>
639639
<header class="mb-2 w-full text-xl font-bold" safe>
@@ -644,7 +644,7 @@ const app = new Elysia({
644644
<button
645645
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
646646
tabindex={0}
647-
class="target rounded bg-gray-700 p-1 text-base hover:bg-gray-600"
647+
class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
648648
data-value={`${target},${converter}`}
649649
data-target={target}
650650
data-converter={converter}
@@ -893,7 +893,7 @@ const app = new Elysia({
893893
<main class="w-full px-4">
894894
<article class="article">
895895
<h1 class="mb-4 text-xl">Results</h1>
896-
<table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
896+
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
897897
<thead>
898898
<tr>
899899
<th class="px-4 py-2">Time</th>
@@ -912,7 +912,7 @@ const app = new Elysia({
912912
<td safe>{job.status}</td>
913913
<td>
914914
<a
915-
class="text-lime-500 underline hover:text-lime-400"
915+
class="text-accent-500 underline hover:text-accent-400"
916916
href={`/results/${job.id}`}
917917
>
918918
View
@@ -990,9 +990,9 @@ const app = new Elysia({
990990
<progress
991991
max={job.num_files}
992992
value={files.length}
993-
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-gray-700 bg-none text-lime-500 accent-lime-500 [&::-moz-progress-bar]:bg-gray-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-lime-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
993+
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
994994
/>
995-
<table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
995+
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
996996
<thead>
997997
<tr>
998998
<th class="px-4 py-2">Converted File Name</th>
@@ -1008,15 +1008,15 @@ const app = new Elysia({
10081008
<td safe>{file.status}</td>
10091009
<td>
10101010
<a
1011-
class="text-lime-500 underline hover:text-lime-400"
1011+
class="text-accent-500 underline hover:text-accent-400"
10121012
href={`/download/${outputPath}${file.output_file_name}`}
10131013
>
10141014
View
10151015
</a>
10161016
</td>
10171017
<td>
10181018
<a
1019-
class="text-lime-500 underline hover:text-lime-400"
1019+
class="text-accent-500 underline hover:text-accent-400"
10201020
href={`/download/${outputPath}${file.output_file_name}`}
10211021
download={file.output_file_name}
10221022
>
@@ -1093,9 +1093,9 @@ const app = new Elysia({
10931093
<progress
10941094
max={job.num_files}
10951095
value={files.length}
1096-
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-gray-700 bg-none text-lime-500 accent-lime-500 [&::-moz-progress-bar]:bg-gray-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-lime-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
1096+
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
10971097
/>
1098-
<table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
1098+
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
10991099
<thead>
11001100
<tr>
11011101
<th class="px-4 py-2">Converted File Name</th>
@@ -1111,15 +1111,15 @@ const app = new Elysia({
11111111
<td safe>{file.status}</td>
11121112
<td>
11131113
<a
1114-
class="text-lime-500 underline hover:text-lime-400"
1114+
class="text-accent-500 underline hover:text-accent-400"
11151115
href={`/download/${outputPath}${file.output_file_name}`}
11161116
>
11171117
View
11181118
</a>
11191119
</td>
11201120
<td>
11211121
<a
1122-
class="text-lime-500 underline hover:text-lime-400"
1122+
class="text-accent-500 underline hover:text-accent-400"
11231123
href={`/download/${outputPath}${file.output_file_name}`}
11241124
download={file.output_file_name}
11251125
>
@@ -1179,7 +1179,7 @@ const app = new Elysia({
11791179
<main class="w-full px-4">
11801180
<article class="article">
11811181
<h1 class="mb-4 text-xl">Converters</h1>
1182-
<table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800 [&_ul]:list-inside [&_ul]:list-disc">
1182+
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_ul]:list-inside [&_ul]:list-disc">
11831183
<thead>
11841184
<tr>
11851185
<th class="mx-4 my-2">Converter</th>

‎src/main.css‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,42 @@
44

55
@layer components {
66
.article {
7-
@apply p-4 mb-4 bg-gray-800/40 w-full mx-auto max-w-4xl rounded;
7+
@apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded;
88
}
99
.btn-primary {
10-
@apply bg-lime-500 text-black rounded p-4 hover:bg-lime-400 cursor-pointer;
10+
@apply bg-accent-500 text-contrast rounded p-4 hover:bg-accent-400 cursor-pointer transition-colors;
11+
}
12+
}
13+
14+
:root {
15+
--contrast: 255, 255, 255;
16+
--neutral-900: 243, 244, 246;
17+
--neutral-800: 229, 231, 235;
18+
--neutral-700: 209, 213, 219;
19+
--neutral-600: 156, 163, 175;
20+
--neutral-500: 180, 180, 180;
21+
--neutral-400: 75, 85, 99;
22+
--neutral-300: 55, 65, 81;
23+
--neutral-200: 31, 41, 55;
24+
--neutral-100: 17, 24, 39;
25+
--accent-400: 132, 204, 22;
26+
--accent-500: 101, 163, 13;
27+
--accent-600: 77, 124, 15;
28+
}
29+
30+
@media (prefers-color-scheme: dark) {
31+
:root {
32+
--contrast: 0, 0, 0;
33+
--neutral-900: 17, 24, 39;
34+
--neutral-800: 31, 41, 55;
35+
--neutral-700: 55, 65, 81;
36+
--neutral-600: 75, 85, 99;
37+
--neutral-500: 107, 114, 128;
38+
--neutral-300: 209, 213, 219;
39+
--neutral-400: 156, 163, 175;
40+
--neutral-200: 229, 231, 235;
41+
--accent-600: 101, 163, 13;
42+
--accent-500: 132, 204, 22;
43+
--accent-400: 163, 230, 53;
1144
}
1245
}

‎tailwind.config.js‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
/** @type {import('tailwindcss').Config} */
22
// eslint-disable-next-line no-undef
33
module.exports = {
4-
content: ['./src/**/*.{html,js,tsx,jsx,cjs,mjs}'],
4+
content: ["./src/**/*.{html,js,tsx,jsx,cjs,mjs}"],
55
theme: {
6-
extend: {},
6+
extend: {
7+
colors: {
8+
contrast: "rgba(var(--contrast))",
9+
"neutral-900": "rgba(var(--neutral-900))",
10+
"neutral-800": "rgba(var(--neutral-800))",
11+
"neutral-700": "rgba(var(--neutral-700))",
12+
"neutral-600": "rgba(var(--neutral-600))",
13+
"neutral-500": "rgba(var(--neutral-500))",
14+
"neutral-400": "rgba(var(--neutral-400))",
15+
"neutral-300": "rgba(var(--neutral-300))",
16+
"neutral-200": "rgba(var(--neutral-200))",
17+
"neutral-100": "rgba(var(--neutral-100))",
18+
"accent-600": "rgba(var(--accent-600))",
19+
"accent-500": "rgba(var(--accent-500))",
20+
"accent-400": "rgba(var(--accent-400))",
21+
},
22+
},
723
},
8-
plugins: [require('tailwind-scrollbar')],
9-
}
24+
plugins: [require("tailwind-scrollbar")],
25+
};

0 commit comments

Comments
 (0)