diff --git a/gnoland/website/static/css/app.css b/gnoland/website/static/css/app.css
index 332861317b4..2ca68b5d231 100644
--- a/gnoland/website/static/css/app.css
+++ b/gnoland/website/static/css/app.css
@@ -1,6 +1,9 @@
 @import url("../font/font.css");
 
-:root {
+/*** DARK/LIGHT THEME COLORS ***/
+
+html:not([data-theme="dark"]),
+html[data-theme="light"] {
   --background-color: #eee;
   --input-background-color: #eee;
   --text-color: #000;
@@ -14,30 +17,75 @@
   --realm-help-background-color: #d7d9db9e;
   --realm-help-odd-background-color: #d7d9db45;
   --realm-help-code-color: #5d5d5d;
+
+  --highlight-color: #2f3337;
+  --highlight-bg: #f6f6f6;
+  --highlight-color: #2f3337;
+  --highlight-comment: #656e77;
+  --highlight-keyword: #015692;
+  --highlight-attribute: #015692;
+  --highlight-symbol: #803378;
+  --highlight-namespace: #b75501;
+  --highlight-keyword: #015692;
+  --highlight-variable: #54790d;
+  --highlight-keyword: #015692;
+  --highlight-literal: #b75501;
+  --highlight-punctuation: #535a60;
+  --highlight-variable: #54790d;
+  --highlight-deletion: #c02d2e;
+  --highlight-addition: #2f6f44;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background-color: #2e2e2e;
-    --input-background-color: #393939;
-    --text-color: #eee;
-    --link-color: #ebe6ff;
+html[data-theme="dark"] {
+  --background-color: #2e2e2e;
+  --input-background-color: #393939;
+  --text-color: #eee;
+  --link-color: #ebe6ff;
+
+  --quote-background: #404040;
+  --quote-2-background: #555555;
+  --code-background: #454545;
+  --header-background: #454545;
+
+  --realm-help-background-color: #45454545;
+  --realm-help-odd-background-color: #4545459e;
+  --realm-help-code-color: #b6b6b6;
+
+  --highlight-color: #ffffff;
+  --highlight-bg: #1c1b1b;
+  --highlight-color: #ffffff;
+  --highlight-comment: #999999;
+  --highlight-keyword: #88aece;
+  --highlight-attribute: #88aece;
+  --highlight-symbol: #c59bc1;
+  --highlight-namespace: #f08d49;
+  --highlight-keyword: #88aece;
+  --highlight-variable: #b5bd68;
+  --highlight-keyword: #88aece;
+  --highlight-literal: #f08d49;
+  --highlight-punctuation: #cccccc;
+  --highlight-variable: #b5bd68;
+  --highlight-deletion: #de7176;
+  --highlight-addition: #76c490;
+}
 
-    --quote-background: #404040;
-    --quote-2-background: #555555;
-    --code-background: #454545;
-    --header-background: #454545;
+html[data-theme="dark"] #header img {
+  filter: invert(1);
+}
 
-    --realm-help-background-color: #45454545;
-    --realm-help-odd-background-color: #4545459e;
-    --realm-help-code-color: #b6b6b6;
-  }
+#theme-toggle {
+  height: 32px;
+  width: 32px;
+  display: inline-block;
+}
 
-  #header img {
-    filter: invert(1);
-  }
+html[data-theme="dark"] #theme-toggle-moon,
+html[data-theme="light"] #theme-toggle-sun {
+  display: none;
 }
 
+/*** BASE HTML ELEMENTS ***/
+
 html {
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
@@ -52,6 +100,7 @@ body {
   background-color: var(--background-color, #eee);
   color: var(--text-color, #000);
   font-size: 15px;
+  transition: 0.25s all ease;
 }
 
 body {
@@ -91,6 +140,113 @@ pre {
   margin: 0;
 }
 
+/*** HLJS ***/
+
+/* Copyright (c) 2006, Ivan Sagalaev.
+ * https://github.com/highlightjs/highlight.js/blob/86dcb210227ef130a00b5ece50605ea1ec887be8/src/styles/default.css */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+/* Copyright 2017-2020 Stack Exchange Inc.
+ * https://github.com/highlightjs/highlight.js/blob/86dcb210227ef130a00b5ece50605ea1ec887be8/src/styles/stackoverflow-light.css
+ * https://github.com/highlightjs/highlight.js/blob/86dcb210227ef130a00b5ece50605ea1ec887be8/src/styles/stackoverflow-dark.css */
+.hljs {
+  color: var(--highlight-color, #2f3337);
+  background: var(--highlight-bg, #f6f6f6);
+}
+
+.hljs-subst {
+  color: var(--highlight-color, #2f3337);
+}
+
+.hljs-comment {
+  color: var(--highlight-comment, #656e77);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-section {
+  color: var(--highlight-keyword, #015692);
+}
+
+.hljs-attr {
+  color: var(--highlight-attribute, #015692);
+}
+
+.hljs-attribute {
+  color: var(--highlight-symbol, #803378);
+}
+
+.hljs-name,
+.hljs-type,
+.hljs-number,
+.hljs-selector-id,
+.hljs-quote,
+.hljs-template-tag {
+  color: var(--highlight-namespace, #b75501);
+}
+
+.hljs-selector-class {
+  color: var(--highlight-keyword, #015692);
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr {
+  color: var(--highlight-variable, #54790d);
+}
+
+.hljs-meta,
+.hljs-selector-pseudo {
+  color: var(--highlight-keyword, #015692);
+}
+
+.hljs-built_in,
+.hljs-title,
+.hljs-literal {
+  color: var(--highlight-literal, #b75501);
+}
+
+.hljs-bullet,
+.hljs-code {
+  color: var(--highlight-punctuation, #535a60);
+}
+
+.hljs-meta .hljs-string {
+  color: var(--highlight-variable, #54790d);
+}
+
+.hljs-deletion {
+  color: var(--highlight-deletion, #c02d2e);
+}
+
+.hljs-addition {
+  color: var(--highlight-addition, #2f6f44);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/*** PAGE LAYOUT ***/
+
 #root {
   display: flex;
   flex-direction: column;
@@ -138,11 +294,20 @@ pre {
   margin-left: auto;
 }
 
+/* enabled conditionally with <noscript> */
+#source {
+  display: none;
+}
+
+/*** HOMEPAGE ***/
+
 #home,
 #subscribe {
   padding: 0 22px;
 }
 
+/*** REALM HELP ***/
+
 #realm_render,
 #realm_help {
   padding: 0 22px;
@@ -190,7 +355,3 @@ pre {
 #realm_help .func_name td {
   font-weight: bold;
 }
-
-#source {
-  display: none;
-}
diff --git a/gnoland/website/static/css/highlight.min.css b/gnoland/website/static/css/highlight.min.css
deleted file mode 100644
index c36d63d88c1..00000000000
--- a/gnoland/website/static/css/highlight.min.css
+++ /dev/null
@@ -1,13 +0,0 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: StackOverflow Light
-  Description: Light theme as used on stackoverflow.com
-  Author: stackoverflow.com
-  Maintainer: @Hirse
-  Website: https://github.com/StackExchange/Stacks
-  License: MIT
-  Updated: 2021-05-15
-
-  Updated for @stackoverflow/stacks v0.64.0
-  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
-  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
-*/.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
\ No newline at end of file
diff --git a/gnoland/website/views/funcs.html b/gnoland/website/views/funcs.html
index 716470dd49d..f5ca952edfa 100644
--- a/gnoland/website/views/funcs.html
+++ b/gnoland/website/views/funcs.html
@@ -1,59 +1,179 @@
 {{ define "header_buttons" }}
 <div id="header_buttons">
-  <a href="https://github.com/gnolang/gno"><img src="/static/img/github-mark-32px.png" alt="Github"/></a>
+  <a href="https://github.com/gnolang/gno"
+    ><img src="/static/img/github-mark-32px.png" alt="Github"
+  /></a>
+  <a href="#" title="Toggle dark mode" id="theme-toggle">
+    <!--
+      Copyright (c) 2013-2017 Cole Bemis
+      https://feathericons.com/
+    -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      id="theme-toggle-sun"
+    >
+      <circle cx="12" cy="12" r="5"></circle>
+      <line x1="12" y1="1" x2="12" y2="3"></line>
+      <line x1="12" y1="21" x2="12" y2="23"></line>
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+      <line x1="1" y1="12" x2="3" y2="12"></line>
+      <line x1="21" y1="12" x2="23" y2="12"></line>
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+    </svg>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      id="theme-toggle-moon"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+    </svg>
+  </a>
 </div>
-{{ end }}
-
-{{define "html_head"}}
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <link rel="stylesheet" href="/static/css/app.css"/>
-  <link rel="stylesheet" href="/static/css/normalize.css"/>
-  <noscript>
-   	<style type="text/css">
-      #source { display:block; }
-   	</style>
-  </noscript>
-{{ end }}
-
-{{ define "header_logo" }}<a id="logo" href="/"><img src="/static/img/logo.png" alt="Gno.land" title="Gno.land" height="38" /> </a>{{ end }}
+{{ end }} {{define "html_head" }}
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<link rel="stylesheet" href="/static/css/app.css" />
+<link rel="stylesheet" href="/static/css/normalize.css" />
+<noscript>
+  <style type="text/css">
+    #source {
+      display: block;
+    }
+    #theme-toggle {
+      display: none;
+    }
+  </style>
+</noscript>
+<script>
+  (function () {
+    const storageKey = "website_theme";
+    const themeDark = "dark";
+    const themeLight = "light";
 
-{{ define "footer" }}
+    function getColorPreference() {
+      if (localStorage.getItem(storageKey))
+        return localStorage.getItem(storageKey);
+      return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? themeDark
+        : themeLight;
+    }
+    function setTheme(value) {
+      document.firstElementChild.setAttribute("data-theme", value);
+    }
+    setTheme(getColorPreference());
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", function (e) {
+        if (!localStorage.getItem(storageKey))
+          setTheme(e.matches ? themeDark : themeLight);
+      });
+    window.addEventListener("load", function () {
+      document
+        .getElementById("theme-toggle")
+        .addEventListener("click", function (e) {
+          e.preventDefault();
+          const newValue =
+            getColorPreference() === themeLight ? themeDark : themeLight;
+          localStorage.setItem(storageKey, newValue);
+          setTheme(newValue);
+        });
+    });
+  })();
+</script>
+{{ end }} {{ define "header_logo" }}<a id="logo" href="/"
+  ><img
+    src="/static/img/logo.png"
+    alt="Gno.land"
+    title="Gno.land"
+    height="38"
+  /> </a
+>{{ end }} {{ define "footer" }}
 <hr />
-{{ end }}
-
-{{ define "js" }}
-  <script type="text/javascript" src="/static/js/marked.min.js"></script>
-  <script type="text/javascript" src="/static/js/purify.min.js"></script>
-  <script type="text/javascript">
-    function main() {
-        marked.setOptions({gfm:true});
-        window.contents = document.getElementById("source").innerHTML;
-        var doc = new DOMParser().parseFromString(window.contents, "text/html");
-        var contents = doc.documentElement.textContent
-        var parsed = marked.parse(contents);
-        document.getElementById("home").innerHTML = DOMPurify.sanitize(parsed, { USE_PROFILES: { html: true } });
-    };
-  </script>
-{{ end }}
-
-{{ define "subscribe" }}
+{{ end }} {{ define "js" }}
+<script type="text/javascript" src="/static/js/marked.min.js"></script>
+<script type="text/javascript" src="/static/js/purify.min.js"></script>
+<script type="text/javascript">
+  function main() {
+    marked.setOptions({ gfm: true });
+    window.contents = document.getElementById("source").innerHTML;
+    const doc = new DOMParser().parseFromString(window.contents, "text/html");
+    const contents = doc.documentElement.textContent;
+    const parsed = marked.parse(contents);
+    document.getElementById("home").innerHTML = DOMPurify.sanitize(parsed, {
+      USE_PROFILES: { html: true },
+    });
+  }
+</script>
+{{ end }} {{ define "subscribe" }}
 <!-- mailchimp -->
 <div id="mc_embed_signup">
-<form action="https://land.us18.list-manage.com/subscribe/post?u=8befe3303cf82796d2c1a1aff&amp;id=271812000b&amp;f_id=009170e7f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
-  <label for="mce-EMAIL">Subscribe by email:</label>
-  <div id="mc_embed_signup_scroll">
-  	<div class="mc-field-group">
-  		<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Type your email here" required>
-  		<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
-  		<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
-  	</div>
-  	<div id="mce-responses" class="clear">
-  		<div class="response" id="mce-error-response" style="display:none"></div>
-  		<div class="response" id="mce-success-response" style="display:none"></div>
-  	</div>
-  	<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_8befe3303cf82796d2c1a1aff_271812000b" tabindex="-1" value=""></div>
-  </div>
-</form>
+  <form
+    action="https://land.us18.list-manage.com/subscribe/post?u=8befe3303cf82796d2c1a1aff&amp;id=271812000b&amp;f_id=009170e7f0"
+    method="post"
+    id="mc-embedded-subscribe-form"
+    name="mc-embedded-subscribe-form"
+    class="validate"
+    target="_self"
+  >
+    <label for="mce-EMAIL">Subscribe by email:</label>
+    <div id="mc_embed_signup_scroll">
+      <div class="mc-field-group">
+        <input
+          type="email"
+          value=""
+          name="EMAIL"
+          class="required email"
+          id="mce-EMAIL"
+          placeholder="Type your email here"
+          required
+        />
+        <input
+          type="submit"
+          value="Subscribe"
+          name="subscribe"
+          id="mc-embedded-subscribe"
+          class="button"
+        />
+        <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
+      </div>
+      <div id="mce-responses" class="clear">
+        <div
+          class="response"
+          id="mce-error-response"
+          style="display: none"
+        ></div>
+        <div
+          class="response"
+          id="mce-success-response"
+          style="display: none"
+        ></div>
+      </div>
+      <div style="position: absolute; left: -5000px" aria-hidden="true">
+        <input
+          type="text"
+          name="b_8befe3303cf82796d2c1a1aff_271812000b"
+          tabindex="-1"
+          value=""
+        />
+      </div>
+    </div>
+  </form>
 </div>
 <!-- /mailchimp -->
 {{ end }}
diff --git a/gnoland/website/views/package_file.html b/gnoland/website/views/package_file.html
index 2cf1fe9de91..d30a98ddbac 100644
--- a/gnoland/website/views/package_file.html
+++ b/gnoland/website/views/package_file.html
@@ -4,7 +4,6 @@
     <head>
       <title>Gno.land</title>
       {{ template "html_head" }}
-      <link rel="stylesheet" href="/static/css/highlight.min.css"/>
     </head>
     <body onload="main()">
       <div id="root">
diff --git a/gnoland/website/views/realm_help.html b/gnoland/website/views/realm_help.html
index 5ce2221adc6..37e6aed7c31 100644
--- a/gnoland/website/views/realm_help.html
+++ b/gnoland/website/views/realm_help.html
@@ -4,7 +4,6 @@
     <head>
       <title>Gno.land</title>
       {{ template "html_head" }}
-      <link rel="stylesheet" href="/static/css/highlight.min.css"/>
     </head>
     <body onload="main()">
       <div id="root">