diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 00000000..78a3fe4d
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+
+const ThemeToggle = () => {
+ const [theme, setTheme] = useState("dark");
+
+ useEffect(() => {
+ // if the theme isn't set, use the user's system preference
+ const savedTheme = localStorage.getItem("theme");
+ if (savedTheme) {
+ setTheme(savedTheme);
+ document.documentElement.setAttribute("data-theme", savedTheme);
+ } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+ setTheme("dark");
+ document.documentElement.setAttribute("data-theme", "dark");
+ } else {
+ setTheme("light");
+ document.documentElement.setAttribute("data-theme", "light");
+ }
+ });
+
+ const toggleTheme = () => {
+ const newTheme = theme === "dark" ? "light" : "dark";
+ setTheme(newTheme);
+ localStorage.setItem("theme", newTheme);
+ document.documentElement.setAttribute("data-theme", newTheme);
+ };
+
+ return (
+ <button className="button" aria-label="Toggle theme">
+ {theme === "dark" ? "🌞" : "🌚"}
+ </button>
+ );
+};
+
+export default ThemeToggle;
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index 52243cde..858638a3 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -2,6 +2,7 @@ import { GitHubIcon } from "../components/Icons";
 import LinkButton from "../components/LinkButton";
 import Logo from "../components/Logo";
 import SearchInput from "../components/SearchInput";
+import ThemeToggle from "../components/ThemeToggle";
 
 const Header = () => {
 return (
@@ -9,6 +10,7 @@ const Header = () => {
 <logo />
 <nav className="primary-nav">
 <searchinput />
+ <themetoggle />
 <linkbutton
 href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"
 target="_blank"
diff --git a/src/styles/main.css b/src/styles/main.css
index 2bcadd29..576e5a66 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -55,6 +55,22 @@
 
 --br-md: 0.5rem;
 --br-lg: 0.75rem;
+
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease;
+}
+
+/*------------------------------------*\
+ #ACCESSIBILITY/THEMING
+\*------------------------------------*/
+[data-theme="light"] {
+ color-scheme: light;
+ --clr-neutral-200: hsl(0, 0%, 10%);
+ --clr-neutral-300: hsl(0, 0%, 30%);
+ --clr-neutral-500: hsl(0, 0%, 85%);
+ --clr-neutral-700: hsl(0, 0%, 95%);
+ --clr-neutral-900: hsl(60, 25%, 98%);
 }
 
 /*------------------------------------*\
@@ -434,6 +450,7 @@ abbr {
 .categories {
 display: grid;
 background-color: var(--bg-secondary);
+ border: 1px solid var(--border-color);
 padding: 1.25rem;
 padding-bottom: 2rem;
 border-radius: var(--br-lg);
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/quicksnip-dev/quicksnip/pull/31.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/quicksnip-dev/quicksnip/pull/31.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>