Add Dark Mode user prefers & other a11y fixes ⌨️♿️

data/resource_tags.schema.json

@@ -12,8 +12,16 @@
  },
  "color": {
  "type": "string",
- "pattern": "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$",
- "description": "please choose a color pairing with black text"
+ "enum": [
+ "green",
+ "lavender",
+ "orange",
+ "purple",
+ "red",
+ "teal",
+ "yellow"
+ ],
+ "description": "please choose a color listed in `resources.ts`"
  }
  },
  "required": ["name"],

data/resource_tags.yml

@@ -2,74 +2,74 @@
 - name: ✨ Mod Choice
 - name: 🍞 Rollie's Choice
 - name: Activism
- color: "#c8cdea"
+ color: "lavender"
 - name: Article
- color: "#f1d7c0"
+ color: "orange"
 - name: Bypass Paywalls
- color: "#f1d7c0"
+ color: "orange"
 - name: Climate Accountability
- color: "#e0e9c9"
+ color: "green"
 - name: Climate Careers
- color: "#e0e9c9"
+ color: "green"
 - name: Climate Journalism
- color: "#e0e9c9"
+ color: "green"
 - name: Climate Models
- color: "#e0e9c9"
+ color: "green"
 - name: Climate Tech
- color: "#e0e9c9"
+ color: "green"
 - name: Collective Action
- color: "#c8cdea"
+ color: "lavender"
 - name: Community
- color: "#c8cdea"
+ color: "lavender"
 - name: Contacting representatives
- color: "#e9cac9"
+ color: "red"
 - name: Discord
- color: "#cfe2e0"
+ color: "teal"
 - name: Drug Help
- color: "#efebc2"
+ color: "yellow"
 - name: Education
- color: "#efebc2"
+ color: "yellow"
 - name: Finance
- color: "#efebc2"
+ color: "yellow"
 - name: Healthy Living
- color: "#efebc2"
+ color: "yellow"
 - name: Individual Action
- color: "#c8cdea"
+ color: "lavender"
 - name: location/Canada
- color: "#dccdea"
+ color: "purple"
 - name: location/Global
- color: "#dccdea"
+ color: "purple"
 - name: location/US
- color: "#dccdea"
+ color: "purple"
 - name: location/US/NYC
- color: "#dccdea"
+ color: "purple"
 - name: Organizations
- color: "#cfe2e0"
+ color: "teal"
 - name: Politics
- color: "#e9cac9"
+ color: "red"
 - name: Politics/Global
- color: "#e9cac9"
+ color: "red"
 - name: Politics/UK
- color: "#e9cac9"
+ color: "red"
 - name: Politics/US
- color: "#e9cac9"
+ color: "red"
 - name: Politics/Canada
- color: "#e9cac9"
+ color: "red"
 - name: Professional Networking
- color: "#cfe2e0"
+ color: "teal"
 - name: Research
- color: "#efebc2"
+ color: "yellow"
 - name: Sustainable Food
- color: "#efebc2"
+ color: "yellow"
 - name: Tools
- color: "#cfe2e0"
+ color: "teal"
 - name: Unionize
- color: "#c8cdea"
+ color: "lavender"
 - name: Vegan
- color: "#efebc2"
+ color: "yellow"
 - name: Workers' rights
- color: "#c8cdea"
+ color: "lavender"
 - name: Food Waste
- color: "#efebc2"
+ color: "yellow"
 - name: Greenwashing
- color: "#e0e9c9"
+ color: "green"

src/app.css

@@ -26,3 +26,21 @@ details > summary::-webkit-details-marker {
 details:not([open]) > summary svg {
  transform: rotate(-90deg);
 }
+
+/* show entire label parent keyboard outline when inner input focused */
+.input-wrapper-focus:focus-within {
+ outline: auto;
+}
+
+/* user prefered / OS colour scheme for tag colors */
+@media (prefers-color-scheme: light) {
+ .tag-color {
+ background-color: var(--tag-color) !important;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .tag-color {
+ background-color: var(--tag-color-dark) !important;
+ }
+}

src/lib/components/Collapsible.svelte

@@ -2,7 +2,10 @@
  export let label: string;
 </script>
 
-<details class="rounded-lg border-2" open>
+<details
+ class="rounded-lg border-2 dark:border-zinc-950 dark:text-zinc-200"
+ open
+>
  <summary class="cursor-pointer text-2xl p-2">
  <svg
  xmlns="http://www.w3.org/2000/svg"

src/lib/resources.ts

@@ -0,0 +1,61 @@
+interface Color {
+ name: string;
+ lightHex: string;
+ darkHex: string;
+}
+
+// ! Keep in sync with `data/resource_tags.schema.json` which determines valid colors
+let colorData: Color[] = [
+ {
+ name: "lavender",
+ lightHex: "#c8cdea",
+ darkHex: "#141a38",
+ },
+ {
+ name: "orange",
+ lightHex: "#f1d7c0",
+ darkHex: "#3f250e",
+ },
+ {
+ name: "green",
+ lightHex: "#e0e9c9",
+ darkHex: "#2d3616",
+ },
+ {
+ name: "red",
+ lightHex: "#e9cac9",
+ darkHex: "#361716",
+ },
+ {
+ name: "teal",
+ lightHex: "#cfe2e0",
+ darkHex: "#1d302e",
+ },
+ {
+ name: "yellow",
+ lightHex: "#efebc2",
+ darkHex: "#3c3910",
+ },
+ {
+ name: "purple",
+ lightHex: "#dccdea",
+ darkHex: "#29183a",
+ },
+];
+
+// Mappings of human readable color names to hex values for light and dark modes
+export let lightColors = colorData.reduce<{ [key: string]: string }>(
+ (obj, item: Color) => {
+ obj[item.name] = item.lightHex;
+ return obj;
+ },
+ {}
+);
+
+export let darkColors = colorData.reduce<{ [key: string]: string }>(
+ (obj, item: Color) => {
+ obj[item.name] = item.darkHex;
+ return obj;
+ },
+ {}
+);

src/routes/+layout.svelte

@@ -45,9 +45,11 @@
  crossorigin="anonymous"></script>
 </svelte:head>
 
-<div class="body flex flex-col lg:flex-row w-full">
+<div
+ class="body flex flex-col lg:flex-row w-full bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-50"
+>
  <header
- class="lg:w-fit w-full bg-green-500 flex flex-col p-5 min-h-max lg:min-h-screen"
+ class="lg:w-fit w-full bg-green-500 dark:bg-green-900/75 flex flex-col p-5 min-h-max lg:min-h-screen"
  >
  <a href="{base}/">
  <picture class="w-48 self-center">
@@ -69,34 +71,34 @@
  </a>
  <nav class="gap-2 flex flex-wrap lg:flex-col">
  <a
- class="p-2 text-slate-200 bg-green-600 font-bold rounded-lg"
+ class="p-2 text-zinc-100 bg-green-700/75 dark:bg-green-950 font-bold rounded-lg"
  href="{base}/">Home</a
  >
  <a
- class="p-2 text-slate-200 bg-green-600 font-bold rounded-lg"
+ class="p-2 text-zinc-100 bg-green-700/75 dark:bg-green-950 font-bold rounded-lg"
  href="{base}/resources">Resources</a
  >
  <a
- class="p-2 text-slate-200 bg-green-600 font-bold rounded-lg"
+ class="p-2 text-zinc-100 bg-green-700/75 dark:bg-green-950 font-bold rounded-lg"
  href="{base}/youtube">YouTube Feed</a
  >
  <div class="h-4" />
  <a
- class="p-2 text-slate-200 bg-green-600 font-bold rounded-lg"
+ class="p-2 text-zinc-100 bg-green-700/75 dark:bg-green-950 font-bold rounded-lg"
  target="_blank"
  rel="noreferrer"
  href={github_url}
  >✍ Contribute on GitHub <span class="sr-only">in a new tab</span></a
  >
  <a
- class="p-2 text-slate-200 bg-green-600 font-bold rounded-lg"
+ class="p-2 text-zinc-100 bg-green-700/75 dark:bg-green-950 font-bold rounded-lg"
  target="_blank"
  rel="noreferrer"
  href="{github_url}/#contributors"
  >📣 Credits <span class="sr-only">in a new tab</span></a
  >
  <a
- class="p-2 text-slate-200 bg-green-600 font-bold rounded-lg"
+ class="p-2 text-zinc-100 bg-green-700/75 dark:bg-green-950 font-bold rounded-lg"
  target="_blank"
  rel="noreferrer"
  href={climate_town_url}

src/routes/+page.svelte

@@ -6,40 +6,40 @@
 <h1 class="font-bold text-5xl">Climate Town</h1>
 <h2 class="font-semibold text-4xl pl-16">Knowledge Hub</h2>
 
-<p class="pt-16">
+<p class="pt-16 leading-7">
  Welcome to the Climate Town Knowledge Hub, your one-stop shop for important
  resources in the fight against climate change! This website contains a
  collection of online resources, initiatives, and tools suggested by the
  Climate Town Discord community.
 </p>
 
-<p class="pt-6 pb-3">
+<p class="pt-6 pb-3 leading-7">
  Some of the resource tags in the Knowledge Hub are special. These are prefaced
  with emojis:
 </p>
-<ul class="list-disc">
- <li>
+<ul class="list-disc leading-6">
+ <li class="mb-2">
  <span class="font-semibold">📚 Knowledge Hubs:</span> These are initiatives similar
  to the Climate Town Knowledge Hub. These initiatives curate various lists of
  climate-related resources, lists which may even be more specific in topic than
  the list of resources provided here, taking full advantage of the network effect!
  </li>
- <li>
+ <li class="mb-2">
  <span class="font-semibold">🍞 Rollie's Choice:</span> These are resources endorsed
  by the Climate Town team.
  </li>
- <li>
+ <li class="mb-2">
  <span class="font-semibold">✨ Mod Choice:</span> These are resources endorsed
  by the moderators of the Climate Town Discord.
  </li>
 </ul>
 
 <div class="grid grid-cols-2 pb-10">
  <div
- class="rounded-lg shadow-xl border-b-4 border-r-4 m-5 p-3 border-gray-200 md:col-span-1 col-span-2"
+ class="rounded-lg shadow-xl border-b-4 border-r-4 m-5 p-3 border-zinc-200 dark:border-zinc-900 md:col-span-1 col-span-2"
  >
  <h3>Resources</h3>
- <div class="my-3 text-gray-500">
+ <div class="my-3 text-zinc-600 dark:text-zinc-300">
  A crowdsourced collection of a variety of climate resources. Want to
  suggest a resource? Please <a
  href="{github_url}/issues/new/choose"
@@ -51,7 +51,7 @@
 
  <a
  href="{base}/resources"
- class="block w-fit p-4 rounded-lg border-2 border-green-500 text-green-500 hover:bg-green-500 hover:text-white"
+ class="block w-fit p-4 rounded-lg border-2 border-green-500 dark:border-green-700 text-green-700 dark:text-green-500 hover:text-black hover:bg-green-500 dark:hover:text-white dark:hover:bg-green-900 transition-colors"
  >
  <svg
  xmlns="http://www.w3.org/2000/svg"
@@ -72,16 +72,16 @@
  </a>
  </div>
  <div
- class="rounded-lg shadow-xl border-b-4 border-r-4 m-5 p-3 border-gray-200 md:col-span-1 col-span-2"
+ class="rounded-lg shadow-xl border-b-4 border-r-4 m-5 p-3 border-zinc-200 dark:border-zinc-900 md:col-span-1 col-span-2"
  >
  <h3>YouTube Feed</h3>
- <div class="my-3 text-gray-500">
+ <div class="my-3  text-zinc-600 dark:text-zinc-300">
  A feed of Climate Town and various other popular climate YouTuber videos,
  right here in the Knowledge Hub!
  </div>
  <a
  href="{base}/youtube"
- class="block w-fit p-4 rounded-lg border-2 border-red-500 text-red-500 hover:bg-red-500 hover:text-white"
+ class="block w-fit p-4 rounded-lg border-2 border-red-500 dark:border-red-700 text-red-500 dark:text-red-400 hover:bg-red-500 hover:text-black dark:hover:text-white dark:hover:bg-red-900 transition-colors"
  >
  <svg
  xmlns="http://www.w3.org/2000/svg"
@@ -103,7 +103,7 @@
  </div>
 </div>
 
-<div class="text-xs text-slate-400">
+<div class="text-xs text-zinc-500 dark:text-zinc-400">
  Legal Disclaimer: This website hosts content curated and managed by community
  members from the Climate Town Discord and is not directly managed by Climate
  Town YouTube. While every effort is made to ensure the quality of the content,