diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index c16c4c5e429bb49c318e421ae9bd7712f8d1e9c2..2bbe339eeafaee29259d936b163a21fb48a98fa0 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -537,8 +537,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
 
             header .hd1-middle {
                 grid-area: hd1-middle;
-                background-color: #000;
-                background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 90%);
+                background-color: var(--dbp-text-dark);
+                background: linear-gradient(180deg, var(--dbp-text-dark) 0%, var(--dbp-text-dark) 85%, rgba(0,0,0,0) 90%);
             }
 
             header .hd1-right {
@@ -602,13 +602,13 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             }
 
             footer a {
-                border-bottom: 1px solid rgba(0,0,0,0.3);
+                border-bottom: var(--dbp-border-dark);
                 padding: 0;
             }
 
             footer a:hover {
-                color: #fff;
-                background-color: #000;
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
 
             /* We don't allow inline-svg */
@@ -627,17 +627,18 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             .menu a {
                 padding: 0.3em;
                 font-weight: 300;
-                color: #000;
+                color: var(--dbp-text-dark);
                 display: block;
             }
 
             .menu a:hover {
-                color: #E4154B;
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
 
             .menu a.selected {
-                color: var(--dbp-light);
-                background-color: var(--dbp-dark);
+                color: var(--dbp-text-light);
+                background-color: var(--dbp-secondary-dark);
             }
 
             aside .subtitle {
@@ -687,22 +688,22 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
                     position: sticky;
                     top: 0;
                     width: 100%;
-                    background-color: white;
+                    background-color: var(--dbp-base-light);
                     z-index: 10;
                 }
 
                 aside h2.subtitle {
                     display: block;
-                    border-bottom: 1px solid black;
+                    border-bottom: var(--dbp-border-dark);
                     padding: 0.5em 0.5em;
                 }
 
                 aside .menu {
-                    border-bottom: black 1px solid;
+                    border-bottom: var(--dbp-border-dark);
                     border-top-width: 0;
                     width: 100%;
                     position: absolute;
-                    background-color: white;
+                    background-color: var(--dbp-base-light);
                     z-index: 10;
                 }
 
@@ -917,11 +918,11 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
                     <aside>
                         <h2 class="subtitle" @click="${this.toggleMenu}">
                             ${this.subtitle}
-                            <dbp-icon name="chevron-down" style="color: red" id="menu-chevron-icon"></dbp-icon>
+                            <dbp-icon name="chevron-down" style="color: var(--dbp-accent-dark)" id="menu-chevron-icon"></dbp-icon>
                         </h2>
                         <ul class="menu hidden">
                             ${menuTemplates}
-                            <li class="close" @click="${this.hideMenu}"><dbp-icon name="close" style="color: red"></dbp-icon></li>
+                            <li class="close" @click="${this.hideMenu}"><dbp-icon name="close" style="color: var(--dbp-accent-dark)"></dbp-icon></li>
                         </ul>
                     </aside>
 
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index d2baef34ee38e4289bf99bb1ff589b1cc641788f..f24d7d198bb678a286533ce14c1412c3c94b369f 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -110,14 +110,15 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
                 max-width: 25em;
                 position: absolute;
                 z-index: 20;
-                border: solid 1px black;
-                border-radius: var(--dbp-border-radius);
+                border: var(--dbp-border-dark);
+                border-radius: 0px;
                 overflow: hidden;
-                background-color: white;
+                background-color: var(--dbp-base-light);
             }
 
             .dropdown-content {
-                background-color: white;
+                background-color: var(--dbp-base-light);
+                color: var(--dbp-text-dark);
                 padding-bottom: 0.5rem;
                 padding-top: 0.5rem;
             }
@@ -125,19 +126,19 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             .menu a {
                 /*padding: 0.3em;*/
                 font-weight: 400;
-                color: #000;
+                color: var(--dbp-text-dark);
                 display: block;
                 text-decoration: none;
             }
 
             .menu a:hover {
-                color: #E4154B;
+                color: var(--dbp-accent-dark);
             }
 
-            .menu a.selected { color: white; background-color: black; }
+            .menu a.selected { color: var(--dbp-text-light); background-color: var(--dbp-secondary-dark); }
 
             .dropdown-item {
-                color: #4a4a4a;
+                color: var(--dbp-text-muted-dark);
                 display: block;
                 font-size: 0.875rem;
                 line-height: 1.5;
@@ -175,8 +176,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .login-button:hover {
-                background-color: var(--dbp-dark);
-                color: var(--dbp-light);
+                background-color: var(--dbp-hover-base);
+                color: var(--dbp-hover-text);
                 cursor: pointer;
                 transition: none;
             }
@@ -187,7 +188,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .login-box:hover svg path {
-                fill: var(--dbp-light);
+                fill: var(--dbp-base-light);
             }
 
             .login-box .label {
diff --git a/packages/app-shell/src/dbp-app-shell-welcome.js b/packages/app-shell/src/dbp-app-shell-welcome.js
index f2c033a380acb728880a3f1c3ee40d2cdc616679..740efe0d586ecef0cfcca57a4e171f90a751f00f 100644
--- a/packages/app-shell/src/dbp-app-shell-welcome.js
+++ b/packages/app-shell/src/dbp-app-shell-welcome.js
@@ -50,7 +50,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
             }
 
             h2 a:hover {
-                color: #E4154B;
+                color: var(--dbp-accent-dark);
             }
             
             h2 a {
diff --git a/packages/auth/src/dbp-auth-demo.js b/packages/auth/src/dbp-auth-demo.js
index 59cfa4e295a031e71a8c4570b51dd7c7df3a4b75..4281a5dd4a5f5deab36a5a076a49f9002554f853 100644
--- a/packages/auth/src/dbp-auth-demo.js
+++ b/packages/auth/src/dbp-auth-demo.js
@@ -103,7 +103,7 @@ export class DbpAuthDemo extends ScopedElementsMixin(DBPLitElement) {
                     margin-bottom: .5em;
                 }
                 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
-                    color: #363636;
+                    color: var(--dbp-text-dark);
                     font-weight: 600;
                     line-height: 1.125;
                 }
diff --git a/packages/auth/src/login-button.js b/packages/auth/src/login-button.js
index 371b50640ac7ab04773e9a688307070d1f434edf..5ab8b5983cac4a64d42fd94adf0c2826c232349b 100644
--- a/packages/auth/src/login-button.js
+++ b/packages/auth/src/login-button.js
@@ -133,12 +133,12 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .login-box:hover svg path {
-                fill: var(--dbp-light);
+                fill: var(--dbp-base-light);
             }
 
             .login-box:hover {
-                background-color: var(--dbp-dark);
-                color: var(--dbp-light);
+                background-color: var(--dbp-hover-base);
+                color: var(--dbp-hover-text);
                 cursor: pointer;
                 transition: none;
             }
diff --git a/packages/check-in-place-select/src/check-in-place-select.js b/packages/check-in-place-select/src/check-in-place-select.js
index 93036eecd55946047ceef804405fb461a79b77b0..15e69a0a02dff94fa150089d69a31ea2fffe7816 100644
--- a/packages/check-in-place-select/src/check-in-place-select.js
+++ b/packages/check-in-place-select/src/check-in-place-select.js
@@ -362,7 +362,8 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(AdapterLitElement) {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                border: 1px solid #aaa;
+                border: var(--dbp-border-dark);
+                border-color: var(--dbp-text-muted-dark);
                 -moz-border-radius-topright: var(--dbp-border-radius);
                 -moz-border-radius-bottomright: var(--dbp-border-radius);
                 line-height: 100%;
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index 914f6200ed498c2e81313bd34ac25c0959f73352..bb20fee6b104fe970577d1accce863b9ba5ed609 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -76,7 +76,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
                 margin-bottom: .5em;
             }
             .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
-                color: #363636;
+                color: var(--dbp-text-dark);
                 font-weight: 600;
                 line-height: 1.125;
             }
@@ -162,6 +162,12 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
                     <h2>Theming CSS API</h2>
                     <div class="control">
                         <ul>
+                            <li><code>--dbp-primary-light</code>: Primary Light color <div class="demoblock" style="background-color: var(--dbp-primary-light); color: var(--dbp-text-dark)">X</div></li>
+                            <li><code>--dbp-primary-dark</code>: Primary dark color <div class="demoblock" style="background-color: var(--dbp-primary-dark); color: var(--dbp-override-text-light);">X</div></li>
+                            <li><code>--dbp-secondary-light</code>: secondary Light color <div class="demoblock" style="background-color: var(--dbp-secondary-light); color: var(--dbp-text-dark)">X</div></li>
+                            <li><code>--dbp-secondary-dark</code>: secondary dark color <div class="demoblock" style="background-color: var(--dbp-secondary-dark); color: var(--dbp-override-text-light);">X</div></li>
+                            <!-- TODO -->
+                            <!-- old
                             <li><code>--dbp-primary-bg-color</code>: Primary background color <div class="demoblock" style="background-color: var(--dbp-primary-bg-color)"></div></li>
                             <li><code>--dbp-primary-text-color</code>: Primary text color <div class="demoblock" style="background-color: var(--dbp-primary-bg-color); color: var(--dbp-primary-text-color)">X</div></li>
                             <li><code>--dbp-secondary-bg-color</code>: Secondary background color <div class="demoblock" style="background-color: var(--dbp-secondary-bg-color)"></div></li>
@@ -180,6 +186,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
                             <li><code>--dbp-muted-text</code>: Muted text color <div class="demoblock" style="color: var(--dbp-muted-text)">X</div></li>
                             <li><code>--dbp-border-radius</code>: Border-radius <div class="demoblock" style="background-color: var(--dbp-light); border-color: var(--dbp-dark); border-style: solid; border-width: 1px; border-radius: var(--dbp-border-radius)"></div></li>
                             <li><code>--dbp-border-width</code>: Border-width <div class="demoblock" style="background-color: var(--dbp-light); border-color: var(--dbp-dark); border-style: solid; border-width: var(--dbp-border-width); border-radius: 0px;"></div></li>
+                            -->
                         </ul>
                     </div>
                 </div>
@@ -188,8 +195,8 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
                     <pre>
 &lt;style&gt;
 html {
-    /* This will override --dbp-primary-bg-color */
-    --dbp-override-primary-bg-color: green;
+    /* This will override --dbp-primary-dark */
+    --dbp-override-primary-dark: green;
     /* Same for all other variables, prefix with "override" */
 }
 &lt;/style&gt;</pre>
diff --git a/packages/common/src/spinner.js b/packages/common/src/spinner.js
index 88e20f5fd23f071e48192a5faee813e2e88bb78f..f3796081e496531ed88d30deb93732ffbce5cf09 100644
--- a/packages/common/src/spinner.js
+++ b/packages/common/src/spinner.js
@@ -22,7 +22,7 @@ export class Spinner extends HTMLElement {
 .all-spinner-tuglogo-box {
   width:20%;
     height:20%;
-     background-color:#e4154b;
+     background-color:var(--dbp-accent-dark);
         position:absolute;
           top:50%;
             left:50%;
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 9580d7a188ded86d1ab54dbb74ddd135c02809a9..32e050cc5bcf9f16e20e645c4104c5416ce5bace 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -9,30 +9,58 @@ import {getIconSVGURL} from './src/icon.js';
 export function getThemeCSS() {
     // language=css
     return css`
-        :host {
-            --dbp-primary-bg-color: var(--dbp-override-primary-bg-color, #007bff);
-            --dbp-primary-text-color: var(--dbp-override-primary-text-color, #fff);
-            --dbp-primary-button-border: var(--dbp-override-primary-button-border, #007bff);
-            --dbp-secondary-bg-color: var(--dbp-override-secondary-bg-color, #6c757d);
-            --dbp-secondary-text-color: var(--dbp-override-secondary-text-color, #fff);
-            --dbp-info-bg-color: var(--dbp-override-info-bg-color, #17a2b8);
-            --dbp-info-text-color: var(--dbp-override-info-text-color, #fff);
-            --dbp-success-bg-color: var(--dbp-override-success-bg-color, #28a745);
-            --dbp-success-text-color: var(--dbp-override-success-text-color, #fff);
-            --dbp-warning-bg-color: var(--dbp-override-warning-bg-color, #ffc107);
-            --dbp-warning-text-color: var(--dbp-override-warning-text-color, #343a40);
-            --dbp-warning-color: var(--dbp-override-warning-color, #D57A1C);
-            --dbp-danger-bg-color: var(--dbp-override-danger-bg-color, #dc3545);
-            --dbp-danger-text-color: var(--dbp-override-danger-text-color, #fff);
-            --dbp-light: var(--dbp-override-light, #f8f9fa);
-            --dbp-dark: var(--dbp-override-dark, #343a40);
-            --dbp-muted-text: var(--dbp-override-muted-text, #6c757d);
-            --dbp-border-radius: var(--dbp-override-border-radius, 0px);
-            --dbp-border-width: var(--dbp-override-border-width, 1px);
-            --dbp-border-color: var(--dbp-override-border-color, #000);
-            --dbp-placeholder-color: #777;
-            --dbp-downloaded-bg-color: var(--dbp-override-downloaded-bg-color, #c8dcc8);
-        }
+
+    :host {
+        /* old variables */
+        --dbp-primary-bg-color: var(--dbp-override-primary-bg-color, #007bff);
+        --dbp-primary-text-color: var(--dbp-override-primary-text-color, #fff);
+        --dbp-primary-button-border: var(--dbp-override-primary-button-border, #007bff);
+        --dbp-secondary-bg-color: var(--dbp-override-secondary-bg-color, #6c757d);
+        --dbp-secondary-text-color: var(--dbp-override-secondary-text-color, #fff);
+        --dbp-info-bg-color: var(--dbp-override-info-bg-color, #17a2b8);
+        --dbp-info-text-color: var(--dbp-override-info-text-color, #fff);
+        --dbp-success-bg-color: var(--dbp-override-success-bg-color, #28a745);
+        --dbp-success-text-color: var(--dbp-override-success-text-color, #fff);
+        --dbp-warning-bg-color: var(--dbp-override-warning-bg-color, #ffc107);
+        --dbp-warning-text-color: var(--dbp-override-warning-text-color, #343a40);
+        --dbp-warning-color: var(--dbp-override-warning-color, #D57A1C);
+        --dbp-danger-bg-color: var(--dbp-override-danger-bg-color, #dc3545);
+        --dbp-danger-text-color: var(--dbp-override-danger-text-color, #fff);
+        --dbp-light: var(--dbp-override-light, #f8f9fa);
+        --dbp-dark: var(--dbp-override-dark, #343a40);
+        --dbp-muted-text: var(--dbp-override-muted-text, #6c757d);
+        --dbp-border-width: var(--dbp-override-border-width, 1px);
+        --dbp-border-color: var(--dbp-override-border-color, #000);
+        --dbp-placeholder-color: #777;
+        --dbp-downloaded-bg-color: var(--dbp-override-downloaded-bg-color, #c8dcc8);
+        
+        --dbp-base-light: var(--dbp-override-base-light, var(--dbp-override-light, #ffffff));
+        --dbp-base-dark: var(--dbp-override-base-dark, var(--dbp-override-dark, #000000));
+        --dbp-text-light: var(--dbp-override-text-light, var(--dbp-override-light, #ffffff));
+        --dbp-text-dark: var(--dbp-override-text-dark, #000000);
+        --dbp-text-muted-light: var(--dbp-override-text-muted-light, #adadad);
+        --dbp-text-muted-dark: var(--dbp-override-text-muted-dark, #666666);
+        --dbp-accent-light: var(--dbp-override-accent-light, var(--dbp-override-primary-bg-color, #c24f68));
+        --dbp-accent-dark: var(--dbp-override-accent-dark, var(--dbp-override-primary-bg-color, #c24f68));
+        --dbp-primary-light: var(--dbp-override-primary-light, var(--dbp-override-primary-bg-color, #8ca4eb)); /*remove second value if no app needs to be backported */
+        --dbp-primary-dark: var(--dbp-override-primary-dark, var(--dbp-override-primary-bg-color, #2a4491));
+        --dbp-secondary-light: var(--dbp-override-secondary-light, var(--dbp-override-light, #ffffff));
+        --dbp-secondary-dark: var(--dbp-override-secondary-dark, var(--dbp-override-dark, #000000));
+        --dbp-info-light: var(--dbp-override-info-light, var(--dbp-override-primary-bg-color, #8ca4eb));
+        --dbp-info-dark: var(--dbp-override-info-dark, var(--dbp-override-primary-bg-color, #2a4491));
+        --dbp-success-light: var(--dbp-override-success-light, var(--dbp-override-success-bg-color, #7acc79));
+        --dbp-success-dark: var(--dbp-override-success-dark, var(--dbp-override-success-bg-color, #188018));
+        --dbp-warning-light: var(--dbp-override-warning-color, var(--dbp-override-warning-light, #f99a41));
+        --dbp-warning-dark: var(--dbp-override-warning-color, var(--dbp-override-warning-dark, #c15500));
+        --dbp-danger-light: var(--dbp-override-danger-bg-color, var(--dbp-override-danger-light, #ff887a));
+        --dbp-danger-dark: var(--dbp-override-danger-bg-color, var(--dbp-override-danger-dark, #de3535));
+        --dbp-border-light: var(--dbp-override-border-light, 1px solid #ffffff);
+        --dbp-border-dark: var(--dbp-override-border-dark, 1px solid #000000);
+        --dbp-border-radius: var(--dbp-override-border-radius, 0px);
+        --dbp-hover-base: var(--dbp-override-hover-base, var(--dbp-override-dark, #000000));
+        --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light, #ffffff));
+    }
+    
     `;
 }
 
@@ -76,7 +104,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         }
 
         .input::placeholder, .textarea::placeholder, .select select::placeholder {
-            color: var(--dbp-placeholder-color);
+            color: var(--dbp-text-muted-dark);
         }
 
         input, ::placeholder, textarea, select, .select select {
@@ -101,7 +129,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         .hidden { display: none; }
 
         a {
-            color: var(--dbp-override-muted-text);
+            color: var(--dbp-text-dark);
             cursor: pointer;
             text-decoration: none;
         }
@@ -112,8 +140,8 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         }
 
         a.is-download:hover {
-            color: #fff;
-            background-color: #000;
+            color: var(--dbp-hover-text);
+            background-color: var(--dbp-hover-base);
         }
 
         /* Inline SVG don't work in our web-components */
@@ -130,13 +158,13 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         */
 
         .title {
-            color: #363636;
+            color: var(--dbp-text-dark);
             font-size: 2rem;
             font-weight: 600;
             line-height: 1.125;
         }
 
-        ${marginPaddingResetCss}
+        ${marginPaddingResetCss}.int-link-internal
 
         .button[disabled], .file-cta[disabled], .file-name[disabled], .input[disabled], .pagination-ellipsis[disabled],
         .pagination-link[disabled], .pagination-next[disabled], .pagination-previous[disabled], .select fieldset[disabled] select,
@@ -149,9 +177,9 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
 
         .input, .select select, .textarea {
             background-color: #fff;
-            border-color: var(--dbp-muted);
+            border-color: var(--dbp-text-muted-dark);
             border-radius: var(--dbp-border-radius);
-            color: var(--dbp-muted);
+            color: var(--dbp-text-muted-dark);
         }
 
         *, ::after, ::before {
@@ -159,16 +187,14 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         }
 
         select:not(.select) {
-            -moz-appearance: none;
+            -moz-appearance: none;.dropdown-menu
             -webkit-appearance: none;
             background: calc(100% - 0.2rem) center no-repeat url("${unsafeCSS(getIconSVGURL('chevron-down'))}");
             background-size: 25%;
-            border-color: black;
-            border-width: 1px;
+            border: var(--dbp-border-dark);
             border-radius: var(--dbp-border-radius);
-            color: black;
+            color: var(--dbp-text-dark);
             padding: 0.14rem 1.0rem 0.14rem 0.14rem;
-            border-style: solid;
         }
     `;
 }
@@ -326,7 +352,8 @@ export function getNotificationCSS() {
     // language=css
     return css`
         .notification {
-            background-color: var(--dbp-light);
+            background-color: var(--dbp-base-light);
+            color: var(--dbp-text-dark);
             padding: 1.25rem 2.5rem 1.25rem 1.5rem;
             position: relative;
             border-radius: var(--dbp-border-radius);
@@ -343,8 +370,8 @@ export function getNotificationCSS() {
 
         .notification code,
         .notification pre {
-            color: var(--dbp-light);
-            background: var(--dbp-muted-text);
+            color: var(--dbp-text-light);
+            background: var(--dbp-muted-text-dark);
         }
 
         .notification pre code {
@@ -369,28 +396,28 @@ export function getNotificationCSS() {
         }
 
         .notification.is-primary {
-            background-color: var(--dbp-primary-bg-color);
-            color: var(--dbp-primary-text-color);
+            background-color: var(--dbp-primary-dark);
+            color: var(--dbp-text-light);
         }
 
         .notification.is-info {
-            background-color: var(--dbp-info-bg-color);
-            color: var(--dbp-info-text-color);
+            background-color: var(--dbp-info-dark);
+            color: var(--dbp-text-light);
         }
 
         .notification.is-success {
-            background-color: var(--dbp-success-bg-color);
-            color: var(--dbp-success-text-color);
+            background-color: var(--dbp-success-light);
+            color: var(--dbp-text-dark);
         }
 
         .notification.is-warning {
-            background-color: var(--dbp-warning-bg-color);
-            color: var(--dbp-warning-text-color);
+            background-color: var(--dbp-warning-light);
+            color: var(--dbp-text-dark);
         }
 
         .notification.is-danger {
-            background-color: var(--dbp-danger-bg-color);
-            color: var(--dbp-danger-text-color);
+            background-color: var(--dbp-danger-dark);
+            color: var(--dbp-text-light);
         }
     `;
 }
@@ -402,8 +429,9 @@ export function getButtonCSS() {
             border-style: solid;
             border-color: black;
             border-width: 1px;
+            border: var(--dbp-border-dark);
             border-radius: var(--dbp-border-radius);
-            color: black;
+            color: var(--dbp-text-dark);
             cursor: pointer;
             justify-content: center;
             padding-bottom: calc(0.375em - 1px);
@@ -419,9 +447,10 @@ export function getButtonCSS() {
         }
 
         button.button:hover:enabled, .button:hover:enabled, button.dt-button:hover:enabled, button.dt-button:hover:not(.disabled) {
-            color: white;
+            color: var(--dbp-hover-text);
             background: none;
-            background-color: black;
+            border-color: var(--dbp-hover-base);
+            background-color: var(--dbp-hover-base);
         }
 
         button.button.is-small, .button.is-small {
@@ -430,29 +459,33 @@ export function getButtonCSS() {
         }
 
         button.button.is-primary, .button.is-primary {
-            background-color: var(--dbp-primary-bg-color);
-            border: var(--dbp-primary-button-border);
-            color: var(--dbp-primary-text-color);
+            background-color: var(--dbp-primary-dark);
+            border-color: var(--dbp-primary-dark);
+            color: var(--dbp-text-light);
         }
 
         button.button.is-info, .button.is-info {
-            background-color: var(--dbp-info-bg-color);
-            color: var(--dbp-info-text-color);
+            background-color: var(--dbp-info-dark);
+            border-color: var(--dbp-info-dark);
+            color: var(--dbp-text-light);
         }
 
         button.button.is-success, .button.is-success {
-            background-color: var(--dbp-success-bg-color);
-            color: var(--dbp-success-text-color);
+            background-color: var(--dbp-success-light);
+            border-color: var(--dbp-success-light);
+            color: var(--dbp-text-dark);
         }
 
         button.button.is-warning, .button.is-warning {
-            background-color: var(--dbp-warning-bg-color);
-            color: var(--dbp-warning-text-color);
+            background-color: var(--dbp-warning-light);
+            border-color: var(--dbp-warning-light);
+            color: var(--dbp-text-dark);
         }
 
         .button.button.is-danger, .button.is-danger {
-            background-color: var(--dbp-danger-bg-color);
-            color: var(--dbp-danger-text-color);
+            background-color: var(--dbp-danger-dark);
+            border-color: var(--dbp-danger-dark);
+            color: var(--dbp-text-light);
         }
 
         button.button[disabled], .button[disabled], fieldset[disabled] .button {
@@ -508,11 +541,9 @@ export function getRadioAndCheckboxCss() {
             left: 0;
             height: 21px;
             width: 21px;
-            background-color: white;
-            border: solid;
-            border-radius: var(--dbp-border-radius);
-            border-width: var(--dbp-border-width);
-            border-color: var(--dbp-border-color);
+            background-color: var(--dbp-base-light);
+            border-radius: 0px;
+            border: var(--dbp-border-dark);
         }
         
         .radiobutton {
@@ -521,26 +552,26 @@ export function getRadioAndCheckboxCss() {
             left: 0;
             height: 20px;
             width: 20px;
-            background-color: white;
+            background-color: var(--dbp-base-light);
             border: solid;
             border-radius: 100%;
-            border-width: var(--dbp-border-width);
-            border-color: var(--dbp-border-color);
+            border: var(--dbp-border-dark);
+            
             box-sizing: content-box;
         }
 
         .button-container input[type="radio"]:checked ~ .radiobutton:after {
-            border-color: white;
+            border-color: var(--dbp-base-light);
         }
         
         .button-container input[type="radio"]:disabled ~ .radiobutton {
-            border-color: #aaa;
-            background-color: #eee;
+            border-color: var(--dbp-text-muted-light);
+            background-color: var(--dbp-text-muted-light);
         }
 
         .button-container input[type="radio"]:checked:disabled ~ .radiobutton:after {
-            border-color: #aaa;
-            background-color: #aaa;
+            border-color: var(--dbp-text-muted-light);
+            background-color: var(--dbp-text-muted-light);
         }
         
         .radiobutton:after {
@@ -558,24 +589,26 @@ export function getRadioAndCheckboxCss() {
             top: 0px;
             width: 100%;
             height: 100%;
-            background-color: var(--dbp-border-color);
+            background-color: var(--dbp-base-dark);
             border: none;
             border-radius: 100%;
-            border: 2px solid white;
+            border: 2px solid var(--dbp-base-light);
             box-sizing: border-box;
         }
         
         .button-container input[type="checkbox"]:checked ~ .checkmark:after {
-            border-color: var(--dbp-border-color);
+            border-bottom: var(--dbp-border-dark);
+            border-right: var(--dbp-border-dark);
+            border-width: 0 2px 2px 0;
         }
         
         .button-container input[type="checkbox"]:disabled ~ .checkmark {
-            border-color: #aaa;
-            background-color: #eee;
+            border-color: var(--dbp-text-muted-light);
+            background-color: var(--dbp-text-muted-light);
         }
 
         .button-container input[type="checkbox"]:checked:disabled ~ .checkmark:after {
-            border-color: #aaa;
+            border-color: var(--dbp-text-muted-light);
         }
 
         .checkmark:after {
@@ -593,7 +626,7 @@ export function getRadioAndCheckboxCss() {
             top: 4px;
             width: 6px;
             height: 10px;
-            border: solid var(--dbp-border-color);
+            border: var(--dbp-border-dark);
             border-width: 0 2px 2px 0;
             -webkit-transform: rotate(45deg);
             -ms-transform: rotate(45deg);
@@ -675,7 +708,7 @@ export function getTagCSS() {
 
         .tag:not(body) {
             align-items: center;
-            background-color: whitesmoke;
+            background-color: var(--dbp-text-muted-light);
             border-radius: var(--dbp-border-radius);
             color: #4a4a4a;
             display: inline-flex;
@@ -694,13 +727,13 @@ export function getTagCSS() {
         }
 
         .tag:not(body).is-dark {
-            background-color: var(--dbp-dark);
-            color: whitesmoke;
+            background-color: var(--dbp-secondary-dark);
+            color: var(--dbp-text-light);
         }
 
         .tag:not(body).is-light {
-            background-color: var(--dbp-light);
-            color: #363636;
+            background-color: var(--dbp-base-light);
+            color: var(--dbp-text-dark);
         }
 
         .tag:not(body).is-normal {
@@ -790,7 +823,7 @@ export function getDocumentationCSS() {
         }
 
         .documentation a {
-            border-bottom: 1px solid var(--dbp-muted-text);
+            border-bottom: 1px solid var(--dbp-muted-text-dark);
             transition: background-color 0.15s, color 0.15s;
         }
 
@@ -828,11 +861,10 @@ export function getSelect2CSS() {
         .select2-container--default .select2-selection--single .select2-selection__clear {
             font-size: 1.5em;
             font-weight: 300;
-            /* color: red; */
         }
 
         .select2-container--default .select2-selection--single .select2-selection__placeholder {
-            color: var(--dbp-placeholder-color);
+            color: var(--dbp-text-muted-dark);
         }
 
         /* Work around single selections not wrapping and breaking responsivness */
@@ -868,7 +900,7 @@ export function getModalDialogCSS() {
         }
 
         .modal-container {
-            background-color: #fff;
+            background-color: var(--dbp-base-light);
             max-width: 600px;
             max-height: 100vh;
             min-width: 60%;
@@ -885,7 +917,7 @@ export function getModalDialogCSS() {
             background: transparent;
             border: none;
             font-size: 1.5rem;
-            color: var(--dbp-override-danger-bg-color);
+            color: var(--dbp-accent-dark);
             cursor: pointer;
             padding: 0px;
         }
@@ -1043,8 +1075,8 @@ export function getLinkCss() {
         }
 
         .int-link-external:hover {
-            background-color: black;
-            color: white;
+            background-color: var(--dbp-hover-base);
+            color: var(--dbp-hover-text);
         }
 
         .int-link-external:after {
@@ -1073,12 +1105,12 @@ export function getLinkCss() {
 
         .int-link-internal{
             transition: background-color 0.15s, color 0.15s;
-            border-bottom: 1px solid rgba(0,0,0,0.3);
+            border-bottom: var(--dbp-border-dark);
         }
 
         .int-link-internal:hover{
-            background-color: black;
-            color: white;
+            background-color: var(--dbp-hover-base);
+            color: var(--dbp-hover-text);
             text-decoration: underline;
         }
     `;
diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js
index 4684f38e04ec5ced13035b5bf3f387474e64649f..855ca709e363d700593de8645ae96ad526c62eda 100644
--- a/packages/data-table-view/src/data-table-view.js
+++ b/packages/data-table-view/src/data-table-view.js
@@ -256,8 +256,8 @@ export class DataTableView extends AdapterLitElement {
                 text-align: center;
                 text-indent: 0 !important;
                 line-height: 0.9em;
-                color: var(--dbp-primary-text-color);
-                background-color: var(--dbp-primary-bg-color);
+                color: var(--dbp-text-light);
+                background-color: var(--dbp-primary-dark);
                 content: '+';
             }
 
@@ -292,7 +292,7 @@ export class DataTableView extends AdapterLitElement {
             ${orderExpandIconOverrides}
 
             .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
-                color: var(--dbp-muted-text);
+                color: var(--dbp-muted-text-dark);
                 border-radius: var(--dbp-border-radius);
                 background: transparent;
             }
@@ -314,7 +314,7 @@ export class DataTableView extends AdapterLitElement {
             .dataTables_filter input {
                 border-radius: 0;
                 border-style: solid;
-                border-color: var(--dbp-dark);
+                border-color: var(--dbp-base-dark);
                 border-width: 1px;
                 padding: 0.1em;
             }
diff --git a/packages/data-table-view/src/dbp-data-table-view-demo.js b/packages/data-table-view/src/dbp-data-table-view-demo.js
index 09b147a214addc6c60fd622a1ed55dbfa2e0d071..d5c35c62f00f657935fc64760be512ccd556f0d5 100644
--- a/packages/data-table-view/src/dbp-data-table-view-demo.js
+++ b/packages/data-table-view/src/dbp-data-table-view-demo.js
@@ -173,7 +173,7 @@ export class DataTableViewDemo extends ScopedElementsMixin(DBPLitElement) {
                     margin-bottom: .5em;
                 }
                 .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
-                    color: #363636;
+                    color: var(--dbp-text-dark);
                     font-weight: 600;
                     line-height: 1.125;
                 }
@@ -187,7 +187,7 @@ export class DataTableViewDemo extends ScopedElementsMixin(DBPLitElement) {
                 }
                 .content table thead th {
                     border-width: 0 0 2px;
-                    color: #363636;
+                    color: var(--dbp-text-dark);
                 }
                 .content table th {
                     border: 1px solid #dbdbdb;
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 52668785c3d3ccd011a8efa45fd87fad18f74981..82aeebee669f79c5f4ebed45691db6bc60a5643b 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -728,13 +728,13 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             ${fileHandlingStyles.getFileHandlingCss()}
 
             a {
-                border-bottom: 1px solid rgba(0,0,0,0.3);
+                border-bottom: var(--dbp-border-dark);
                 padding: 0;
             }
 
             a:hover {
-                color: #fff;
-                background-color: #000;
+                color: var(--dbp-hover-text);
+                background-color: var(--dbp-hover-base);
             }
 
             h2:first-child {
@@ -809,7 +809,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .clipboard-footer {
-                background-color: white;
+                background-color: var(--dbp-base-light);
                 width: 100%;
                 padding-top: 10px;
                 display: flex;
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index 092128c359f0b3a064bb84566df684327d2a6362..fdee6df232f264de3de5dbfbccd26109c4cc98fc 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -556,8 +556,10 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
             }
             
             #dropArea {
-                border: var(--FUBorderWidth, 2px) var(--FUBorderStyle, dashed) var(--FUBBorderColor, black);
-                border-radius: var(--FUBorderRadius, 0);
+                border: var(--dbp-border-dark, var(--FUBorderWidth, 2px) var(--FUBorderStyle, dashed) var(--FUBBorderColor, black));
+                border-style: var(--FUBorderStyle, dashed);
+                border-radius: var(--FUBorderRadius, var(--dbp-border-radius, 0));
+                border-width: var(--FUBorderWidth, 2px);
                 width: auto;
                 margin: var(--FUMargin, 0px);
                 padding: var(--FUPadding, 20px);
@@ -581,13 +583,22 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
             
             .paddle {
                 position: absolute;
-                background-color: #ffffffd1;
                 top: 0px;
                 padding: 0px 5px;
                 box-sizing: content-box;
                 height: 100%;
             }
             
+            .paddle::before {
+                background-color: var(--dbp-base-light);
+                opacity: 0.8;
+                content: "";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+            }
+            
             .right-paddle{
                 right: 0px;
             }
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index 09e00a4d38b801e7442ecf03f16fa42a1914944a..91209016ff12622f12af0dcd8d59f2fed1d0d16f 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -1311,7 +1311,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .error {
-                color: var(--dbp-danger-bg-color);
+                background-color: var(--dbp-base-light);
+                color: var(--dbp-danger-dark);
             }
 
 
@@ -1390,7 +1391,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
 
 
             .nextcloud-footer {
-                background-color: white;
+                background-color: var(--dbp-base-light);
                 width: 100%;
                 padding-top: 10px;
             }
@@ -1507,8 +1508,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
 
             .no-select, .tabulator-row.tabulator-selected.no-select:hover, .tabulator-row.no-select:hover, .tabulator-row.tabulator-selectable.no-select:hover {
                 cursor: unset;
-                color: #333;
-                background-color: white;
+                color: var(--dbp-text-dark);
+                background-color: var(--dbp-base-light);
             }
 
             .nextcloud-nav {
@@ -1519,20 +1520,22 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                 position: absolute;
                 right: 0px;
                 z-index: 1;
-                background-color: white;
+                background-color: var(--dbp-base-light);
                 bottom: -45px;
             }
 
             .addRowAnimation {
+                color: var(--dbp-text-dark);
                 animation: added 0.4s ease;
             }
 
             #abortButton {
-                color: var(--dbp-danger-bg-color);
+                background-color: var(--dbp-base-light);
+                color: var(--dbp-danger-dark);
             }
 
             #abortButton:hover {
-                color: white;
+                color: var(--dbp-text-light);
             }
             
             #submenu {
@@ -1554,6 +1557,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                 top: 33px;
                 z-index: 1;
             }
+
+            #submenu-content button{
+                border-radius: 0px;
+            }
             
             .menu-buttons {
                 display: flex;
@@ -1562,13 +1569,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
 
             @keyframes added {
                 0% {
-                    background-color: white;
+                    background-color: var(--dbp-base-light);
                 }
                 50% {
-                    background-color: var(--dbp-success-bg-color);
+                    background-color: var(--dbp-success-light);
                 }
                 100% {
-                    background-color: white;
+                    background-color: var(--dbp-base-light);
                 }
             }
 
@@ -1581,7 +1588,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .button.button, .button, button.dt-button {
-                background-color: white;
+                background-color: var(--dbp-base-light);
             }
 
             #new-folder {
@@ -1673,7 +1680,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                     position: absolute;
                     right: 52px;
                     z-index: 1;
-                    background-color: white;
+                    background-color: var(--dbp-base-light);
                     bottom: 0px;
                 }
 
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 1175fe3ae313afdffc93cb8424de333f3417eda7..fa1eed819fcee0a8fbef2b1fb8a36002c2a4632f 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -18,8 +18,8 @@ export function getFileHandlingCss() {
         .modal-nav {
             cursor: pointer;
             overflow: hidden;
-            background-color: white;
-            border-right: 1px solid black;
+            background-color: var(--dbp-base-light);
+            border-right: var(--dbp-border-dark);
             grid-area: sidebar;
         }
 
@@ -34,8 +34,8 @@ export function getFileHandlingCss() {
         }
 
         .modal-nav .active{
-            background-color: var(--dbp-dark);
-            color: var(--dbp-light);
+            background-color: var(--dbp-secondary-dark);
+            color: var(--dbp-text-light);
         }
 
         .modal-content {
@@ -140,17 +140,17 @@ export function getFileHandlingCss() {
         }
 
         .tabulator-row, .tabulator-row.tabulator-row-even{
-            background-color: white;
+            background-color: var(--dbp-base-light);
         }
 
         .tabulator-row.tabulator-selectable.tabulator-selectable:hover{
-            background-color: white;
-            color: var(--dbp-dark);
+            background-color: var(--dbp-base-light);
+            color: var(--dbp-text-dark);
         }
 
         .tabulator-row.tabulator-selectable.tabulator-selected:hover, .tabulator-row.tabulator-selected{
-            background-color: var(--dbp-dark);
-            color: var(--dbp-light);
+            background-color: var(--dbp-hover-base);
+            color: var(--dbp-hover-text);
         }
 
         .tabulator .tabulator-header .tabulator-col .tabulator-col-content{
@@ -276,7 +276,7 @@ export function getFileHandlingCss() {
         
         .tabulator-selected .tabulator-responsive-collapse-toggle-open, 
         .tabulator-selected .tabulator-responsive-collapse-toggle-close{
-            color: white;
+            color: var(--dbp-text-light);
         }
         
         .tabulator .tabulator-header .tabulator-col{
@@ -314,8 +314,8 @@ export function getFileHandlingCss() {
                 /*justify-content: space-around;*/
                 grid-area: nav;
                 border: none;
-                border-bottom: 1px solid black;
-                border-top: 1px solid black;
+                border-bottom: var(--dbp-border-dark);
+                border-top: var(--dbp-border-dark);
                 white-space: nowrap;
                 overflow-x: auto;
                 -webkit-overflow-scrolling: touch;
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index 79f7f5b66ee0ab74503ba1579c7e82733a05b813..59a2c36b762bb058912c5df7557053afc517a34b 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -85,8 +85,8 @@ export class LanguageSelect extends AdapterLitElement {
             }
 
             a:hover {
-                background-color: var(--dbp-dark);
-                color: var(--dbp-light);
+                background-color: var(--dbp-hover-base);
+                color: var(--dbp-hover-text);
                 transition: none;
             }
 
@@ -95,8 +95,7 @@ export class LanguageSelect extends AdapterLitElement {
                 display: inline-block;
                 text-decoration: none;
                 transition: background-color 0.15s, color 0.15s;
-                color: var(--dbp-dark);
-                border-radius: var(--dbp-border-radius);
+                color: var(--dbp-text-dark);
             }
             `
         ];
diff --git a/packages/notification/src/notification.js b/packages/notification/src/notification.js
index 1041c45eec7c1875b9682d2a501a5a2a6779e0d6..a3c8f1ccca63b93cf4843d4c7838cf50ebb0595c 100644
--- a/packages/notification/src/notification.js
+++ b/packages/notification/src/notification.js
@@ -113,7 +113,8 @@ export class Notification extends DBPLitElement {
             }
 
             .delete::before, .modal-close::before, .delete::after, .modal-close::after {
-                background-color: white;
+                background-color: var(--dbp-base-light);
+                color: var(--dbp-text-dark);
                 content: "";
                 display: block;
                 left: 50%;
diff --git a/packages/person-select/src/person-select.js b/packages/person-select/src/person-select.js
index 561dfaf4481e2ec7a2b310a331c3c5c2ddccb26a..0794a46959cfb6496684828b24c29daaff6279f7 100644
--- a/packages/person-select/src/person-select.js
+++ b/packages/person-select/src/person-select.js
@@ -348,7 +348,8 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                border: 1px solid #aaa;
+                border: var(--dbp-border-dark);
+                border-color: var(--dbp-text-muted-dark);
                 -moz-border-radius-topright: var(--dbp-border-radius);
                 -moz-border-radius-bottomright: var(--dbp-border-radius);
                 line-height: 100%;
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index e4dfb11a7c13aa0592299436bd5784a346228b67..5a8ca9e9d50b4d92aa6dff8fd2db2d94fb78872c 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -316,8 +316,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
 
                 canvas.beginPath();
                 if (lastCode) {
-                    let okColor = getComputedStyle(this).getPropertyValue('--dbp-success-bg-color');
-                    let notOkColor = getComputedStyle(this).getPropertyValue('--dbp-danger-bg-color');
+                    let okColor = getComputedStyle(this).getPropertyValue('--dbp-success-dark');
+                    let notOkColor = getComputedStyle(this).getPropertyValue('--dbp-danger-dark');
                     canvas.fillStyle = matched ? okColor : notOkColor;
                 } else {
                     canvas.fillStyle = 'white';
@@ -457,7 +457,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             
             #videoSource:hover {
                 background: calc(100% - 0.2rem) center no-repeat url("${unsafeCSS(getIconSVGURL('chevron-down'))}");
-                color: black;
+                color: var(--dbp-text-dark);
                 background-position-x: calc(100% - 0.4rem);
                 background-size: auto 45%;
             }
@@ -469,7 +469,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             .border{
                 margin-top: 2rem;
                 padding-top: 2rem;
-                border-top: 1px solid black;
+                border-top: var(--dbp-border-dark);
             }
             
             #video video, #video{
diff --git a/toolkit-showcase/src/styles.js b/toolkit-showcase/src/styles.js
index 226f1940ea9966f1e6d38382b6e3bb8dfbc38548..1d71fe28531a2b0991b8233389f4b9f6e0c90fd7 100644
--- a/toolkit-showcase/src/styles.js
+++ b/toolkit-showcase/src/styles.js
@@ -37,8 +37,8 @@ export function getDemoCSS() {
         }
 
         a:hover {
-            background-color: black;
-            color: white;
+            background-color: var(--dbp-hover-base);
+            color: var(--dbp-hover-text);
         }
 
         a:after {
@@ -77,14 +77,16 @@ export function getDemoCSS() {
         }
 
         pre {
-            background-color: var(--dbp-light);
+            background-color: var(--dbp-base-light);
+            color: var(--dbp-text-dark);
             padding: 0.4em;
             overflow-x: auto;
             border: 1px solid #ddd;
         }
 
         code {
-            background-color: var(--dbp-light);
+            background-color: var(--dbp-base-light);
+            color: var(--dbp-text-dark);
             line-height: 1.5em;
             font-weight: normal;
             padding: 0.25em 0.5em 0.25em;