fallback for dark theme without JS

High contrast theme will be enabled if the user has enabled dark theme in their system preferences

assets/scss/_custom.scss

@@ -5,7 +5,6 @@ html {
 }
 
 html[data-theme="dark"] {
-
   & #fader {
     background: #121212;
   }
@@ -285,7 +284,7 @@ nav .nav-link {
 .custom-text {
   font-size: 1rem;
   font-weight: 500;
-  letter-spacing: 0.150em;
+  letter-spacing: 0.15em;
   line-height: 1.2;
 }
 
@@ -685,7 +684,7 @@ details:not(:last-of-type) {
 }
 
 details[open] summary svg {
-   transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .circle-icons span {
@@ -752,7 +751,8 @@ details[open] summary svg {
   }
 }
 
-svg, svg path {
+svg,
+svg path {
   transition: 0.25s ease-in-out;
 }
 
@@ -789,7 +789,8 @@ svg, svg path {
   opacity: 1;
   transition: background-color 0.25s ease-in-out;
 
-  &.active, &:hover {
+  &.active,
+  &:hover {
     background-color: $blue-500;
   }
 }

layouts/partials/noscript.html

@@ -1,5 +1,85 @@
 <noscript>
     <style>
+        @media (prefers-color-scheme: dark) {
+            :root #fader {
+                background: #121212;
+            }
+
+            :root * {
+                background: #121212 !important;
+                color: rgba(255, 255, 255, 0.87) !important;
+            }
+
+            :root a:not(.nav-link, .see-more) {
+                text-decoration: underline;
+            }
+
+            :root .screen-reader-text:focus {
+                background-color: #ecc781;
+            }
+
+            :root .logo {
+                fill: #ecc781 !important;
+            }
+
+            :root a {
+                color: #ecc781 !important;
+                border-color: #ecc781;
+            }
+
+            :root .inline-svg svg path {
+                color: #ecc781 !important;
+            }
+
+            :root .acctoggle:hover,
+            :root .acctoggle:focus-visible,
+            :root .acctoggle:focus {
+                border: 2px solid #ecc781;
+            }
+
+            :root .tablinkservice:hover {
+                color: #ecc781 !important;
+                border-left-color: #ecc781;
+            }
+
+            :root .tablinkservice:focus-visible {
+                border-left: 0.2rem solid #ecc781 !important;
+            }
+
+            :root .active {
+                color: #ecc781 !important;
+                border-left-color: #ecc781;
+            }
+
+            :root .carousel-dark .carousel-indicators [data-bs-target] {
+                border-color: #ecc781;
+            }
+
+            :root .carousel-dark .carousel-indicators [data-bs-target]:hover {
+                background-color: #ecc781 !important;
+            }
+
+            :root .carousel-dark .carousel-indicators [data-bs-target].active {
+                background-color: #ecc781 !important;
+            }
+
+            :root .button-filter {
+                color: #ecc781 !important;
+            }
+
+            :root .button-filter:after {
+                background: #ecc781 !important;
+            }
+
+            :root .carousel-control-next path {
+                fill: #ecc781 !important;
+            }
+
+            :root .home a {
+                text-decoration: none !important;
+            }
+        }
+
         #expertise {
             display: block !important;
         }