diff --git a/README.md b/README.md
index 921cc29..6ee1be4 100644
--- a/README.md
+++ b/README.md
@@ -7,10 +7,11 @@ A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
 
 ## Features
 
-- 🌗 **Light / dark mode toggle** — remembers the visitor's choice and falls back to the OS preference.
-- 🧱 **Monochrome design** — restrained grayscale palette with crisp typography (Inter).
+- 🎨 **Four color themes** — the navbar button cycles **Light → Dark → Nord → Dracula**, remembering the visitor's choice (falls back to the OS preference).
+- 🧱 **Monochrome base design** — restrained grayscale palette with crisp typography (Inter).
 - 👤 **Profile hero** — circular avatar, site title, slogan and social links on the homepage.
 - 📚 **Right sidebar** — drop any Bludit sidebar plugin into it (categories, tags, search…).
+- 🔀 **Randomized navigation** — the Navigation/Pages plugin list is shuffled on each load.
 - ⏱️ **Reading time & dates** shown on the post list and single posts.
 - 🔗 **Social icons** in the navbar and hero, using SVG files in `img/` (GitHub, Mastodon, Bluesky, LinkedIn, and more).
 - 🏷️ **Tags & categories** rendered as pill badges.
@@ -52,15 +53,24 @@ blowdit/
 └── languages/         Translations
 ```
 
-## Dark mode
+## Themes
 
-The colour scheme is driven by CSS custom properties. Light mode lives in
-`:root`; dark mode overrides them under `[data-theme="dark"]`. The attribute is
-set on `<html>` before paint (in `php/head.php`) to avoid a flash, and the
-toggle button in the navbar persists the choice to `localStorage`.
+Each theme is just a set of CSS custom properties. Light lives in `:root`; the
+others override it under `[data-theme="dark"]`, `[data-theme="nord"]` and
+`[data-theme="dracula"]`. The attribute is set on `<html>` before paint (in
+`php/head.php`) to avoid a flash, and the navbar button cycles through them,
+persisting the choice to `localStorage`.
 
-To tweak the palette, edit the variables at the top of
-[css/style.css](css/style.css).
+To tweak a palette or add your own theme, edit/duplicate the variable blocks at
+the top of [css/style.css](css/style.css) and add the theme name to the
+`THEMES` array in the toggle script in [index.php](index.php).
+
+## Randomized navigation
+
+If the **Navigation** (or **Pages**) plugin is in the sidebar, its list is
+shuffled on every page load by a small script in [index.php](index.php). The
+plugin's output is wrapped in `.js-random-nav`; if your plugin uses a different
+CSS class, adjust the detection in `index.php` accordingly.
 
 ## License
 
diff --git a/css/style.css b/css/style.css
index 2759f70..742b823 100644
--- a/css/style.css
+++ b/css/style.css
@@ -61,6 +61,9 @@
 	--font-size-sm: 0.875rem;
 	--font-size-xs: 0.78rem;
 	--line-height-base: 1.7;
+
+	/* Filter applied to the dark social SVG glyphs (none on light themes) */
+	--social-icon-filter: none;
 }
 
 /* ----------------------------------------
@@ -85,7 +88,7 @@
 	--border-color: #333333;
 	--border-subtle: #2a2a2a;
 
-	--chrome-bg: #0f0f0f;
+	--chrome-bg: #1f1f1f;
 	--chrome-text: rgba(255, 255, 255, 0.88);
 	--chrome-text-hover: #ffffff;
 
@@ -95,6 +98,80 @@
 
 	--code-bg: #262626;
 	--code-text: #ededed;
+
+	--social-icon-filter: brightness(0) invert(1);
+}
+
+/* ----------------------------------------
+   THEME TOKENS — Nord (arctic)
+   ---------------------------------------- */
+[data-theme="nord"] {
+	color-scheme: dark;
+
+	--accent: #88c0d0;
+	--accent-hover: #8fbcbb;
+	--accent-contrast: #2e3440;
+
+	--bg-body: #2e3440;
+	--bg-surface: #3b4252;
+	--bg-subtle: #434c5e;
+	--bg-hover: #4c566a;
+
+	--text-primary: #eceff4;
+	--text-secondary: #d8dee9;
+	--text-muted: #8b95a8;
+
+	--border-color: #434c5e;
+	--border-subtle: #3b4252;
+
+	--chrome-bg: #3b4252;
+	--chrome-text: rgba(236, 239, 244, 0.9);
+	--chrome-text-hover: #eceff4;
+
+	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
+	--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.4);
+
+	--code-bg: #3b4252;
+	--code-text: #eceff4;
+
+	--social-icon-filter: brightness(0) invert(1);
+}
+
+/* ----------------------------------------
+   THEME TOKENS — Dracula
+   ---------------------------------------- */
+[data-theme="dracula"] {
+	color-scheme: dark;
+
+	--accent: #bd93f9;
+	--accent-hover: #caa6fa;
+	--accent-contrast: #282a36;
+
+	--bg-body: #282a36;
+	--bg-surface: #343746;
+	--bg-subtle: #44475a;
+	--bg-hover: #44475a;
+
+	--text-primary: #f8f8f2;
+	--text-secondary: #c4c6d6;
+	--text-muted: #6272a4;
+
+	--border-color: #44475a;
+	--border-subtle: #383b4a;
+
+	--chrome-bg: #343746;
+	--chrome-text: rgba(248, 248, 242, 0.9);
+	--chrome-text-hover: #f8f8f2;
+
+	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
+	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+	--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
+
+	--code-bg: #21222c;
+	--code-text: #f8f8f2;
+
+	--social-icon-filter: brightness(0) invert(1);
 }
 
 /* ========================================
@@ -430,7 +507,8 @@ img.nav-svg-icon {
 .profile-social-icon {
 	width: 1.4rem;
 	height: 1.4rem;
-	opacity: 0.6;
+	opacity: 0.65;
+	filter: var(--social-icon-filter);
 	transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
@@ -439,16 +517,6 @@ img.nav-svg-icon {
 	transform: translateY(-2px);
 }
 
-/* Dark mode: invert the dark SVG glyphs to light */
-[data-theme="dark"] .profile-social-icon {
-	filter: brightness(0) invert(1);
-	opacity: 0.7;
-}
-
-[data-theme="dark"] .profile-social a:hover .profile-social-icon {
-	opacity: 1;
-}
-
 @media (max-width: 767.98px) {
 	.profile-avatar { width: 120px; height: 120px; }
 	.profile-name { font-size: 1.7rem; }
diff --git a/index.php b/index.php
index 5ef18c4..83e4ab7 100644
--- a/index.php
+++ b/index.php
@@ -25,6 +25,11 @@
 				if (strpos($out, 'plugin-search') !== false) {
 					$sidebarSearchHtml .= $out;
 				} else {
+					// Mark the navigation / pages plugin so its list can be
+					// shuffled client-side (see the script near the body end).
+					if (strpos($out, 'plugin-navigation') !== false || strpos($out, 'plugin-pages') !== false) {
+						$out = '<div class="js-random-nav">' . $out . '</div>';
+					}
 					$sidebarOtherHtml .= $out;
 				}
 			}
@@ -74,10 +79,17 @@
 		echo Theme::jsBootstrap();
 	?>
 
-	<!-- Light / Dark theme toggle -->
+	<!-- Theme rotation: light -> dark -> nord -> dracula -->
 	<script>
 		(function () {
 			var STORAGE_KEY = 'blowdit-theme';
+			var THEMES = ['light', 'dark', 'nord', 'dracula'];
+			var ICONS = {
+				light:   'bi-brightness-high',
+				dark:    'bi-moon-stars',
+				nord:    'bi-snow',
+				dracula: 'bi-droplet'
+			};
 			var root = document.documentElement;
 			var btn = document.getElementById('theme-toggle');
 
@@ -85,7 +97,7 @@
 				if (!btn) return;
 				var icon = btn.querySelector('i');
 				if (!icon) return;
-				icon.className = (theme === 'dark') ? 'bi bi-sun' : 'bi bi-moon-stars';
+				icon.className = 'bi ' + (ICONS[theme] || 'bi-circle-half');
 			}
 
 			function apply(theme) {
@@ -95,12 +107,15 @@
 			}
 
 			// Reflect the theme set by the inline head script.
-			syncIcon(root.getAttribute('data-theme') || 'light');
+			var current = root.getAttribute('data-theme') || 'light';
+			if (THEMES.indexOf(current) === -1) current = 'light';
+			syncIcon(current);
 
 			if (btn) {
 				btn.addEventListener('click', function () {
-					var current = root.getAttribute('data-theme') || 'light';
-					apply(current === 'dark' ? 'light' : 'dark');
+					var cur = root.getAttribute('data-theme') || 'light';
+					var i = THEMES.indexOf(cur);
+					apply(THEMES[(i + 1) % THEMES.length]);
 				});
 			}
 
@@ -116,6 +131,26 @@
 		})();
 	</script>
 
+	<!-- Randomise the order of the navigation / pages list on each load -->
+	<script>
+		(function () {
+			function shuffle(arr) {
+				for (var i = arr.length - 1; i > 0; i--) {
+					var j = Math.floor(Math.random() * (i + 1));
+					var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp;
+				}
+				return arr;
+			}
+			var lists = document.querySelectorAll('.js-random-nav ul');
+			Array.prototype.forEach.call(lists, function (ul) {
+				var items = Array.prototype.filter.call(ul.children, function (el) {
+					return el.tagName === 'LI';
+				});
+				shuffle(items).forEach(function (li) { ul.appendChild(li); });
+			});
+		})();
+	</script>
+
 	<!-- Load Bludit Plugins: Site Body End -->
 	<?php Theme::plugins('siteBodyEnd'); ?>