john-okeefe/Anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

made dark mode default for every element

Browse Source
This commit is contained in:
John O'Keefe 2025-03-03 15:29:33 -05:00
parent baed9a4a67
commit dc01aa314c
2 changed files with 39 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/helperComponents/Anime.svelte
View File

@ -481,10 +481,10 @@
data-input-counter-decrement="quantity-input"
on:click={() =>
(currentAniListAnime.data.MediaList.progress -= 1)}
class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
>
<svg
class="w-3 h-3 text-gray-900 dark:text-white"
class="w-3 h-3 text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -531,10 +531,10 @@
data-input-counter-increment="quantity-input"
on:click={() =>
(currentAniListAnime.data.MediaList.progress += 1)}
class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
>
<svg
class="w-3 h-3 text-gray-900 dark:text-white"
class="w-3 h-3 text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -565,25 +565,7 @@
{/if}
</div>
<div>
<label
for="status"
class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Status</label
>
<select
id="status"
name="status"
class="border text-sm rounded-lg
block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400
text-white focus:ring-blue-500 focus:border-blue-500"
bind:value={startingAnilistStatusOption}
>
{#each statusOptions as option}
<option value={option}>{option.aniList}</option>
{/each}
</select>
</div>
</div>
<div
class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36"
@ -671,8 +653,8 @@
disabled={isSubmitting}
id="sync-button"
class="text-white {$submitSuccess
? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
: 'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
type="submit"
>
<svg
@ -699,8 +681,8 @@
</Button>
<Button
class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
hover:border-gray-600"
on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList();
return push("/");
@ -720,8 +702,8 @@
disabled={isSubmitting}
id="delete-button"
class="text-white bg-red-700 {$submitSuccess
? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
: 'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 focus:ring-4 focus:ring-red-800 dark:focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
on:click={deleteEntries}
>
<svg
@ -754,8 +736,8 @@
disabled={isSubmitting}
id="sync-button"
class="text-white {$submitSuccess
? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
: 'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
type="submit"
>
<svg
@ -782,8 +764,8 @@
</Button>
<Button
class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
hover:border-gray-600"
on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList();
return push("/");

48
frontend/src/helperComponents/Datepicker.svelte
View File

@ -50,19 +50,19 @@
function getFocusRingClass(color: Button["color"]): string {
switch (color) {
case "primary":
return "focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400";
return "focus:ring-2 focus:ring-primary-400";
case "blue":
return "focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400";
return "focus:ring-2 focus:ring-blue-400";
case "red":
return "focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400";
return "focus:ring-2 focus:ring-red-400";
case "green":
return "focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400";
return "focus:ring-2 focus:ring-green-400";
case "yellow":
return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
return "focus:ring-2 focus:ring-yellow-400";
case "purple":
return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
return "focus:ring-2 focus:ring-purple-400";
case "slate":
return "focus:ring-2 focus:ring-slate-500 dark:focus:ring-slate-400";
return "focus:ring-2 focus:ring-slate-400";
default:
return "";
}
@ -71,19 +71,19 @@
function getRangeBackgroundClass(color: Button["color"]): string {
switch (color) {
case "primary":
return "bg-primary-100 dark:bg-primary-900";
return "bg-primary-900";
case "blue":
return "bg-blue-100 dark:bg-blue-900";
return "bg-blue-900";
case "red":
return "bg-red-100 dark:bg-red-900";
return "bg-red-900";
case "green":
return "bg-green-100 dark:bg-green-900";
return "bg-green-900";
case "yellow":
return "bg-yellow-100 dark:bg-yellow-900";
return "bg-yellow-900";
case "purple":
return "bg-purple-100 dark:bg-purple-900";
return "bg-purple-900";
case "slate":
return "bg-slate-100 dark:bg-slate-900";
return "bg-slate-900";
default:
return "";
}
@ -297,7 +297,7 @@
<input
bind:this={inputElement}
type="text"
class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none bg-gray-700 text-white border-gray-600 {getFocusRingClass(
color,
)} {inputClass}"
{placeholder}
@ -313,13 +313,13 @@
/>
<button
type="button"
class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none"
class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 focus:outline-none"
on:click={() => (isOpen = !isOpen)}
{disabled}
aria-label={isOpen ? "Close date picker" : "Open date picker"}
>
<svg
class="w-4 h-4 text-gray-500 dark:text-gray-400"
class="w-4 h-4 text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
@ -339,14 +339,14 @@
id="datepicker-dropdown"
class="
{inline ? '' : 'absolute z-10 mt-1'}
bg-white dark:bg-gray-800 rounded-md shadow-lg"
bg-gray-800 rounded-md shadow-lg"
transition:fade={{ duration: 100 }}
role="dialog"
aria-label="Calendar"
>
<div class="p-4" role="application">
{#if title}
<h2 class="text-lg font-semibold mb-4 dark:text-white">
<h2 class="text-lg font-semibold mb-4 text-white">
{title}
</h2>
{/if}
@ -358,7 +358,7 @@
aria-label="Previous month"
>
<svg
class="w-3 h-3 rtl:rotate-180 text-white dark:text-white"
class="w-3 h-3 rtl:rotate-180 text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -373,7 +373,7 @@
>
</Button>
<h3
class="text-lg font-semibold dark:text-white"
class="text-lg font-semibold text-white"
aria-live="polite"
>
{currentMonth.toLocaleString(locale, {
@ -388,7 +388,7 @@
aria-label="Next month"
>
<svg
class="w-3 h-3 rtl:rotate-180 text-white dark:text-white"
class="w-3 h-3 rtl:rotate-180 text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -406,7 +406,7 @@
<div class="grid grid-cols-7 gap-1" role="grid">
{#each weekdays as day}
<div
class="text-center text-sm font-medium text-gray-500 dark:text-gray-400"
class="text-center text-sm font-medium text-gray-400"
role="columnheader"
>
{day}
@ -418,7 +418,7 @@
size="sm"
class="w-full h-8 {day.getMonth() !==
currentMonth.getMonth()
? 'text-gray-300 dark:text-gray-600'
? 'text-gray-600'
: ''} {isToday(day)
? 'font-bold'
: ''} {isInRange(day)