gnolang · alexiscolin · Feb 13, 2026 · Feb 13, 2026 · Feb 13, 2026 · Feb 17, 2026
diff --git a/gno.land/pkg/gnoweb/components/layouts/footer.html b/gno.land/pkg/gnoweb/components/layouts/footer.html
@@ -10,6 +10,19 @@
         {{ end }}
       </ul>
       {{ end }}
+      <div>
+        <button type="button" class="b-btn" data-controller="theme" data-action="click->theme#toggle"
+          aria-label="Toggle theme" aria-pressed="false" title="Toggle theme">
+          <svg data-theme-target="sun" class="u-hidden c-icon">
+            <title>Light theme</title>
+            <use href="#ico-sun"></use>
+          </svg>
+          <svg data-theme-target="moon" class="c-icon">
+            <title>Dark theme</title>
+            <use href="#ico-moon"></use>
+          </svg>
+        </button>
+      </div>
     </div>
   </nav>
 </footer>

diff --git a/gno.land/pkg/gnoweb/components/layouts/head.html b/gno.land/pkg/gnoweb/components/layouts/head.html
@@ -1,6 +1,19 @@
 {{ define "layouts/head" }}
 
 <head>
+  <script>
+    (function () {
+      let storedTheme = null;
+      try {
+        storedTheme = localStorage.getItem("theme");
+      } catch (e) { }
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      const theme = (storedTheme === "dark" || storedTheme === "light")
+        ? storedTheme
+        : prefersDark ? "dark" : "light";
+      document.documentElement.setAttribute("data-theme", theme);
+    })();
+  </script>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{{ .Title }}</title>

diff --git a/gno.land/pkg/gnoweb/components/ui/icons.html b/gno.land/pkg/gnoweb/components/ui/icons.html
@@ -95,6 +95,15 @@
       d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
       stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
   </symbol>
+  <symbol id="ico-sun" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M12 3V4.5M12 19.5V21M4.5 12H3M21 12H19.5M17.677 17.677L16.596 16.596M7.404 7.404L6.323 6.323M17.677 6.323L16.596 7.404M7.404 16.596L6.323 17.677M12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5 9.51472 14.4853 7.5 12 7.5C9.51472 7.5 7.5 9.51472 7.5 12C7.5 14.4853 9.51472 16.5 12 16.5Z"
+      stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </symbol>
+  <symbol id="ico-moon" viewBox="0 0 24 24" fill="none">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" stroke="currentColor" stroke-width="1.5"
+      stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
+  </symbol>
   <symbol id="ico-earth" viewBox="0 0 24 24" fill="none">
     <path
       d="M12 21.0046C16.1926 21.0046 19.7156 18.1379 20.7157 14.2576M12 21.0046C7.80742 21.0046 4.28442 18.1379 3.2843 14.2576M12 21.0046C14.4853 21.0046 16.5 16.9752 16.5 12.0046C16.5 7.03408 14.4853 3.00464 12 3.00464M12 21.0046C9.51472 21.0046 7.5 16.9752 7.5 12.0046C7.5 7.03408 9.51472 3.00464 12 3.00464M12 3.00464C15.3652 3.00464 18.299 4.85158 19.8431 7.58709M12 3.00464C8.63481 3.00464 5.70099 4.85158 4.15692 7.58709M19.8431 7.58709C17.7397 9.40503 14.9983 10.5046 12 10.5046C9.00172 10.5046 6.26027 9.40503 4.15692 7.58709M19.8431 7.58709C20.5797 8.89207 21 10.3993 21 12.0046C21 12.7826 20.9013 13.5376 20.7157 14.2576M20.7157 14.2576C18.1334 15.6894 15.1619 16.5046 12 16.5046C8.8381 16.5046 5.86662 15.6894 3.2843 14.2576M3.2843 14.2576C3.09871 13.5376 3 12.7826 3 12.0046C3 10.3993 3.42032 8.89207 4.15692 7.58709"

diff --git a/gno.land/pkg/gnoweb/frontend/css/01-settings.css b/gno.land/pkg/gnoweb/frontend/css/01-settings.css
@@ -254,37 +254,46 @@
 	--g-color-gray-200: oklch(0.7984 0 0); /* #BDBDBD - Content dark color */
 	--g-color-gray-300: oklch(0.683 0 0); /* #999999 - Muted color */
 	--g-color-gray-400: oklch(0.5863 0 0); /* #7C7C7C - Border color */
-	--g-color-gray-600: oklch(0.4609 0.0091 241.82); /* #54595D - Content color */
-	--g-color-gray-800: oklch(0.1867 0 0); /* #131313 - Background dark color */
-	--g-color-gray-900: oklch(0.1349 0.0024 286.07); /* #080809 - Title color */
+	--g-color-gray-500: oklch(0.52 0 0); /* #6E6E6E - Mid-gray */
+	--g-color-gray-600: oklch(0.4609 0 0); /* #545454 - Content color */
+	--g-color-gray-700: oklch(0.28 0 0); /* #3A3A3A - Deep gray */
+	--g-color-gray-750: oklch(0.24 0 0); /* #2B2B2B - Dark elevated surface */
+	--g-color-gray-800: oklch(0.19 0 0); /* #1A1A1A - Background dark color */
+	--g-color-gray-850: oklch(0.165 0 0); /* #151515 - Deep dark surface */
+	--g-color-gray-900: oklch(0.14 0 0); /* #101010 - Deepest dark */
 
 	/* Green scale */
 	--g-color-green-50: oklch(94.553% 0.00891 180.286); /* #F0F9FF */
 	--g-color-green-400: oklch(0.6863 0.0819 173.69); /* #60AB96 - Primary dark color */
 	--g-color-green-600: oklch(0.4798 0.0801 170.52); /* #226C57 - Primary light color */
 	--g-color-green-900: oklch(0.3401 0.0544 170.75); /* #144134 */
+	--g-color-green-950: oklch(0.26 0.055 170); /* Deep green tint */
 
 	/* Blue scale */
 	--g-color-blue-50: oklch(0.9771 0.0125 236.62); /* #F0F9FF */
 	--g-color-blue-400: oklch(0.7197 0.128 238.18); /* #49AFEB */
 	--g-color-blue-600: oklch(0.6422 0.1129 237.73); /* #3E96C9 - Note alert color */
 	--g-color-blue-900: oklch(0.4116 0.068 236.91); /* #21506B */
+	--g-color-blue-950: oklch(0.26 0.055 238); /* Deep blue tint */
 
 	/* Yellow scale */
 	--g-color-yellow-50: oklch(0.98 0.02 80); /* #FFFCF1 */
 	--g-color-yellow-400: oklch(0.8616 0.164 90.76); /* #FACC32 */
 	--g-color-yellow-600: oklch(0.8369 0.1644 84.43); /* #FBBF24 */
 	--g-color-yellow-900: oklch(0.4522 0.0988 64.15); /* #7b4807 */
+	--g-color-yellow-950: oklch(0.28 0.06 85); /* Deep yellow tint */
 
 	/* Red scale */
 	--g-color-red-50: oklch(0.98 0.015 20); /* #FEF2F2 */
 	--g-color-red-400: oklch(0.6786 0.1655 36.32); /* #EB6C49 - Caution alert color */
 	--g-color-red-600: oklch(0.6045 0.1462 36.31); /* #C95C3E - Caution alert color */
 	--g-color-red-900: oklch(0.3691 0.101 26.47); /* #6B2521 */
+	--g-color-red-950: oklch(0.27 0.055 25); /* Deep red tint */
 
 	/* Purple scale */
 	--g-color-purple-50: oklch(0.96 0.02 280); /* #F5F3FF */
 	--g-color-purple-400: oklch(0.56 0.2289 292.75); /* #7F49EB */
 	--g-color-purple-600: oklch(0.4994 0.2025 292.73); /* #6C3EC9 - Tip alert color */
 	--g-color-purple-900: oklch(0.3245 0.1221 293.31); /* #39216B */
+	--g-color-purple-950: oklch(0.27 0.055 293); /* Deep purple tint */
 }
diff --git a/gno.land/pkg/gnoweb/frontend/css/02-tools.css b/gno.land/pkg/gnoweb/frontend/css/02-tools.css
@@ -82,6 +82,7 @@
 	--s-color-text-muted: var(--g-color-gray-300, #999999); /* Muted text - captions */
 
 	/* Interactive text */
+	--s-color-text-brand-default: var(--g-color-light, #ffffff); /* Text on brand buttons */
 	--s-color-text-link: var(--g-color-green-600, #226c57); /* Link color */
 	--s-color-text-link-hover: var(--g-color-green-600, #226c57); /* Link hover */
 	--s-color-text-link-active: var(--g-color-green-600, #226c57); /* Link active */
@@ -118,6 +119,7 @@
 	--s-color-border-input-disabled: var(--g-color-gray-200, #bdbdbd); /* Input disabled */
 
 	/* Semantic borders */
+	--s-color-border-brand-default: var(--g-color-green-600, #226c57); /* Brand border */
 	--s-color-border-success: var(--g-color-green-600, #144134); /* Success border */
 	--s-color-border-info: var(--g-color-blue-600, #21506b); /* Info border */
 	--s-color-border-warning: var(--g-color-yellow-600, #665100); /* Warning border */
@@ -144,3 +146,93 @@
 	--s-border-secondary: var(--g-space-px, 1px) solid
 		var(--s-color-border-secondary); /* Small border width */
 }
+
+/* ===== DARK THEME ===== */
+[data-theme="dark"] {
+	/* Base surfaces */
+	--s-color-bg-base: var(--g-color-gray-850);
+	--s-color-bg-base-dev: var(--g-color-gray-800);
+
+	/* Component surfaces */
+	--s-color-bg-surface-primary: var(--g-color-gray-800);
+	--s-color-bg-surface-primary-hover: var(--g-color-gray-750);
+	--s-color-bg-surface-secondary: var(--g-color-gray-750);
+	--s-color-bg-surface-secondary-hover: var(--g-color-gray-700);
+	--s-color-bg-surface-tertiary: var(--g-color-gray-700);
+	--s-color-bg-surface-tertiary-hover: var(--g-color-gray-600);
+	--s-color-bg-surface-quaternary: var(--g-color-gray-600);
+	--s-color-bg-surface-quaternary-hover: var(--g-color-gray-500);
+
+	/* Semantic backgrounds */
+	--s-color-bg-brand-weak: var(--g-color-green-950);
+	--s-color-bg-success-weak: var(--g-color-green-950);
+	--s-color-bg-info-weak: var(--g-color-blue-950);
+	--s-color-bg-warning-weak: var(--g-color-yellow-950);
+	--s-color-bg-caution-weak: var(--g-color-red-950);
+	--s-color-bg-tip-weak: var(--g-color-purple-950);
+	--s-color-bg-note-weak: var(--g-color-gray-750);
+
+	/* Form backgrounds */
+	--s-color-bg-input: var(--g-color-gray-850);
+	--s-color-bg-input-disabled: var(--g-color-gray-900);
+	--s-color-bg-input-focus: var(--g-color-gray-800);
+
+	/* Interactive backgrounds */
+	--s-color-bg-hover: var(--g-color-gray-750);
+	--s-color-bg-active: var(--g-color-gray-700);
+	--s-color-bg-selected: var(--g-color-gray-700);
+
+	/* Text hierarchy */
+	--s-color-text-primary: var(--g-color-gray-100);
+	--s-color-text-secondary: var(--g-color-gray-200);
+	--s-color-text-secondary-hover: var(--g-color-gray-100);
+	--s-color-text-tertiary: var(--g-color-gray-400);
+	--s-color-text-tertiary-hover: var(--g-color-gray-300);
+	--s-color-text-quaternary: var(--g-color-gray-500);
+	--s-color-text-quaternary-hover: var(--g-color-gray-400);
+	--s-color-text-muted: var(--g-color-gray-500);
+
+	/* Interactive text */
+	--s-color-text-brand-default: var(--g-color-light);
+	--s-color-text-link: var(--g-color-green-400);
+	--s-color-text-link-hover: var(--g-color-green-400);
+	--s-color-text-link-active: var(--g-color-green-400);
+
+	/* Form text */
+	--s-color-text-input: var(--g-color-gray-200);
+	--s-color-text-input-placeholder: var(--g-color-gray-500);
+	--s-color-text-input-disabled: var(--g-color-gray-600);
+
+	/* Semantic text */
+	--s-color-text-success: var(--g-color-green-400);
+	--s-color-text-info: var(--g-color-blue-400);
+	--s-color-text-warning: var(--g-color-yellow-400);
+	--s-color-text-caution: var(--g-color-red-400);
+	--s-color-text-tip: var(--g-color-purple-400);
+
+	/* Border hierarchy */
+	--s-color-border-primary: var(--g-color-gray-700);
+	--s-color-border-secondary: var(--g-color-gray-750);
+	--s-color-border-tertiary: var(--g-color-gray-600);
+	--s-color-border-quaternary: var(--g-color-gray-500);
+
+	/* Interactive borders */
+	--s-color-border-hover: var(--g-color-gray-600);
+	--s-color-border-focus: var(--g-color-green-400);
+	--s-color-border-active: var(--g-color-gray-500);
+
+	/* Form borders */
+	--s-color-border-input: var(--g-color-gray-700);
+	--s-color-border-input-hover: var(--g-color-gray-600);
+	--s-color-border-input-focus: var(--g-color-green-400);
+	--s-color-border-input-disabled: var(--g-color-gray-750);
+
+	/* Semantic borders */
+	--s-color-border-brand-default: var(--g-color-green-600);
+	--s-color-border-success: var(--g-color-green-400);
+	--s-color-border-info: var(--g-color-blue-400);
+	--s-color-border-warning: var(--g-color-yellow-400);
+	--s-color-border-error: var(--g-color-red-400);
+	--s-color-border-tip: var(--g-color-purple-400);
+	--s-color-border-note: var(--g-color-gray-600);
+}
diff --git a/gno.land/pkg/gnoweb/frontend/css/04-elements.css b/gno.land/pkg/gnoweb/frontend/css/04-elements.css
@@ -26,8 +26,8 @@
 html {
 	font-family: var(--g-font-family-inter-var);
 	font-size: calc(var(--g-px-base) * 1px);
-	color: var(--g-color-gray-600);
-	background-color: var(--g-color-light);
+	color: var(--s-color-text-secondary);
+	background-color: var(--s-color-bg-base);
 	line-height: var(--g-line-height-normal);
 
 	font-feature-settings:

diff --git a/gno.land/pkg/gnoweb/frontend/css/05-composition.css b/gno.land/pkg/gnoweb/frontend/css/05-composition.css
@@ -248,7 +248,7 @@
 
 	/* Base styles for all headings */
 	:is(h1, h2, h3, h4) {
-		color: var(--g-color-gray-900);
+		color: var(--s-color-text-primary);
 		margin-block-start: var(--cr-space-4);
 		line-height: var(--g-line-height-tight);
 	}
@@ -281,7 +281,7 @@
 
 	/* H3 & H4 - Subsection headings with common properties */
 	:is(h3, h4) {
-		color: var(--g-color-gray-600);
+		color: var(--s-color-text-secondary);
 		font-weight: var(--g-font-semibold);
 	}
 
@@ -333,7 +333,7 @@
 
 	figcaption {
 		font-size: var(--g-font-size-100);
-		color: var(--g-color-gray-600);
+		color: var(--s-color-text-secondary);
 	}
 
 	video {
@@ -367,7 +367,7 @@
 	blockquote {
 		border-inline-start: solid var(--g-space-0-5) var(--s-color-border-tertiary);
 		padding-inline-start: var(--g-space-3);
-		color: var(--g-color-gray-600);
+		color: var(--s-color-text-secondary);
 		margin-block: var(--cr-space-4);
 
 		& > blockquote {
@@ -377,7 +377,7 @@
 
 	caption {
 		font-size: var(--g-font-size-100);
-		color: var(--g-color-gray-600);
+		color: var(--s-color-text-secondary);
 		margin-block-start: var(--cr-space-2);
 		text-align: left;
 	}
@@ -468,7 +468,7 @@
 	}
 
 	pre {
-		background-color: var(--g-color-gray-50);
+		background-color: var(--s-color-bg-surface-primary);
 		padding: var(--cr-space-4);
 		margin-block: var(--cr-space-3);
 		border-radius: var(--g-border-radius-sm);
@@ -479,7 +479,7 @@
 		font-size: 0.96em;
 		padding: var(--cr-space-0-5) var(--cr-space-1);
 		border-radius: var(--g-border-radius-sm);
-		background-color: var(--g-color-gray-100);
+		background-color: var(--s-color-bg-surface-secondary);
 	}
 
 	a code {
@@ -509,7 +509,7 @@
 	}
 
 	th {
-		background-color: var(--g-color-gray-100);
+		background-color: var(--s-color-bg-surface-secondary);
 		font-weight: var(--g-font-bold);
 	}
 
@@ -522,8 +522,8 @@
 		appearance: none;
 		padding-inline: var(--cr-space-4);
 		padding-block: var(--cr-space-2);
-		border: var(--g-border-gray-300);
-		background-color: var(--g-color-light);
+		border: var(--s-border);
+		background-color: var(--s-color-bg-input);
 	}
 
 	> *:first-child:not(.realm-view__btns),

diff --git a/gno.land/pkg/gnoweb/frontend/css/06-blocks.css b/gno.land/pkg/gnoweb/frontend/css/06-blocks.css
@@ -59,7 +59,7 @@
 	& > .inner {
 		position: relative;
 		align-items: center;
-		background-color: currentColor;
+		background-color: var(--s-color-bg-surface-secondary);
 		border: var(--s-border-secondary);
 		height: 100%;
 		padding-inline: var(--g-space-1-5);
@@ -107,8 +107,8 @@
 		top: 1px;
 		height: calc(100% - 2px);
 		padding: var(--g-space-1-5);
-		border-start-end-radius: var(--g-border-radius);
-		background-color: currentColor;
+		border-radius: var(--g-border-radius);
+		background-color: var(--g-color-transparent);
 		cursor: pointer;
 		z-index: var(--g-z-max);
 
@@ -498,6 +498,7 @@
 		width: 100%;
 		display: flex;
 		flex-direction: row;
+		flex-wrap: wrap;
 		justify-content: space-between;
 
 		@media (--lg) {
@@ -528,13 +529,25 @@
 			}
 
 			&:nth-child(3) {
-				grid-column: span 3 / span 3;
+				grid-column: span 2 / span 2;
 			}
 
 			li {
 				margin-block: var(--g-space-2);
 			}
 		}
+
+		& > :last-child:not(ul) {
+			flex-basis: 100%;
+			margin-block: var(--g-space-2);
+
+			@media (--xl) {
+				flex-basis: auto;
+				grid-column: span 1 / span 1;
+				justify-self: end;
+				align-self: center;
+			}
+		}
 	}
 
 	a:hover {

diff --git a/gno.land/pkg/gnoweb/frontend/css/07-utilities.css b/gno.land/pkg/gnoweb/frontend/css/07-utilities.css
@@ -43,7 +43,7 @@
 .u-quotes::before,
 .u-quotes::after {
 	content: '"';
-	color: var(--color-gray-400);
+	color: var(--s-color-text-tertiary);
 }
 
 .u-text-stroke {