diff --git a/source/_static/css/custom.css b/source/_static/css/custom.css
index 7d05184c01..7143ea1085 100644
--- a/source/_static/css/custom.css
+++ b/source/_static/css/custom.css
@@ -131,7 +131,8 @@ html {
 
 /* Tutorial page styling */
 .tutorial-section {
-    background-color: #edf2f7;    /* Slightly darker background */
+    background-color: var(--pst-color-on-background);
+    border-color: var(--pst-color-border);
     padding: 25px 25px 25px 40px !important;    /* top right bottom left - more padding on left */
     margin: 20px 0;
     border-radius: 8px;
@@ -160,6 +161,28 @@ html {
     background-color: #fefce8 !important;    /* Light yellow */
     border: 1px solid #fef9c3 !important;
 }
+
+/* Dark mode variants */
+html[data-theme="dark"] .tutorial-section-blue {
+    background-color: #1e2937 !important;    /* Dark blue */
+    border: 1px solid #2d3748 !important;
+}
+
+html[data-theme="dark"] .tutorial-section-green {
+    background-color: #1a2e1a !important;    /* Dark green */
+    border: 1px solid #2d482d !important;
+}
+
+html[data-theme="dark"] .tutorial-section-purple {
+    background-color: #2d1a2e !important;    /* Dark purple */
+    border: 1px solid #482d48 !important;
+}
+
+html[data-theme="dark"] .tutorial-section-yellow {
+    background-color: #2e2d1a !important;    /* Dark yellow */
+    border: 1px solid #48482d !important;
+}
+
 /* Main layout fixes - these were working well */
 .bd-container__inner.bd-page-width {
     max-width: none;
@@ -203,16 +226,34 @@ html {
     left: 0;
     padding-left: 1rem;
     z-index: 1;  /* Reduced z-index */
-    background: white;
+    background: var(--pst-color-on-background);  
     max-width: 167px; /* Match logo's natural width*/
 }
 
+/* Dark mode switching */
+html[data-theme="dark"] .light-logo {
+    display: none;
+}
+
+html[data-theme="dark"] .dark-logo {
+    display: block;
+}
+
 /* Menu positioning */
 .navbar-header-items:not(.navbar-header-items__start) {
     margin-left: 200px;
     position: relative;
     z-index: 2;  /* Higher than logo */
-    background: white;
+    background: var(--pst-color-on-background);  
+}
+
+/* Logo handling for dark/light mode */
+.light-logo {
+    display: block;
+}
+
+.dark-logo {
+    display: none;
 }
 
 img.logo {
@@ -225,10 +266,17 @@ img.logo {
     .navbar-header-items__start{
         max-width: 120px; /* Smaller width on mobile */
         margin-left: 3rem; /* Make space for menu button */
+        background: var(--pst-color-on-background);  /* Single background property */ 
     }
     
     img.logo{
         width: 100%;
         height: auto;
     }
+}
+
+/* Dark mode specific adjustments if needed */
+html[data-theme="dark"] .navbar-header-items__start,
+html[data-theme="dark"] .navbar-header-items:not(.navbar-header-items__start) {
+    background: var(--pst-color-on-background);  /* Ensures correct dark mode background */
 }
\ No newline at end of file
diff --git a/source/_static/css/style.css b/source/_static/css/style.css
index 9ca396754d..81f9805a62 100644
--- a/source/_static/css/style.css
+++ b/source/_static/css/style.css
@@ -11,7 +11,10 @@
     --pst-font-family-base: var(--pst-font-family-base-system);
     --pst-font-family-heading: var(--pst-font-family-base);
     --pst-font-family-monospace: var(--pst-font-family-monospace-system);
+}
 
+/* Light theme (default) - keeping previous values*/
+html[data-theme="light"] {
     /*****************************************************************************
     * Colors
     **/
@@ -31,20 +34,21 @@
     --heading-color: #333333;
 }
 
-html {
-    --pst-color-primary: #48A2AE;
-    --pst-color-primary-text: #333333;
-    --pst-color-secondary: #052535;
-    --pst-color-link: #48A2AE;
-    --pst-color-link-hover: #48A2AE;
-    --pst-color-inline-code: 178, 34, 34;
-    --pst-color-sidebar-link-hover: #48A2AE;
-    --pst-color-toc-link-hover: #48A2AE;
-    --pst-color-toc-link-active: #48A2AE;
-    --pst-color-headerlink: #48A2AE;
-    --pst-color-headerlink-hover: #48A2AE;
-    --bg-color: #ffffff;
-    --heading-color: #333333;
+/* Dark theme */
+html[data-theme="dark"] {
+    --pst-color-primary: #5CBFCC;
+    --pst-color-primary-text: #ffffff;
+    --pst-color-secondary: #7FB9C2;
+    --pst-color-link: #5CBFCC;
+    --pst-color-link-hover: #7FB9C2;
+    --pst-color-inline-code: rgb(255, 99, 99);
+    --pst-color-sidebar-link-hover: #5CBFCC;
+    --pst-color-toc-link-hover: #5CBFCC;
+    --pst-color-toc-link-active: #5CBFCC;
+    --pst-color-headerlink: #5CBFCC;
+    --pst-color-headerlink-hover: #5CBFCC;
+    --bg-color: #1a1a1a;
+    --heading-color: #ffffff;
 }
 
 html {
@@ -56,49 +60,48 @@ html {
 body{
     font-family: var(--pst-font-family-base-system);
     background-color: var(--bg-color);
-    color: #333333;
-    ;
+    color: var(--pst-color-primary-text);
   }
 
 /* Text styling */
 p{
     line-height: 1.7em;
     font-size: 16px;
-    color: #333333;
+    color: var(--pst-color-primary-text);
     font-family: var(--pst-font-family-base-system);
 }
 
 h1{
     font-family: var(--pst-font-family-base-system);
-    color: #333333;
+    color: var(--pst-color-on-background);
     margin-bottom: 34px;
 }
 
 h2{
     font-family: var(--pst-font-family-base-system);
-    color: #333333;
+    color: var(--pst-color-on-background);
     margin-bottom: 28px;
 }
 
 h3{
     font-family: var(--pst-font-family-base-system);
-    color: #333333;
+    color: var(--pst-color-on-background);
     margin-bottom: 24px;
 }
 
 h4{
     font-family: var(--pst-font-family-base-system);
-    color: #333333;
+    color: var(--pst-color-on-background);
 }
 
 h5{
     font-family: var(--pst-font-family-base-system);
-    color: #333333;
+    color: var(--pst-color-on-background);
 }
 
 h6{
     font-family: var(--pst-font-family-base-system);
-    color: #333333;
+    color: var(--pst-color-on-background);
 }
 
 a{
@@ -148,6 +151,10 @@ p.prev-next-title:hover{
     --pst-color-accent: #48A2AE;
 }
 
+html[data-theme="dark"] .bd-search input {
+    --pst-color-accent: #5CBFCC;
+}
+
 .toc-entry a.nav-link.active {
     box-shadow: none;
 }
@@ -163,6 +170,20 @@ p.prev-next-title:hover{
     padding-right: 0.5em;
 }
 
+/* Dark mode styles for code */
+html[data-theme="dark"] .highlight .hll {
+    background-color: #1e3d1e;
+}
+
+html[data-theme="dark"] pre {
+    background-color: var(--pst-color-on-background);
+    color: var(--pst-color-primary-text);
+}
+
+html[data-theme="dark"] .highlight {
+    background-color: var(--pst-color-on-background);
+}
+
 /*Video handling*/
 
 iframe {
@@ -178,16 +199,26 @@ iframe {
     padding: 0;
     display: flex;
     align-items: center;
+    background-color: var(--pst-color-on-background);
+    background: var(--pst-color-background);  
 }
 
 .nav-item{
     --pst-color-link-hover: #48A2AE;
 }
 
+html[data-theme="dark"] .nav-item {
+    --pst-color-link-hover: #5CBFCC;
+}
+
 .search-button__button{
     --pst-color-link-hover: #48A2AE;
 }
 
+html[data-theme="dark"] .search-button__button {
+    --pst-color-link-hover: #5CBFCC;
+}
+
 .navbar-end{
     width: 33%;
 }
@@ -206,7 +237,7 @@ iframe {
 }
 
 .fa-chevron-down:before {
-    color: #888888;
+    color: var(--pst-color-text-muted, #888888);  /* Add variable with fallback */
 }
 
 .bd-sidebar label  {
@@ -270,7 +301,7 @@ ul.list-caption li.selected > label i:before  {
 
 .bd-sidebar .nav li>a {
     padding: 4px 0 0 22px;
-    color: #888888;
+    color: var(--pst-color-text-muted, #888888);  /* Add variable with fallback */
 }
 
 .bd-sidebar .nav li.has-children>a {
@@ -286,7 +317,7 @@ nav.bd-links p.caption {
     text-transform: unset;
     font-weight: unset;
     font-size: 14px;
-    color: #888888;
+    color: var(--pst-color-text-muted, #888888);  /* Add variable with fallback */
 }
 
 nav.bd-links .current>a {
@@ -300,9 +331,15 @@ nav.bd-links .current>a {
 
 .bd-search input {
     border-radius: 16px;
-    border: 1px solid #e7e7e7;
+    border: 1px solid var(--pst-color-border, #e7e7e7);
     padding: 24px 24px 24px 50px;
     font-size: 15px;
+    background-color: var(--pst-color-background);
+    color: var(--pst-color-text);
+}
+
+html[data-theme="dark"] .bd-search input {
+    border-color: var(--pst-color-border, #404040);
 }
 
 .rst-versions.shift-up {
@@ -346,7 +383,7 @@ div.admonition {
 }
 
 .admonition.warning {
-    background: #ffffff;
+    background: var(--pst-color-on-background);
     border-color: #F6DB9A;
     border: 1px solid;
 }
@@ -356,7 +393,7 @@ div.admonition {
 }
 
 .admonition.note {
-    background: #ffffff;
+    background: var(--pst-color-on-background);
     border-color: #acceed;
     border: 1px solid;
 }
@@ -469,7 +506,7 @@ div.admonition {
     .row .bd-sidebar .sidebar-start-items {
         width: 100vw;
         height: 100vh;
-        background-color: #ededed;
+        background-color: var(--pst-color-background);
         margin-left: -15px;
         padding: 0 15px;
     }
@@ -485,11 +522,12 @@ div.admonition {
     
     .bd-search .icon {
         left: 22px;
+        color: var(--pst-color-text-muted);
     }
     
     .bd-links {
-        background-color: #ededed;
         padding-left: 15px;
+        background-color: var(--pst-color-background);
     }
     
     .bd-search {
@@ -506,7 +544,6 @@ div.admonition {
         position: absolute;
         top: calc(100vh - 65px);
         width: 100%;
-        background-color: #dbdbdb;
     }
     
     .bd-toc-item.active {
diff --git a/source/_static/css/tippy.css b/source/_static/css/tippy.css
index 4bb87638e5..d625f7e8ed 100644
--- a/source/_static/css/tippy.css
+++ b/source/_static/css/tippy.css
@@ -1,4 +1,4 @@
 .tippy-box {
-    background-color: #e5e5e5;
-    color:var(--pst-font-color);
+    background-color: var(--pst-color-on-background);
+    color: var(--pst-color-on-surface);
 }
diff --git a/source/_templates/navbar-logo.html b/source/_templates/navbar-logo.html
index 753eb7c238..70e107b268 100644
--- a/source/_templates/navbar-logo.html
+++ b/source/_templates/navbar-logo.html
@@ -7,6 +7,7 @@
 
 <div>
     <a href="https://developer.concordium.software/">
-        <img class="logo" src="{{pathto('_static/concordium-logo-dark.svg', 1)}}" />
+        <img class="logo light-logo" src="{{pathto('_static/concordium-logo-dark.svg', 1)}}" />
+        <img class="logo dark-logo" src="{{pathto('_static/concordium-logo.svg', 1)}}" />
     </a>
 </div>
diff --git a/source/mainnet/conf.py b/source/mainnet/conf.py
index 87af47b433..b37890092a 100644
--- a/source/mainnet/conf.py
+++ b/source/mainnet/conf.py
@@ -156,7 +156,7 @@
     "navigation_depth": 5,
     "navbar_start": ["navbar-logo"],
     "navbar_center": ["navbar-nav"],
-    "navbar_end": ["navbar-icon-links"],
+    "navbar_end": ["navbar-icon-links", "theme-switcher"],
     "secondary_sidebar_items": ["page-toc", "edit-this-page"],
     "article_footer_items": ["footer-article"],
     "show_prev_next": True,
@@ -256,7 +256,7 @@
     "github_version": "main",
     "doc_path": "source/mainnet",
     "conf_py_path": "/source/",
-    "default_mode": "light",
+    "default_mode": "auto",
 }
 
 # Add any paths that contain custom static files (such as style sheets) here,