---
title: "Three-Way Theme Toggle in Webtrotion"
slug: three-way-theme-toggle-in-webtrotion
canonical_url: https://nerdymomocat.github.io/posts/three-way-theme-toggle-in-webtrotion/
collection: Stream
published_at: 2025-02-27T00:00:00.000Z
updated_at: 2025-02-27T00:00:00.000Z
tags: 
  - Webtrotion
  - LLMs
  - Coding
author: "Nerdy Momo Cat"
---

## Navigation Context

- Canonical URL: https://nerdymomocat.github.io/posts/three-way-theme-toggle-in-webtrotion/
- You are here: Home > Posts > Stream > Three-Way Theme Toggle in Webtrotion

### Useful Next Links
- [Home](https://nerdymomocat.github.io/)
- [Bundles](https://nerdymomocat.github.io/collections/bundles/)
- [Logbook](https://nerdymomocat.github.io/collections/logbook/)
- [Notes](https://nerdymomocat.github.io/collections/notes/)
- [Stream](https://nerdymomocat.github.io/collections/stream/)

I added a 3-way Theme toggle enhancing the existing 2-way toggle, allowing switching between system, light, and dark modes, which I'm quite happy about. This was implemented using GitHub Copilot with Claude 3.5s Sonnet.

Most of the time was spent finding a suitable icon (tried searching for `light dark` and `sun moon` with a single path that would work with my system. I [found one on Iconify](https://icon-sets.iconify.design/tabler/sun-moon/) but had to modify it. Something to note, while I attempted to use LLMs for the modification, it wasn't successful, so I used [SVG Path Editor](https://yqnn.github.io/svg-path-editor/) instead. As shown in the image below, you can now switch between three theme modes rather than just two.

[![Image uploaded to Notion](https://nerdymomocat.github.io/_astro/image.BZHIBxSy_Z24SC20.webp)](https://nerdymomocat.github.io/_astro/image.BZHIBxSy_Z24SC20.webp)

You can look at the GitHub gist below to see the conversation with GitHub Copilot.

[

Adding 3 way toggle to webtrotion

Adding 3 way toggle to webtrotion. GitHub Gist: instantly share code, notes, and snippets.

![title](https://www.google.com/s2/favicons?domain=gist.github.com)

https://gist.github.com/nerdymomocat/d02ae8c4744a7f26869333b0afe8ee68

![title](https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png)

](https://gist.github.com/nerdymomocat/d02ae8c4744a7f26869333b0afe8ee68)

Bookmark for [https://gist.github.com/nerdymomocat/d02ae8c4744a7f26869333b0afe8ee68](https://gist.github.com/nerdymomocat/d02ae8c4744a7f26869333b0afe8ee68)

Read in the embed:

[](https://gist.github.com/nerdymomocat/d02ae8c4744a7f26869333b0afe8ee68.pibb)