diff --git a/static/css/variant.css b/static/css/variant.css
index 648d8f28c6..8090e9c3da 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -37,8 +37,8 @@
 
     --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace);
 
-    --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, default));
-    --INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, light));
+    --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, var(--INTERNAL-PRINT-MERMAID-theme)));
+    --INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, var(--INTERNAL-PRINT-SWAGGER-theme)));
 
     --INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color));
 
@@ -89,6 +89,15 @@
     --INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color));
     --INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color));
     --INTERNAL-BOX-WARNING-TEXT-color: var(--BOX-WARNING-TEXT-color, var(--INTERNAL-BOX-RED-TEXT-color));
+
+    /* print style, values taken from relearn-light as it is used as a default print style */
+    --INTERNAL-PRINT-MERMAID-theme: var(--PRINT-MERMAID-theme, default);
+    --INTERNAL-PRINT-MAIN-BG-color: var(--PRINT-MAIN-BG-color, #ffffff);
+    --INTERNAL-PRINT-CODE-font: var(--PRINT-CODE-font, "Consolas", menlo, monospace);
+    --INTERNAL-PRINT-TAG-BG-color: var(--PRINT-TAG-BG-color, #7dc903);
+    --INTERNAL-PRINT-MAIN-font: var(--PRINT-MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif);
+    --INTERNAL-PRINT-MAIN-TEXT-color: var(--PRINT-MAIN-TEXT-color, #101010);
+    --INTERNAL-PRINT-SWAGGER-theme: var(--PRINT-SWAGGER-theme, light);
 }
 
 body {
diff --git a/static/js/theme.js b/static/js/theme.js
index c59bd035d5..30b14f63c0 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -87,7 +87,7 @@ function restoreTabSelections() {
     }
 }
 
-function initMermaid( update ) {
+function initMermaid( update, attrs ) {
     // we are either in update or initialization mode;
     // during initialization, we want to edit the DOM;
     // during update we only want to execute if something changed
@@ -113,10 +113,9 @@ function initMermaid( update ) {
         return '%%{init: ' + JSON.stringify( graph.dir ) + '}%%\n' + graph.content;
     };
 
-    var init_func = function(){
-        state.is_initialized = true;
+    var init_func = function( attrs ){
         var is_initialized = false;
-        var theme = variants.getColorValue( 'MERMAID-theme' );
+        var theme = attrs.theme;
         document.querySelectorAll('.mermaid').forEach( function( element ){
             var parse = parseGraph( decodeHTML( element.innerHTML ) );
 
@@ -138,9 +137,9 @@ function initMermaid( update ) {
         return is_initialized;
     }
 
-    var update_func = function(){
+    var update_func = function( attrs ){
         var is_initialized = false;
-        var theme = variants.getColorValue( 'MERMAID-theme' );
+        var theme = attrs.theme;
         document.querySelectorAll( '.mermaid-container' ).forEach( function( e ){
             var element = e.querySelector( '.mermaid' );
             var code = e.querySelector( '.mermaid-code' );
@@ -174,28 +173,66 @@ function initMermaid( update ) {
         return;
     }
 
-    var is_initialized = ( update ? update_func() : init_func() );
+    if( !state.is_initialized ){
+        state.is_initialized = true;
+        window.addEventListener( 'beforeprint', function(){
+            initMermaid( true, {
+                'theme': variants.getColorValue( 'PRINT-MERMAID-theme' ),
+            });
+		}.bind( this ) );
+		window.addEventListener( 'afterprint', function(){
+            initMermaid( true );
+		}.bind( this ) );
+    }
+
+    attrs = attrs || {
+        'theme': variants.getColorValue( 'MERMAID-theme' ),
+    };
+    var is_initialized = ( update ? update_func( attrs ) : init_func( attrs ) );
     if( is_initialized ){
         mermaid.init();
         $(".mermaid svg").svgPanZoom({});
     }
 }
 
-function initSwagger( update ){
+function initSwagger( update, attrs ){
+    var state = this;
+    if( update && !state.is_initialized ){
+        return;
+    }
     if( typeof variants == 'undefined' ){
         return;
     }
-    var attrs = [
-        [ 'bg-color', variants.getColorValue( 'MAIN-BG-color' ) ],
-        [ 'mono-font', variants.getColorValue( 'CODE-font' ) ],
-        [ 'primary-color', variants.getColorValue( 'TAG-BG-color' ) ],
-        [ 'regular-font', variants.getColorValue( 'MAIN-font' ) ],
-        [ 'text-color', variants.getColorValue( 'MAIN-TEXT-color' ) ],
-        [ 'theme', variants.getColorValue( 'SWAGGER-theme' ) ],
-    ];
+
+    if( !state.is_initialized ){
+        state.is_initialized = true;
+        window.addEventListener( 'beforeprint', function(){
+            initSwagger( true, {
+                'bg-color': variants.getColorValue( 'PRINT-MAIN-BG-color' ),
+                'mono-font': variants.getColorValue( 'PRINT-CODE-font' ),
+                'primary-color': variants.getColorValue( 'PRINT-TAG-BG-color' ),
+                'regular-font': variants.getColorValue( 'PRINT-MAIN-font' ),
+                'text-color': variants.getColorValue( 'PRINT-MAIN-TEXT-color' ),
+                'theme': variants.getColorValue( 'PRINT-SWAGGER-theme' ),
+            });
+        }.bind( this ) );
+        window.addEventListener( 'afterprint', function(){
+            initSwagger( true );
+        }.bind( this ) );
+    }
+
+    attrs = attrs || {
+        'bg-color': variants.getColorValue( 'MAIN-BG-color' ),
+        'mono-font': variants.getColorValue( 'CODE-font' ),
+        'primary-color': variants.getColorValue( 'TAG-BG-color' ),
+        'regular-font': variants.getColorValue( 'MAIN-font' ),
+        'text-color': variants.getColorValue( 'MAIN-TEXT-color' ),
+        'theme': variants.getColorValue( 'SWAGGER-theme' ),
+    };
     document.querySelectorAll( 'rapi-doc' ).forEach( function( e ){
-        attrs.forEach( function( attr ){
-            e.setAttribute( attr[0], attr[1] );
+        Object.keys( attrs ).forEach( function( key ){
+            /* this doesn't work for FF 102, maybe related to custom elements? */
+            e.setAttribute( key, attrs[key] );
         });
     });
 }