diff --git a/v4/assets/sass/theme.scss b/v4/assets/sass/theme.scss
index 2343a9139..abf860b21 100644
--- a/v4/assets/sass/theme.scss
+++ b/v4/assets/sass/theme.scss
@@ -64,48 +64,37 @@ $footer-headline-color: {{ .Param "footerHeadlineColor" | default "#444" }};
 // Base theme styling
 @import 'bilberry-hugo-theme';
 
-// The variables below are processed in './layouts/partials/css.html'
-// when it's executed as template by Hugo pipes.
-
-// Width of the main content area where the the actual content's width is $site-width - 100px
 .dark-mode {
-$site-width: {{ .Param "siteWidth" | default "800px" }};
-
-$headline-font: {{ .Param "headlineFont" | default "'Comfortaa',sans-serif" }};
-$content-font: {{ .Param "contentFont" | default "'Open Sans',sans-serif" }};
-$article-footer-font: {{ .Param "articleFooterFont" | default "'Fira Code',monospace" }};
-$code-block-font: {{ .Param "codeBlockFont" | default "'Fira Code',monospace" }};
-
-$page-background-color: {{ .Param "pageBackgroundColor" | default "#333" }};
-$base-color: {{ .Param "baseColor" | default "#1d1f38" }};
-$special-color: {{ .Param "specialColor" | default "#2D3642" }};
-$highlight-color: {{ .Param "highlightColor" | default "saturate(#5c8b59,20)" }};
-$text-color: {{ .Param "textColor" | default "darken(invert(#222), 20)" }};
-$blockquote-background-color: {{ .Param "blockquoteBackgroundColor" | default "rgba(99,110,110,0.2)" }};
-
-$nav-background-color: {{ .Param "navBackgroundColor" | default "$special-color" }};
-$nav-text-color: {{ .Param "navTextColor" | default "darken(#f1f1f1,20)" }};
-$algolia-search-box-color: {{ .Param "algoliaSearchBoxColor" | default "$nav-text-color" }};
-$algolia-search-box-icon-color: {{ .Param "algoliaSearchBoxIconColor" | default "#888" }};
-$algolia-search-box-background-color: {{ .Param "algoliaSearchBoxBackgroundColor" | default "#222" }};
-$algolia-border-color: {{ .Param "algoliaBorderColor" | default "#e4e4e4" }};
-
-$header-text-color: {{ .Param "headerTextColor" | default "$nav-text-color" }};
-$logo-color: {{ .Param "logoColor" | default "darken(#f1f1f1, 60)" }};
-$bubble-color: {{ .Param "bubbleColor" | default "$logo-color" }};
-$bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#373737" }};
-$bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }};
-$connection-line-color: {{ .Param "connectionLineColor" | default "#444" }};
-$connection-dot-color: {{ .Param "connectionDotColor" | default "#444" }};
-
-$article-background-color: {{ .Param "articleBackgroundColor" | default "#222" }};
-$meta-text-color: {{ .Param "metaTextColor" | default "darken(#f1f1f1,40)" }};
-$meta-border-color: {{ .Param "metaBorderColor" | default "#545454" }};
-$continue-reading-hover-color: {{ .Param "continueReadingHoverColor" | default "$meta-text-color" }};
-
-$footer-border-color: {{ .Param "footerBorderColor" | default "#444" }};
-$footer-background-color: {{ .Param "footerBackgroundColor" | default "#222" }};
-$footer-headline-color: {{ .Param "footerHeadlineColor" | default "darken(invert(#444),5)" }};
+$page-background-color: {{ .Param "dkPageBackgroundColor" | default "#333" }};
+$base-color: {{ .Param "dkBaseColor" | default "#1d1f38" }};
+$special-color: {{ .Param "dkSpecialColor" | default "#2D3642" }};
+$highlight-color: {{ .Param "dkHighlightColor" | default "saturate(#5c8b59,20)" }};
+$text-color: {{ .Param "dkTextColor" | default "darken(invert(#222), 20)" }};
+$blockquote-background-color: {{ .Param "dkBlockquoteBackgroundColor" | default "rgba(99,110,110,0.2)" }};
+
+$nav-background-color: {{ .Param "dkNavBackgroundColor" | default "$special-color" }};
+$nav-text-color: {{ .Param "dkNavTextColor" | default "darken(#f1f1f1,20)" }};
+$algolia-search-box-color: {{ .Param "dkAlgoliaSearchBoxColor" | default "$nav-text-color" }};
+$algolia-search-box-icon-color: {{ .Param "dkAlgoliaSearchBoxIconColor" | default "#888" }};
+$algolia-search-box-background-color: {{ .Param "dkAlgoliaSearchBoxBackgroundColor" | default "#222" }};
+$algolia-border-color: {{ .Param "dkAlgoliaBorderColor" | default "#e4e4e4" }};
+
+$header-text-color: {{ .Param "dkHeaderTextColor" | default "$nav-text-color" }};
+$logo-color: {{ .Param "dkLogoColor" | default "darken(#f1f1f1, 60)" }};
+$bubble-color: {{ .Param "dkBubbleColor" | default "$logo-color" }};
+$bubble-background-color: {{ .Param "dkBubbleBackgroundColor" | default "#373737" }};
+$bubble-hover-color: {{ .Param "dkBubbleHoverColor" | default "$highlight-color" }};
+$connection-line-color: {{ .Param "dkConnectionLineColor" | default "#444" }};
+$connection-dot-color: {{ .Param "dkConnectionDotColor" | default "#444" }};
+
+$article-background-color: {{ .Param "dkArticleBackgroundColor" | default "#222" }};
+$meta-text-color: {{ .Param "dkMetaTextColor" | default "darken(#f1f1f1,40)" }};
+$meta-border-color: {{ .Param "dkMetaBorderColor" | default "#545454" }};
+$continue-reading-hover-color: {{ .Param "dkContinueReadingHoverColor" | default "$meta-text-color" }};
+
+$footer-border-color: {{ .Param "dkFooterBorderColor" | default "#444" }};
+$footer-background-color: {{ .Param "dkFooterBackgroundColor" | default "#222" }};
+$footer-headline-color: {{ .Param "dkFooterHeadlineColor" | default "darken(invert(#444),5)" }};
 
 @mixin featuredImage() {
   .featured-image {