Add dark mode
This commit is contained in:
Carter McBride
parent
29bcc0ddca
commit
c3854d38e3
1 changed files with 61 additions and 31 deletions
|
|
@ -17,52 +17,52 @@ const categories = Array.from(
|
||||||
|
|
||||||
const accentColors = {
|
const accentColors = {
|
||||||
slate: {
|
slate: {
|
||||||
bg: "bg-slate-200",
|
bg: "bg-slate-200 dark:bg-slate-600",
|
||||||
bl: "border-l-slate-200",
|
bl: "border-l-slate-200 dark:border-l-slate-600",
|
||||||
},
|
},
|
||||||
stone: {
|
stone: {
|
||||||
bg: "bg-stone-200",
|
bg: "bg-stone-200 dark:bg-stone-600",
|
||||||
bl: "border-l-stone-200",
|
bl: "border-l-stone-200 dark:border-l-stone-600",
|
||||||
},
|
},
|
||||||
red: {
|
red: {
|
||||||
bg: "bg-red-200",
|
bg: "bg-red-200 dark:bg-red-600",
|
||||||
bl: "border-l-red-200",
|
bl: "border-l-red-200 dark:border-l-red-600",
|
||||||
},
|
},
|
||||||
amber: {
|
amber: {
|
||||||
bg: "bg-amber-200",
|
bg: "bg-amber-200 dark:bg-amber-600",
|
||||||
bl: "border-l-amber-200",
|
bl: "border-l-amber-200 dark:border-l-amber-600",
|
||||||
},
|
},
|
||||||
lime: {
|
lime: {
|
||||||
bg: "bg-lime-200",
|
bg: "bg-lime-200 dark:bg-lime-600",
|
||||||
bl: "border-l-lime-200",
|
bl: "border-l-lime-200 dark:border-l-lime-600",
|
||||||
},
|
},
|
||||||
emerald: {
|
emerald: {
|
||||||
bg: "bg-emerald-200",
|
bg: "bg-emerald-200 dark:bg-emerald-600",
|
||||||
bl: "border-l-emerald-200",
|
bl: "border-l-emerald-200 dark:border-l-emerald-600",
|
||||||
},
|
},
|
||||||
cyan: {
|
cyan: {
|
||||||
bg: "bg-cyan-200",
|
bg: "bg-cyan-200 dark:bg-cyan-600",
|
||||||
bl: "border-l-cyan-200",
|
bl: "border-l-cyan-200 dark:border-l-cyan-600",
|
||||||
},
|
},
|
||||||
sky: {
|
sky: {
|
||||||
bg: "bg-sky-200",
|
bg: "bg-sky-200 dark:bg-sky-600",
|
||||||
bl: "border-l-sky-200",
|
bl: "border-l-sky-200 dark:border-l-sky-600",
|
||||||
},
|
},
|
||||||
indigo: {
|
indigo: {
|
||||||
bg: "bg-indigo-200",
|
bg: "bg-indigo-200 dark:bg-indigo-600",
|
||||||
bl: "border-l-indigo-200",
|
bl: "border-l-indigo-200 dark:border-l-indigo-600",
|
||||||
},
|
},
|
||||||
fuchsia: {
|
fuchsia: {
|
||||||
bg: "bg-fuchsia-200",
|
bg: "bg-fuchsia-200 dark:bg-fuchsia-600",
|
||||||
bl: "border-l-fuchsia-200",
|
bl: "border-l-fuchsia-200 dark:border-l-fuchsia-600",
|
||||||
},
|
},
|
||||||
pink: {
|
pink: {
|
||||||
bg: "bg-pink-200",
|
bg: "bg-pink-200 dark:bg-pink-600",
|
||||||
bl: "border-l-pink-200",
|
bl: "border-l-pink-200 dark:border-l-pink-600",
|
||||||
},
|
},
|
||||||
rose: {
|
rose: {
|
||||||
bg: "bg-rose-200",
|
bg: "bg-rose-200 dark:bg-rose-600",
|
||||||
bl: "border-l-rose-200",
|
bl: "border-l-rose-200 dark:border-l-rose-600",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -105,7 +105,7 @@ const categoriesSelectorCss = ["Recent", ...categories]
|
||||||
<style set:html={categoriesSelectorCss}></style>
|
<style set:html={categoriesSelectorCss}></style>
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
class="font-system text-base md:grid grid-cols-12 auto-rows-min p-4 bg-orange-50 text-stone-700 font-semibold"
|
class="font-system text-base md:grid grid-cols-12 auto-rows-min p-4 bg-orange-50 dark:bg-slate-900 dark:text-slate-300 text-stone-700 font-semibold"
|
||||||
>
|
>
|
||||||
<header
|
<header
|
||||||
class="col-span-12 row-span-1 h-fit mb-4 flex flex-row gap-8 items-center"
|
class="col-span-12 row-span-1 h-fit mb-4 flex flex-row gap-8 items-center"
|
||||||
|
|
@ -158,15 +158,24 @@ const categoriesSelectorCss = ["Recent", ...categories]
|
||||||
{
|
{
|
||||||
"Recent-item": isRecent(item.pubIsoDate),
|
"Recent-item": isRecent(item.pubIsoDate),
|
||||||
},
|
},
|
||||||
"bg-orange-100",
|
|
||||||
"py-1 px-2",
|
|
||||||
"rounded-xl",
|
|
||||||
"flex flex-row gap-4 items-center",
|
"flex flex-row gap-4 items-center",
|
||||||
"border-l-8",
|
|
||||||
categoryColors[item.category].bl,
|
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<a href={item.link} class="">
|
<a
|
||||||
|
href={item.link}
|
||||||
|
class:list={[
|
||||||
|
"w-full",
|
||||||
|
"border-l-8",
|
||||||
|
categoryColors[item.category].bl,
|
||||||
|
"hover:bg-orange-200 dark:hover:bg-slate-600",
|
||||||
|
"transition-all",
|
||||||
|
"active:bg-orange-300 dark:active:bg-slate-500",
|
||||||
|
"bg-orange-100 dark:bg-slate-700",
|
||||||
|
"visited:opacity-50",
|
||||||
|
"py-1 px-2",
|
||||||
|
"rounded-xl",
|
||||||
|
]}
|
||||||
|
>
|
||||||
<div set:html={item.title} class="underline" />
|
<div set:html={item.title} class="underline" />
|
||||||
<div class="no-underline text-sm font-normal">
|
<div class="no-underline text-sm font-normal">
|
||||||
{[
|
{[
|
||||||
|
|
@ -181,5 +190,26 @@ const categoriesSelectorCss = ["Recent", ...categories]
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
|
<footer class="sticky bottom-4 mt-4 md:mt-0 text-sm row-end-13 row-span-1">
|
||||||
|
{
|
||||||
|
feedItems.errors.length === 0 ? (
|
||||||
|
<>No errors</>
|
||||||
|
) : (
|
||||||
|
<ul>
|
||||||
|
{feedItems.errors.map((error) => (
|
||||||
|
<li>{error}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/carterworks/rss-reader"
|
||||||
|
class="underline cursor-pointer">Github</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue