DEV Community: David Parker

Dark mode toggle without JavaScript enabled using SvelteKit

David Parker — Wed, 23 Jun 2021 19:01:12 +0000

Note: for interactive bits, see my original blog post.

Dark mode is cool. Or, at a minimum, it's expected to be there nowadays. A lot of sites have dark mode, but not every site takes the time to make a good user experience for users without JavaScript enabled. In this post, I show how you can use SvelteKit endpoints, hooks, cookies, and load in order to set dark mode with and without JavaScript enabled in order to give your users the best User Experience that you can.

Note: if you'd rather watch a video tutorial, you can check out my YouTube video here.

The Code Break Down

stores

export const theme = createWritableStore('theme', { mode: 'dark', color: 'blue' });

First, we'll create a localStorage-based store that keeps our theme mode in it. You can ignore color for now, we'll be adding that another time. createWritableStore was taken from this stackoverflow post.

getSession hook

import cookie from 'cookie';

export const getSession = async (request) => {
  const cookies = cookie.parse(request.headers.cookie || '');
  const theme = cookies.theme || 'dark';

  return {
    theme,
  };
};

For the getSession hook, we just want to get the value of our theme from a cookie, and otherwise default it to dark mode. This will be accessible in load in our components later.

handle hook

export const handle = async ({ request, render }) => {
  // TODO https://github.com/sveltejs/kit/issues/1046
  const response = await render({
    ...request,
    method: (request.query.get('_method') || request.method).toUpperCase(),
  });
  const cookies = cookie.parse(request.headers.cookie || '');
  let headers = response.headers;
  const cookiesArray = [];
  if (!cookies.theme) {
    const theme = request.query.get('theme') || 'dark';
    cookiesArray.push(`theme=${theme};path=/;expires=Fri, 31 Dec 9999 23:59:59 GMT`);
  }
  if (cookiesArray.length > 0) {
    headers = {
      ...response.headers,
      'set-cookie': cookiesArray,
    };
  }
  return {
    ...response,
    headers,
  };
};

In handle, you can skip the beginning (copied from the demo app), and starting at the line const cookies =, we check to see if we don't have a theme cookie yet. If we don't then we go ahead and set it to a query param of theme if provided, or default to dark mode. We then set the cookiesArray to our set-cookie header for SvelteKit. This allows us to set a cookie for the first request. Sadly, we don't have access to the user's prefers-color-scheme here, so we can't default to their preference yet. We'll do it later in the frontend for users with JS enabled.

__layout.svelte > load

<script context="module">
  export async function load({ session }) {
    const localTheme = session.theme;
    return { props: { localTheme } };
  }
</script>

Within our module context and load function, we get our theme from the session. This will be used below to set on a div to ensure everything looks correct without JS enabled.

__layout.svelte > script + onMount

<script>
  import { onMount } from 'svelte';
  import Nav from '$lib/app/navbar/Nav.svelte';
  import { theme } from '$lib/shared/stores';

  export let localTheme;

  // We load the in the <script> tag in load, but then also here onMount to setup stores
  onMount(() => {
    if (!('theme' in localStorage)) {
      theme.useLocalStorage();
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        localTheme = 'dark';
        theme.set({ ...$theme, mode: 'dark' });
      } else {
        localTheme = 'light';
        theme.set({ ...$theme, mode: 'light' });
      }
    } else {
      theme.useLocalStorage();
    }
    document.documentElement.classList.remove('dark');
  });
</script>

__layout.svelte > svelte:head

<svelte:head>
  <script>
    if (!('theme' in localStorage)) {
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.classList.add('dark');
        document.cookie = 'theme=dark;path=/;expires=Fri, 31 Dec 9999 23:59:59 GMT;';
      } else {
        document.documentElement.classList.remove('dark');
        document.cookie = 'theme=light;path=/;expires=Fri, 31 Dec 9999 23:59:59 GMT;';
      }
    } else {
      let data = localStorage.getItem('theme');
      if (data) {
        data = JSON.parse(data);
        document.documentElement.classList.add(data.mode);
      }
    }
  </script>
</svelte:head>

These two mostly do the same thing, but the latter one (svelte:head) will be used to set or remove dark if we haven't had anything set in localStorage. So for users with JS enabled, we can get their preferred setting and override the dark cookie which we set in getSession- just an added nicety for users with JS on. The latter also blocks so will show up without a flicker. The onMount will run later and keep our localStorage store in sync with the rest.

__layout.svelte > html

<div id="core" class="{localTheme}">
  <main class="dark:bg-black bg-white">
    <Nav />
    <slot />
  </main>
</div>

This last bit shows how we set the localTheme class, which is sent from load as a prop. It's created from the cookie value which is provided in the getSession hook.

Nav.svelte

<script>
  import { theme } from '$lib/shared/stores';
  import { toggleTheme } from '$lib/shared/theme';
  import { UiMoonSolid, UiSunOutline } from '$lib/components/icons';

  const klass = 'px-3 py-2 rounded-md leading-5 font-medium \
    focus:outline-none focus:text-white focus:bg-primary-300 \
    text-neutral-800 hover:text-white hover:bg-primary-300 \
    dark:text-white dark:hover:bg-primary-700 dark:focus:bg-primary-700 \
    dark:bg-black';
</script>

<nav>
  <a
    href="/app/theme"
    class="block {klass}"
    aria-label="Toggle Light and Dark mode"
    on:click|preventDefault={() => {
      toggleTheme(theme, $theme);
    }}
  >
    <div class="hidden dark:block">
      <UiSunOutline />
    </div>
    <div class="dark:hidden">
      <UiMoonSolid />
    </div>
  </a>
</nav>

The nav itself is pretty simple. We have a single link, which will create a GET request. For users with JS enabled, we call toggleTheme. For those without JS enabled, it will fall back to the /app/theme endpoint. It uses Tailwind dark:block and dark:hidden to show/hide the correct icon.

toggleTheme

export function toggleTheme(theme: any, $theme: any): void {
  if ($theme.mode === 'light') {
    theme.set({ ...$theme, mode: 'dark' });
    updateDocument('theme', 'dark', 'light');
  } else {
    theme.set({ ...$theme, mode: 'light' });
    updateDocument('theme', 'light', 'dark');
  }
}

function updateDocument(name: string, klass: string, other: string) {
  document.cookie = `${name}=${klass};path=/;expires=Fri, 31 Dec 9999 23:59:59 GMT`;
  document.getElementById('core').classList.remove(other);
  document.documentElement.classList.remove(other);
  document.getElementById('core').classList.add(klass);
  document.documentElement.classList.add(klass);
}

These two convenience methods will be used to set the Svelte store, set a cookie, and update the DOM with our preferred light or dark mode.

/app/theme endpoint

import cookie from 'cookie';
import type { RequestHandler } from '@sveltejs/kit';

// GET /app/theme
export const get: RequestHandler = async (request) => {
  const cookies = cookie.parse(request.headers.cookie || '');
  let theme = cookies.theme;
  theme = theme === 'dark' ? 'light' : 'dark';
  return {
    status: 303,
    headers: {
      location: '/',
      'set-cookie': `theme=${theme}; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT`,
    },
    body: '',
  };
};

For users without JS enabled, the link will hit this GET endpoint. Like getSession and handle we parse the cookies to get the theme. If it's currently set to dark we change it to light, and vice versa. We then return an object for SvelteKit to know to 303, redirecting to / and setting the cookie for the new value we need, along with an empty body. Note that GET requests should normally be idempotent, so if you want to move this to a POST, PUT or a PATCH that would work too.

Summary

All in all, it wasn't too hard to implement a theme toggle for dark mode in SvelteKit which works with both JS enabled and disabled. With SvelteKit, this becomes extremely easy, and you can provide all of your users with a premium user experience.

How to make an RSS feed in SvelteKit

David Parker — Mon, 14 Jun 2021 20:50:33 +0000

Chances are, if you're consuming a lot of content, you're not checking a ton of individual sites.
You may be checking something like Reddit, or another aggregator, or possibly one of the bigger blogging platforms nowadays (dev.to, medium, etc). But that still leaves out large portions of the Internet.

If you control your own website and channel, and you're using SvelteKit, then you'll likely want an RSS feed so that your end users can subscribe to your content in their favorite feed reader.

So, what's it take to to it with SvelteKit? Not a lot!

Note: if you'd rather watch a video tutorial on how to implement an RSS feed, you can check out my YouTube video here.

Here's the complete code for this blog's rss feed:

routes/rss.js

export const get = async () => {
  const res = await fetch(import.meta.env.VITE_BASE_ENDPOINT + '/posts/posts.json');
  const data = await res.json();
  const body = render(data.posts);
  const headers = {
    'Cache-Control': `max-age=0, s-max-age=${600}`,
    'Content-Type': 'application/xml',
  };
  return {
    body,
    headers,
  };
};

const render = (posts) => `<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<atom:link href="http://wwww.davidwparker.com/rss" rel="self" type="application/rss+xml" />
<title>David W Parker</title>
<link>https://www.davidwparker.com</link>
<description>David W Parker's blog about Code, Entrepreneurship, and more</description>
${posts
  .map(
    (post) => `<item>
<guid>https://www.davidwparker.com/posts/${post.slug}</guid>
<title>${post.title}</title>
<link>https://www.davidwparker.com/posts/${post.slug}</link>
<description>${post.description}</description>
<pubDate>${new Date(post.published).toUTCString()}</pubDate>
</item>`
  )
  .join('')}
</channel>
</rss>
`;

Let's break it down

The endpoint

// GET /rss
export const get = async () => {
  const res = await fetch(import.meta.env.VITE_BASE_ENDPOINT + '/posts/posts.json');
  const data = await res.json();
  const body = render(data.posts);
  const headers = {
    'Cache-Control': `max-age=0, s-max-age=${600}`,
    'Content-Type': 'application/xml',
  };
  return {
    body,
    headers,
  };
};

This is a get request that lives at /rss. In it, I make a simple request to /posts/posts.json to get all the blog
articles that I want for this RSS feed.
I call res.json() to get the resulting json, then send the posts within that json to the render method to build my body.
Once I get the body, I set a few headers, and return the resulting body and header which is needed for the SvelteKit endpoint.

The body

const render = (posts) => `<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<atom:link href="http://wwww.davidwparker.com/rss" rel="self" type="application/rss+xml" />
<title>David W Parker</title>
<link>https://www.davidwparker.com</link>
<description>David W Parker's blog about Code, Entrepreneurship, and more</description>
${posts
  .map(
    (post) => `<item>
<guid>https://www.davidwparker.com/posts/${post.slug}</guid>
<title>${post.title}</title>
<link>https://www.davidwparker.com/posts/${post.slug}</link>
<description>${post.description}</description>
<pubDate>${new Date(post.published).toUTCString()}</pubDate>
</item>`
  )
  .join('')}
</channel>
</rss>
`;

We start by making our xml declaration and using the proper rss tag with the definition from w3.org.
From there, it's just a standard rss feed, which you can find from anywhere on the Internet.

In my example, I have a channel, with atom:link which references itself. Inside, I have a title for my feed/site, and a description. From there, I map each of my resulting posts into their own <item> tag along with their own guid, title, link, description, and pubDate. Close out the tags, and we're done.

posts.json

This is less important, but it's just another get endpoint that returns a bunch of posts from imported md files.
At this point, there's a bunch of examples of this all around the Internet- but here's mine just in case you haven't seen it yet:

// GET /posts/posts.json
export const get = async ({ query }) => {
  let posts = await Promise.all(
    Object.entries(import.meta.glob('./*.md')).map(async ([path, page]) => {
      const { metadata } = await page();
      const slug = path.split('/').pop().split('.').shift();
      return { ...metadata, slug };
    })
  );
  if (query.get('q') !== null) {
    posts = posts.reduce((accum, val) => {
      if (val.categories.includes(query.get('q'))) {
        accum.push(val);
      }
      return accum;
    }, []);
  }
  posts.sort((a, b) => (a.published > b.published ? -1 : 1));

  return {
    status: 200,
    body: { posts },
  };
};

Converted my blog to SvelteKit!

David Parker — Fri, 11 Jun 2021 21:02:31 +0000

I converted my personal blog: https://www.davidwparker.com/ to SvelteKit!

It's fantastic, and offers so much more than basic blog places.

That said, I'll be cross posting when it makes sense. See below for my original post, but note that it won't have all of the "interact-ability" that SvelteKit + mdsvex provides, as I'm able to drop in real components into the middle of the post.

Original Post here:

Ok, so it's just another blog conversion. But I'm glad I finally got around to working on it.

So what changed? Well, this blog is now running on SvelteKit. It used to run on Jekyll. I've also ran a different blog on Hugo. I think each has their advantages, but this is my 5th different Svelte site / application (see ProgrammingTIL (SvelteKit), ListenAddict (Sapper), Code Name Parker (SvelteKit), and Producer (SvelteKit, but just a shell right now)), and I honestly just enjoy Svelte so much more than anything else.

The nice thing about converting this blog to SvelteKit is the ability to use msdvex, which allows me to use svelte components directly in my blog. So I'm hoping to build out cooler, more interactive things in the future.

Behold, My Stuff!

So I can use any of my components in my blog posts, whenever I want. For example, if I wanted to drop my <SubscribeForm /> in the middle of this blog, I can:

SEE ORIGINAL POST for interactions

And then I can just keep writing. Of course, this assumes I keep writing 😱.

So how does it work, exactly? Well, I'm not an mdsvex expert, but the basics are this. In my markdown file, I'm able to import whatever code I'd like:

<script>import SubscribeForm from '$lib/app/forms/SubscribeForm.svelte';</script>

Then later, when I want to use that component, I can:

<SubscribeForm />

Or if I want to have my Dark mode toggle, I can do that too:

SEE ORIGINAL POST for interactions

Of course, not everything will be beautiful, unless you take the time to design it to work in every place possible; right now, I'm thinking the <ThemeToggle>, while nice, looks a little silly on hover when it's in the middle of the blog due to its full width, but it works just fine in the header... but I'm not going to change it just for this section!

Anywho, the plan for this blog is to be long-form essays, and maybe some mid-range technical ones as well. I'm not entirely sure. I've also signed up for dev.to, but haven't posted anything yet. The idea being I'll likely cross post between the two, but due to my ability to use Svelte here, I'll most likely keep the longer and more interactive essays and blog posts here.

Until next time!

Special thanks

Thanks to @c-bandy and @mikenikles for sharing their Github Repos for how they implemented their SvelteKit blog in Markdown: c-bandy repo @mikenikles repo

Don't forget to turn on the flashlight (dark mode only):

SEE ORIGINAL POST for interactions