john-okeefe/Anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 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
Download Patch File Download Diff File Expand all files Collapse all files

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)