We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ConvertX
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: add light theme, fixes #156

C4illin 10 months ago
parent
291cfc80c6
commit
72636c5059
5 changed files with 89 additions and 40 deletions
Split View Show Diff Stats
  1. 1 1
      src/components/base.tsx
  2. 5 5
      src/components/header.tsx
  3. 28 28
      src/index.tsx
  4. 35 2
      src/main.css
  5. 20 4
      tailwind.config.js

+ 1 - 1
src/components/base.tsx
View File 

@@ -27,6 +27,6 @@ export const BaseHtml = ({
 
       />
 
       <link rel="manifest" href="/site.webmanifest" />
 
     </head>
 
-    <body class="w-full bg-gray-900 text-gray-200">{children}</body>
 
+    <body class="w-full bg-neutral-900 text-neutral-200">{children}</body>
 
   </html>
 
 );

+ 5 - 5
src/components/header.tsx
View File 

@@ -8,14 +8,14 @@ export const Header = ({
 
       <ul class="flex gap-4 ">
 
         <li>
 
           <a
 
-            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
 
+            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
 
             href="/history">
 
             History
 
           </a>
 
         </li>
 
         <li>
 
           <a
 
-            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
 
+            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
 
             href="/logoff">
 
             Logout
 
           </a>
 
@@ -27,7 +27,7 @@ export const Header = ({
 
       <ul class="flex gap-4">
 
         <li>
 
           <a
 
-            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
 
+            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
 
             href="/login">
 
             Login
 
           </a>
 
@@ -35,7 +35,7 @@ export const Header = ({
 
         {accountRegistration ? (
 
           <li>
 
             <a
 
-              class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
 
+              class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
 
               href="/register">
 
               Register
 
             </a>
 
@@ -47,7 +47,7 @@ export const Header = ({
 
 
   return (
 
     <header class="w-full p-4">
 
-      <nav class="mx-auto flex max-w-4xl justify-between rounded bg-gray-900 p-4">
 
+      <nav class="mx-auto flex max-w-4xl justify-between rounded bg-neutral-900 p-4">
 
         <ul>
 
           <li>
 
             <strong>

+ 28 - 28
src/index.tsx
View File 

@@ -141,7 +141,7 @@ const app = new Elysia({
 
         <main class="mx-auto w-full max-w-4xl px-4">
 
           <h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
 
           <article class="article p-0">
 
-            <header class="w-full bg-gray-800 p-4">Create your account</header>
 
+            <header class="w-full bg-neutral-800 p-4">Create your account</header>
 
             <form method="post" action="/register" class="p-4">
 
               <fieldset class="mb-4 flex flex-col gap-4">
 
                 <label class="flex flex-col gap-1">
 
@@ -149,7 +149,7 @@ const app = new Elysia({
 
                   <input
 
                     type="email"
 
                     name="email"
 
-                    class="rounded bg-gray-800 p-3"
 
+                    class="rounded bg-neutral-800 p-3"
 
                     placeholder="Email"
 
                     autocomplete="email"
 
                     required
 
@@ -160,7 +160,7 @@ const app = new Elysia({
 
                   <input
 
                     type="password"
 
                     name="password"
 
-                    class="rounded bg-gray-800 p-3"
 
+                    class="rounded bg-neutral-800 p-3"
 
                     placeholder="Password"
 
                     autocomplete="current-password"
 
                     required
 
@@ -172,7 +172,7 @@ const app = new Elysia({
 
             <footer class="p-4">
 
               Report any issues on{" "}
 
               <a
 
-                class="text-lime-500 underline hover:text-lime-400"
 
+                class="text-accent-500 underline hover:text-accent-400"
 
                 href="https://github.com/C4illin/ConvertX"
 
               >
 
                 GitHub
 
@@ -202,7 +202,7 @@ const app = new Elysia({
 
                     <input
 
                       type="email"
 
                       name="email"
 
-                      class="rounded bg-gray-800 p-3"
 
+                      class="rounded bg-neutral-800 p-3"
 
                       placeholder="Email"
 
                       autocomplete="email"
 
                       required
 
@@ -213,7 +213,7 @@ const app = new Elysia({
 
                     <input
 
                       type="password"
 
                       name="password"
 
-                      class="rounded bg-gray-800 p-3"
 
+                      class="rounded bg-neutral-800 p-3"
 
                       placeholder="Password"
 
                       autocomplete="current-password"
 
                       required
 
@@ -324,7 +324,7 @@ const app = new Elysia({
 
                     <input
 
                       type="email"
 
                       name="email"
 
-                      class="rounded bg-gray-800 p-3"
 
+                      class="rounded bg-neutral-800 p-3"
 
                       placeholder="Email"
 
                       autocomplete="email"
 
                       required
 
@@ -335,7 +335,7 @@ const app = new Elysia({
 
                     <input
 
                       type="password"
 
                       name="password"
 
-                      class="rounded bg-gray-800 p-3"
 
+                      class="rounded bg-neutral-800 p-3"
 
                       placeholder="Password"
 
                       autocomplete="current-password"
 
                       required
 
@@ -528,12 +528,12 @@ const app = new Elysia({
 
               <div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
 
                 <table
 
                   id="file-list"
 
-                  class="w-full table-auto rounded bg-gray-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800"
 
+                  class="w-full table-auto rounded bg-neutral-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"
 
                 />
 
               </div>
 
               <div
 
                 id="dropzone"
 
-                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"
 
+                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"
 
               >
 
                 <span>
 
                   <b>Choose a file</b> or drag it here
 
@@ -558,14 +558,14 @@ const app = new Elysia({
 
                   name="convert_to_search"
 
                   placeholder="Search for conversions"
 
                   autocomplete="off"
 
-                  class="w-full rounded bg-gray-800 p-4"
 
+                  class="w-full rounded bg-neutral-800 p-4"
 
                 />
 
                 <div class="select_container relative">
 
-                  <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]">
 
+                  <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]">
 
                     {Object.entries(getAllTargets()).map(
 
                       ([converter, targets]) => (
 
                         <article
 
-                          class="convert_to_group w-full border-b border-gray-700 p-4 flex flex-col"
 
+                          class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
 
                           data-converter={converter}
 
                         >
 
                           <header class="mb-2 w-full text-xl font-bold" safe>
 
@@ -576,7 +576,7 @@ const app = new Elysia({
 
                               <button
 
                                 // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
 
                                 tabindex={0}
 
-                                class="target rounded bg-gray-700 p-1 text-base hover:bg-gray-600"
 
+                                class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
 
                                 data-value={`${target},${converter}`}
 
                                 data-target={target}
 
                                 data-converter={converter}
 
@@ -629,11 +629,11 @@ const app = new Elysia({
 
     ({ body }) => {
 
       return (
 
         <>
 
-          <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]">
 
+          <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]">
 
             {Object.entries(getPossibleTargets(body.fileType)).map(
 
               ([converter, targets]) => (
 
                 <article
 
-                  class="convert_to_group w-full border-b border-gray-700 p-4 flex flex-col"
 
+                  class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
 
                   data-converter={converter}
 
                 >
 
                   <header class="mb-2 w-full text-xl font-bold" safe>
 
@@ -644,7 +644,7 @@ const app = new Elysia({
 
                       <button
 
                         // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
 
                         tabindex={0}
 
-                        class="target rounded bg-gray-700 p-1 text-base hover:bg-gray-600"
 
+                        class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
 
                         data-value={`${target},${converter}`}
 
                         data-target={target}
 
                         data-converter={converter}
 
@@ -893,7 +893,7 @@ const app = new Elysia({
 
           <main class="w-full px-4">
 
             <article class="article">
 
               <h1 class="mb-4 text-xl">Results</h1>
 
-              <table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
 
+              <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
 
                 <thead>
 
                   <tr>
 
                     <th class="px-4 py-2">Time</th>
 
@@ -912,7 +912,7 @@ const app = new Elysia({
 
                       <td safe>{job.status}</td>
 
                       <td>
 
                         <a
 
-                          class="text-lime-500 underline hover:text-lime-400"
 
+                          class="text-accent-500 underline hover:text-accent-400"
 
                           href={`/results/${job.id}`}
 
                         >
 
                           View
 
@@ -990,9 +990,9 @@ const app = new Elysia({
 
                 <progress
 
                   max={job.num_files}
 
                   value={files.length}
 
-                  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]"
 
+                  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]"
 
                 />
 
-                <table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
 
+                <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
 
                   <thead>
 
                     <tr>
 
                       <th class="px-4 py-2">Converted File Name</th>
 
@@ -1008,7 +1008,7 @@ const app = new Elysia({
 
                         <td safe>{file.status}</td>
 
                         <td>
 
                           <a
 
-                            class="text-lime-500 underline hover:text-lime-400"
 
+                            class="text-accent-500 underline hover:text-accent-400"
 
                             href={`/download/${outputPath}${file.output_file_name}`}
 
                           >
 
                             View
 
@@ -1016,7 +1016,7 @@ const app = new Elysia({
 
                         </td>
 
                         <td>
 
                           <a
 
-                            class="text-lime-500 underline hover:text-lime-400"
 
+                            class="text-accent-500 underline hover:text-accent-400"
 
                             href={`/download/${outputPath}${file.output_file_name}`}
 
                             download={file.output_file_name}
 
                           >
 
@@ -1093,9 +1093,9 @@ const app = new Elysia({
 
           <progress
 
             max={job.num_files}
 
             value={files.length}
 
-            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]"
 
+            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]"
 
           />
 
-          <table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
 
+          <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
 
             <thead>
 
               <tr>
 
                 <th class="px-4 py-2">Converted File Name</th>
 
@@ -1111,7 +1111,7 @@ const app = new Elysia({
 
                   <td safe>{file.status}</td>
 
                   <td>
 
                     <a
 
-                      class="text-lime-500 underline hover:text-lime-400"
 
+                      class="text-accent-500 underline hover:text-accent-400"
 
                       href={`/download/${outputPath}${file.output_file_name}`}
 
                     >
 
                       View
 
@@ -1119,7 +1119,7 @@ const app = new Elysia({
 
                   </td>
 
                   <td>
 
                     <a
 
-                      class="text-lime-500 underline hover:text-lime-400"
 
+                      class="text-accent-500 underline hover:text-accent-400"
 
                       href={`/download/${outputPath}${file.output_file_name}`}
 
                       download={file.output_file_name}
 
                     >
 
@@ -1179,7 +1179,7 @@ const app = new Elysia({
 
           <main class="w-full px-4">
 
             <article class="article">
 
               <h1 class="mb-4 text-xl">Converters</h1>
 
-              <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">
 
+              <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">
 
                 <thead>
 
                   <tr>
 
                     <th class="mx-4 my-2">Converter</th>

+ 35 - 2
src/main.css
View File 

@@ -4,9 +4,42 @@
 
 
 @layer components {
 
   .article {
 
-    @apply p-4 mb-4 bg-gray-800/40 w-full mx-auto max-w-4xl rounded;
 
+    @apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded;
 
   }
 
   .btn-primary {
 
-    @apply bg-lime-500 text-black rounded p-4 hover:bg-lime-400 cursor-pointer;
 
+    @apply bg-accent-500 text-contrast rounded p-4 hover:bg-accent-400 cursor-pointer transition-colors;
 
+  }
 
+}
 
+
 
+:root {
 
+    --contrast: 255, 255, 255;
 
+    --neutral-900: 243, 244, 246;
 
+    --neutral-800: 229, 231, 235;
 
+    --neutral-700: 209, 213, 219;
 
+    --neutral-600: 156, 163, 175;
 
+    --neutral-500: 180, 180, 180;
 
+    --neutral-400: 75, 85, 99;
 
+    --neutral-300: 55, 65, 81;
 
+    --neutral-200: 31, 41, 55;
 
+    --neutral-100: 17, 24, 39;
 
+    --accent-400: 132, 204, 22;
 
+    --accent-500: 101, 163, 13;
 
+    --accent-600: 77, 124, 15;
 
+  }
 
+
 
+@media (prefers-color-scheme: dark) {
 
+  :root {
 
+    --contrast: 0, 0, 0;
 
+    --neutral-900: 17, 24, 39;
 
+    --neutral-800: 31, 41, 55;
 
+    --neutral-700: 55, 65, 81;
 
+    --neutral-600: 75, 85, 99;
 
+    --neutral-500: 107, 114, 128;
 
+    --neutral-300: 209, 213, 219;
 
+    --neutral-400: 156, 163, 175;
 
+    --neutral-200: 229, 231, 235;
 
+    --accent-600: 101, 163, 13;
 
+    --accent-500: 132, 204, 22;
 
+    --accent-400: 163, 230, 53;
 
   }
 
 }

+ 20 - 4
tailwind.config.js
View File 

@@ -1,9 +1,25 @@
 
 /** @type {import('tailwindcss').Config} */
 
 // eslint-disable-next-line no-undef
 
 module.exports = {
 
-  content: ['./src/**/*.{html,js,tsx,jsx,cjs,mjs}'],
 
+  content: ["./src/**/*.{html,js,tsx,jsx,cjs,mjs}"],
 
   theme: {
 
-    extend: {},
 
+    extend: {
 
+      colors: {
 
+        contrast: "rgba(var(--contrast))",
 
+        "neutral-900": "rgba(var(--neutral-900))",
 
+        "neutral-800": "rgba(var(--neutral-800))",
 
+        "neutral-700": "rgba(var(--neutral-700))",
 
+        "neutral-600": "rgba(var(--neutral-600))",
 
+        "neutral-500": "rgba(var(--neutral-500))",
 
+        "neutral-400": "rgba(var(--neutral-400))",
 
+        "neutral-300": "rgba(var(--neutral-300))",
 
+        "neutral-200": "rgba(var(--neutral-200))",
 
+        "neutral-100": "rgba(var(--neutral-100))",
 
+        "accent-600": "rgba(var(--accent-600))",
 
+        "accent-500": "rgba(var(--accent-500))",
 
+        "accent-400": "rgba(var(--accent-400))",
 
+      },
 
+    },
 
   },
 
-  plugins: [require('tailwind-scrollbar')],
 
-}
 
+  plugins: [require("tailwind-scrollbar")],
 
+};

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5