Skip to content

Commit

Permalink
added theme icon
Browse files Browse the repository at this point in the history
  • Loading branch information
nobleknightt committed Sep 9, 2024
1 parent 4f1abb0 commit a248ce2
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 24 deletions.
7 changes: 5 additions & 2 deletions src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,12 @@
<div class="w-full flex gap-4 justify-between">
<h1 class="w-full flex-1 text-6xl font-bold text-center">Blogs</h1>
<button
class="cursor-pointer {theme.backgroundColor_Card} w-24 font-semibold py-1 m-auto rounded-md"
on:click={changeTheme}>{theme.name}</button
class="cursor-pointer {theme.backgroundColor_Card} w-28 font-semibold py-1 m-auto rounded-md flex items-center justify-center pl-2"
on:click={changeTheme}
>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={`${theme.hexCode}`}><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z"/></svg>
<span class="grow px-2">{theme.name}</span>
</button>
</div>
<ul class="w-full grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-4">
{#each blogs as blog}
Expand Down
66 changes: 44 additions & 22 deletions src/themes.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,154 +4,176 @@ const themes = [
backgroundColor: "bg-slate-50",
backgroundColor_Tag: "bg-slate-100",
backgroundColor_Card: "bg-slate-200",
textColor: "text-slate-950"
textColor: "text-slate-950",
hexCode: "#020617",
},
{
name: "Gray",
backgroundColor: "bg-gray-50",
backgroundColor_Tag: "bg-gray-100",
backgroundColor_Card: "bg-gray-200",
textColor: "text-gray-950"
textColor: "text-gray-950",
hexCode: "#030712",
},
{
name: "Zinc",
backgroundColor: "bg-zinc-50",
backgroundColor_Tag: "bg-zinc-100",
backgroundColor_Card: "bg-zinc-200",
textColor: "text-zinc-950"
textColor: "text-zinc-950",
hexCode: "#09090b",
},
{
name: "Neutral",
backgroundColor: "bg-neutral-50",
backgroundColor_Tag: "bg-neutral-100",
backgroundColor_Card: "bg-neutral-200",
textColor: "text-neutral-950"
textColor: "text-neutral-950",
hexCode: "#0a0a0a",
},
{
name: "Stone",
backgroundColor: "bg-stone-50",
backgroundColor_Tag: "bg-stone-100",
backgroundColor_Card: "bg-stone-200",
textColor: "text-stone-950"
textColor: "text-stone-950",
hexCode: "#0c0a09",
},
{
name: "Red",
backgroundColor: "bg-red-50",
backgroundColor_Tag: "bg-red-100",
backgroundColor_Card: "bg-red-200",
textColor: "text-red-950"
textColor: "text-red-950",
hexCode: "#450a0a",
},
{
name: "Orange",
backgroundColor: "bg-orange-50",
backgroundColor_Tag: "bg-orange-100",
backgroundColor_Card: "bg-orange-200",
textColor: "text-orange-950"
textColor: "text-orange-950",
hexCode: "#431407",
},
{
name: "Amber",
backgroundColor: "bg-amber-50",
backgroundColor_Tag: "bg-amber-100",
backgroundColor_Card: "bg-amber-200",
textColor: "text-amber-950"
textColor: "text-amber-950",
hexCode: "#451a03",
},
{
name: "Yellow",
backgroundColor: "bg-yellow-50",
backgroundColor_Tag: "bg-yellow-100",
backgroundColor_Card: "bg-yellow-200",
textColor: "text-yellow-950"
textColor: "text-yellow-950",
hexCode: "#422006",
},
{
name: "Lime",
backgroundColor: "bg-lime-50",
backgroundColor_Tag: "bg-lime-100",
backgroundColor_Card: "bg-lime-200",
textColor: "text-lime-950"
textColor: "text-lime-950",
hexCode: "#1a2e05",
},
{
name: "Green",
backgroundColor: "bg-green-50",
backgroundColor_Tag: "bg-green-100",
backgroundColor_Card: "bg-green-200",
textColor: "text-green-950"
textColor: "text-green-950",
hexCode: "#052e16",
},
{
name: "Emerald",
backgroundColor: "bg-emerald-50",
backgroundColor_Tag: "bg-emerald-100",
backgroundColor_Card: "bg-emerald-200",
textColor: "text-emerald-950"
textColor: "text-emerald-950",
hexCode: "#022c22",
},
{
name: "Teal",
backgroundColor: "bg-teal-50",
backgroundColor_Tag: "bg-teal-100",
backgroundColor_Card: "bg-teal-200",
textColor: "text-teal-950"
textColor: "text-teal-950",
hexCode: "#042f2e",
},
{
name: "Cyan",
backgroundColor: "bg-cyan-50",
backgroundColor_Tag: "bg-cyan-100",
backgroundColor_Card: "bg-cyan-200",
textColor: "text-cyan-950"
textColor: "text-cyan-950",
hexCode: "#083344",
},
{
name: "Sky",
backgroundColor: "bg-sky-50",
backgroundColor_Tag: "bg-sky-100",
backgroundColor_Card: "bg-sky-200",
textColor: "text-sky-950"
textColor: "text-sky-950",
hexCode: "#082f49",
},
{
name: "Blue",
backgroundColor: "bg-blue-50",
backgroundColor_Tag: "bg-blue-100",
backgroundColor_Card: "bg-blue-200",
textColor: "text-blue-950"
textColor: "text-blue-950",
hexCode: "#172554",
},
{
name: "Indigo",
backgroundColor: "bg-indigo-50",
backgroundColor_Tag: "bg-indigo-100",
backgroundColor_Card: "bg-indigo-200",
textColor: "text-indigo-950"
textColor: "text-indigo-950",
hexCode: "#1e1b4b",
},
{
name: "Violet",
backgroundColor: "bg-violet-50",
backgroundColor_Tag: "bg-violet-100",
backgroundColor_Card: "bg-violet-200",
textColor: "text-violet-950"
textColor: "text-violet-950",
hexCode: "#2e1065",
},
{
name: "Purple",
backgroundColor: "bg-purple-50",
backgroundColor_Tag: "bg-purple-100",
backgroundColor_Card: "bg-purple-200",
textColor: "text-purple-950"
textColor: "text-purple-950",
hexCode: "#3b0764",
},
{
name: "Fuchsia",
backgroundColor: "bg-fuchsia-50",
backgroundColor_Tag: "bg-fuchsia-100",
backgroundColor_Card: "bg-fuchsia-200",
textColor: "text-fuchsia-950"
textColor: "text-fuchsia-950",
hexCode: "#4a044e",
},
{
name: "Pink",
backgroundColor: "bg-pink-50",
backgroundColor_Tag: "bg-pink-100",
backgroundColor_Card: "bg-pink-200",
textColor: "text-pink-950"
textColor: "text-pink-950",
hexCode: "#500724",
},
{
name: "Rose",
backgroundColor: "bg-rose-50",
backgroundColor_Tag: "bg-rose-100",
backgroundColor_Card: "bg-rose-200",
textColor: "text-rose-950"
textColor: "text-rose-950",
hexCode: "#4c0519",
}
];

Expand Down

0 comments on commit a248ce2

Please sign in to comment.