diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ac9960..fcb427b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v3.3.4] - 2026-05-28
+
+### Added
+- Add color palette with various shades of colors via `@property`
+
 ## [v0.3.3] - 2026-04-27
 
 ### Added
diff --git a/createSheets.js b/createSheets.js
index c0b6259..3ec11e6 100644
--- a/createSheets.js
+++ b/createSheets.js
@@ -5,7 +5,7 @@ globalThis.reportError ??= console.error;
 const scripts = [
 	'./animations.js', './button.js', './forms.js', './misc.js', './properties.js', './reset.js',
 	'./scrollbar.js', './styles.js', './theme.js', './properties-legacy.js', './presentation.js',
-	'./layers.js', './custom-button.js',
+	'./layers.js', './custom-button.js', './palette.js',
 ];
 
 class CSSStyleSheet {
diff --git a/package-lock.json b/package-lock.json
index 08973e3..7a5aee5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@aegisjsproject/styles",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@aegisjsproject/styles",
-      "version": "0.3.3",
+      "version": "0.3.4",
       "funding": [
         {
           "type": "librepay",
@@ -851,6 +851,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1156,6 +1157,7 @@
       "integrity": "sha512-loXy6bWOoP3EP6JA7jo6p5jMpBJmHmsNZM5SFRHLdh1MGOPurMnNBj4ZlAbaqUAaQWbCr7jHV4P7gzAyryZWkQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",
@@ -2034,6 +2036,7 @@
       "integrity": "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
diff --git a/package.json b/package.json
index d6f56c6..a27059f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/styles",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Pre-made and reusable styles for `@aegisjsproject/core`",
   "keywords": [
     "aegis",
diff --git a/palette.js b/palette.js
new file mode 100644
index 0000000..de491bb
--- /dev/null
+++ b/palette.js
@@ -0,0 +1,16 @@
+import { red, blue, indigo, purple, pink, orange, yellow, teal, green, cyan, gray } from './palette/bootstrap.js';
+
+const palette = new CSSStyleSheet();
+const palettes = Object.entries({ red, blue, indigo, purple, pink, orange, yellow, teal, green, cyan, gray });
+
+palette.replace(
+	palettes.map(
+		([label, colors]) => colors.map((shade, weight) => `@property --${label}-${(weight + 1) * 100} {
+			syntax: "<color>";
+			inherits: true;
+			initial-value: ${shade};
+		}`).join('\n')
+	).join('\n')
+);
+
+export { palette };
diff --git a/test/index.js b/test/index.js
index 9427e45..e88493a 100644
--- a/test/index.js
+++ b/test/index.js
@@ -2,6 +2,7 @@ import { css } from '@aegisjsproject/parsers/css.js';
 import { componentBase, componentBorder } from '../theme.js';
 import { presentation } from '../presentation.js';
 import props from '../css/properties.css' with { type: 'css' };
+import palette from '../css/palette.css' with { type: 'css' };
 import theme from '../css/theme.css' with { type: 'css' };
 import btn from '../css/button.css' with { type: 'css' };
 import layers from '../css/layers.css' with { type: 'css' };
@@ -12,31 +13,39 @@ const { reset } = await import('@aegisjsproject/styles');
 
 // document.head.append(await sheetToLink(propertiesLegacy));
 
-document.adoptedStyleSheets = [layers, btn, reset, props, theme, presentation, animations];
+document.adoptedStyleSheets = [layers, palette, props, btn, reset, theme, presentation, animations];
 
 document.getElementById('toggle').addEventListener('click', async () => {
 	switch(document.documentElement.dataset.theme) {
 		case 'light':
-			document.documentElement.dataset.theme = 'dark';
+			await cookieStore.set({
+				name: 'theme',
+				value: 'dark',
+				path: '/test/',
+				sameSite: 'strict',
+				secure: true,
+			});
 			break;
 
 		case 'dark':
-			document.documentElement.dataset.theme = 'auto';
+			await cookieStore.set({
+				name: 'theme',
+				value: 'auto',
+				path: '/test/',
+				sameSite: 'strict',
+				secure: true,
+			});
 			break;
 
 		default:
-			document.documentElement.dataset.theme = 'light';
+			await cookieStore.set({
+				name: 'theme',
+				value: 'light',
+				path: '/test/',
+				sameSite: 'strict',
+				secure: true,
+			});
 	}
-
-	document.getElementById('cur').textContent = document.documentElement.dataset.theme;
-
-	await cookieStore.set({
-		name: 'theme',
-		value: document.documentElement.dataset.theme,
-		path: '/test/',
-		sameSite: 'strict',
-		secure: true,
-	});
 });
 
 cookieStore.get('theme').then(cookie => {
@@ -46,6 +55,20 @@ cookieStore.get('theme').then(cookie => {
 	}
 });
 
+cookieStore.addEventListener('change', ({ changed, deleted }) => {
+	if (deleted.some(cookie => cookie.name === 'theme')) {
+		delete document.documentElement.dataset.theme;
+		document.getElementById('cur').textContent = 'auto';
+	} else {
+		const { value } = changed.find( cookie => cookie.name === 'theme') ?? {};
+
+		if (typeof value === 'string') {
+			document.documentElement.dataset.theme = value;
+			document.getElementById('cur').textContent = value;
+		}
+	}
+});
+
 customElements.define('test-el', class TestElement extends HTMLElement {
 	#shadow;