From e4236ac3eba6777aaaa0577b8dfe1e79a7839a50 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Wed, 26 Jan 2022 17:23:43 +0100
Subject: [PATCH] Change whole colro system

---
 packages/app-shell/src/app-shell.js           |  57 +++--
 packages/app-shell/src/auth-menu-button.js    |  18 +-
 packages/app-shell/src/color-mode.js          | 232 +++++++++++++++++
 .../app-shell/src/dbp-app-shell-welcome.js    |  37 +--
 .../app-shell/src/i18n/de/translation.json    |   3 +-
 .../app-shell/src/i18n/en/translation.json    |   3 +-
 packages/auth/src/dbp-auth-demo.js            |   2 +-
 packages/auth/src/login-button.js             |   3 +-
 .../src/check-in-place-select.js              |   4 +-
 packages/common/assets/icons/contrast.svg     |  15 ++
 packages/common/dbp-common-demo.js            |  12 +-
 packages/common/src/spinner.js                |   2 +-
 packages/common/styles.js                     | 236 +++++++++++-------
 .../data-table-view/src/data-table-view.js    |   8 +-
 .../src/dbp-data-table-view-demo.js           |   4 +-
 packages/file-handling/src/clipboard.js       |   4 +-
 packages/file-handling/src/file-sink.js       |   2 +-
 packages/file-handling/src/file-source.js     |   4 +-
 .../src/nextcloud-file-picker.js              |  57 ++---
 packages/file-handling/src/styles.js          |  47 ++--
 .../language-select/src/language-select.js    |   4 +-
 packages/notification/src/notification.js     |   4 +-
 packages/person-select/src/person-select.js   |   4 +-
 .../qr-code-scanner/src/qr-code-scanner.js    |  10 +-
 packages/tooltip/src/info-tooltip.js          |   6 +-
 packages/tooltip/src/tooltip.js               |   2 +-
 toolkit-showcase/src/styles.js                |   8 +-
 27 files changed, 541 insertions(+), 247 deletions(-)
 create mode 100644 packages/app-shell/src/color-mode.js
 create mode 100644 packages/common/assets/icons/contrast.svg

diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 5b648587..07b325bb 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -5,6 +5,7 @@ import {LanguageSelect} from '@dbp-toolkit/language-select';
 import {Icon} from '@dbp-toolkit/common';
 import {AuthKeycloak} from '@dbp-toolkit/auth';
 import {AuthMenuButton} from './auth-menu-button.js';
+import {ColorMode} from './color-mode.js';
 import {Notification} from '@dbp-toolkit/notification';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import {classMap} from 'lit/directives/class-map.js';
@@ -72,6 +73,9 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
         this.initateOpenMenu = false;
 
         this.auth = {};
+
+        this.themes = "";
+        this.themesDisableDetectBrowserMode = false;
     }
 
     static get scopedElements() {
@@ -80,6 +84,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
           'dbp-build-info': BuildInfo,
           'dbp-auth-keycloak': AuthKeycloak,
           'dbp-auth-menu-button': AuthMenuButton,
+          'dbp-color-mode-button': ColorMode,
           'dbp-notification': Notification,
           'dbp-icon': Icon,
           'dbp-matomo': MatomoElement,
@@ -256,6 +261,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             buildTime: { type: String, attribute: "build-time" },
             env: { type: String },
             auth: { type: Object },
+            themes: { type: String, attribute: "themes" },
+            themesDisableDetectBrowserMode: {type: Boolean, attribute: "themes-disable-detect-browser-mode"}
         };
     }
 
@@ -545,22 +552,24 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
 
             header .hd1-left {
                 display: flex;
-                flex-direction: column;
-                justify-content: center;
+                flex-direction: row;
+                justify-content: right;
                 grid-area: hd1-left;
                 text-align: right;
                 padding-right: 20px;
+                align-items: center;
+                gap: 10px;
             }
             
             header .hd1-left #lang-select{
-                margin: auto;
-                margin-right: 0px;
+                padding-right: 10px;
+                padding-left: 10px;
             }
 
             header .hd1-middle {
                 grid-area: hd1-middle;
-                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%);
+                background-color: var(--dbp-text);
+                background: linear-gradient(180deg, var(--dbp-text) 0%, var(--dbp-text) 85%, rgba(0,0,0,0) 90%);
             }
 
             header .hd1-right {
@@ -601,7 +610,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             }
 
             header a {
-                color: var(--dbp-text-dark);
+                color: var(--dbp-text);
                 display: inline;
             }
 
@@ -624,13 +633,14 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             }
 
             footer a {
-                border-bottom: var(--dbp-border-dark);
+                border-bottom: var(--dbp-border);
                 padding: 0;
             }
 
             footer a:hover {
                 color: var(--dbp-hover-text);
                 background-color: var(--dbp-hover-base);
+                border-color: var(--dbp-hover-text);
             }
 
             /* We don't allow inline-svg */
@@ -649,7 +659,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             .menu a {
                 padding: 0.3em;
                 font-weight: 300;
-                color: var(--dbp-text-dark);
+                color: var(--dbp-text);
                 display: block;
                 padding-right: 13px;
                 word-break: break-word;
@@ -661,7 +671,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .menu a.selected {
-                border-left: 3px solid var(--dbp-accent-dark);
+                border-left: 3px solid var(--dbp-accent);
                 font-weight: bolder;
                 padding-left: 0.5em;
                 padding-right: 0.3em;
@@ -670,7 +680,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
 
             aside .subtitle {
                 display: none;
-                color: var(--dbp-text-dark);
+                color: var(--dbp-text);
                 font-size: 1.25rem;
                 font-weight: 300;
                 line-height: 1.25;
@@ -715,22 +725,22 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
                     position: sticky;
                     top: 0;
                     width: 100%;
-                    background-color: var(--dbp-base-light);
+                    background-color: var(--dbp-base);
                     z-index: 10;
                 }
 
                 aside h2.subtitle {
                     display: block;
-                    border-bottom: var(--dbp-border-dark);
+                    border-bottom: var(--dbp-border);
                     padding: 0.5em 0.5em;
                 }
 
                 aside .menu {
-                    border-bottom: var(--dbp-border-dark);
+                    border-bottom: var(--dbp-border);
                     border-top-width: 0;
                     width: 100%;
                     position: absolute;
-                    background-color: var(--dbp-base-light);
+                    background-color: var(--dbp-base);
                     z-index: 10;
                 }
 
@@ -901,19 +911,20 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
         for (let routingName of this.visibleRoutes) {
             menuTemplates.push(html`<li><a @click="${(e) => this.onMenuItemClick(e)}" href="${this.router.getPathname({component: routingName})}" data-nav class="${getSelectClasses(routingName)}" title="${this.metaDataText(routingName, "description")}">${this.metaDataText(routingName, "short_name")}</a></li>`);
         }
-
+        
         const kc = this.keycloakConfig;
-
         return html`
             <slot class="${slotClassMap}"></slot>
             <dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" url="${kc.url}" realm="${kc.realm}" client-id="${kc.clientId}" silent-check-sso-redirect-uri="${kc.silentCheckSsoRedirectUri || ''}" scope="${kc.scope || ''}"  idp-hint="${kc.idpHint || ''}" ?force-login="${kc.forceLogin}" ?try-login="${!kc.forceLogin}"></dbp-auth-keycloak>
             <dbp-matomo subscribe="auth,analytics-event" endpoint="${this.matomoUrl}" site-id="${this.matomoSiteId}" git-info="${this.gitInfo}"></dbp-matomo>
-            <div class="${mainClassMap}">
+            <div class="${mainClassMap}" id="root">
                 <div id="main">
                     <dbp-notification id="dbp-notification" lang="${this.lang}"></dbp-notification>
                     <header>
                         <slot name="header">
                             <div class="hd1-left">
+                                <dbp-color-mode-button themes="${this.themes}" ?themes-disable-detect-browser-mode="${this.themesDisableDetectBrowserMode}" lang="${this.lang}"></dbp-color-mode-button>
+
                                 <dbp-language-select id="lang-select" lang="${this.lang}"></dbp-language-select>
                             </div>
                             <div class="hd1-middle">
@@ -945,11 +956,11 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
                     <aside>
                         <h2 class="subtitle" @click="${this.toggleMenu}">
                             ${this.subtitle}
-                            <dbp-icon name="chevron-down" style="color: var(--dbp-accent-dark)" id="menu-chevron-icon"></dbp-icon>
+                            <dbp-icon name="chevron-down" style="color: var(--dbp-accent)" id="menu-chevron-icon"></dbp-icon>
                         </h2>
                         <ul class="menu hidden">
                             ${menuTemplates}
-                            <li class="close" @click="${this.hideMenu}"><dbp-icon name="close" style="color: var(--dbp-accent-dark)"></dbp-icon></li>
+                            <li class="close" @click="${this.hideMenu}"><dbp-icon name="close" style="color: var(--dbp-accent)"></dbp-icon></li>
                         </ul>
                     </aside>
 
@@ -965,9 +976,9 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
                     <footer>
                         <slot name="footer">
                             <slot name="footer-links">
-                                <a rel="noopener" class="int-link-external" href="#use-your-privacy-policy-link">${i18n.t('privacy-policy')}</a>
-                                <a rel="noopener" class="int-link-external" href="#use-your-imprint-link">${i18n.t('imprint')}</a>
-                                <a rel="noopener" class="int-link-external" href="#use-your-imprint-link">${i18n.t('contact')}</a>
+                                <a rel="noopener" class="" href="#use-your-privacy-policy-link">${i18n.t('privacy-policy')}</a>
+                                <a rel="noopener" class="" href="#use-your-imprint-link">${i18n.t('imprint')}</a>
+                                <a rel="noopener" class="" href="#use-your-imprint-link">${i18n.t('contact')}</a>
                             </slot>
                             <dbp-build-info class="${prodClassMap}" git-info="${this.gitInfo}" env="${this.env}" build-url="${this.buildUrl}" build-time="${this.buildTime}"></dbp-build-info>
                         </slot>
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index 8c29fe32..847d9cf0 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -95,7 +95,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             a {
-                color: currentColor;
+                color: var(--dbp-text);
+                fill: var(--dbp-text);
                 cursor: pointer;
                 text-decoration: none;
                 display: block;
@@ -109,7 +110,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
                 box-shadow: none;
                 -moz-box-shadow: none;
                 -webkit-box-shadow: none;
-                box-shadow: 0px 0px 4px 2px var(--dbp-accent-dark);
+                box-shadow: 0px 0px 4px 2px var(--dbp-accent);
             }
 
             .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
@@ -122,10 +123,10 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
                 max-width: 25em;
                 position: absolute;
                 z-index: 20;
-                border: var(--dbp-border-dark);
+                border: var(--dbp-border);
                 border-radius: 0px;
                 overflow: hidden;
-                background-color: var(--dbp-base-light);
+                background-color: var(--dbp-base);
             }
 
             .dropdown-content {
@@ -136,7 +137,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             .menu a {
                 /*padding: 0.3em;*/
                 font-weight: 400;
-                color: var(--dbp-text-dark);
+                color: var(--dbp-text);
                 display: block;
                 text-decoration: none;
             }
@@ -146,10 +147,13 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
                 background-color: var(--dbp-hover-base);
             }
 
-            .menu a.selected { color: var(--dbp-text-light); background-color: var(--dbp-secondary-dark); }
+            .menu a.selected { 
+                color: var(--dbp-secondary-text); 
+                background-color: var(--dbp-secondary-base); 
+            }
             
             .dropdown-item {
-                color: var(--dbp-text-muted-dark);
+                color: var(--dbp-text-muted);
                 display: block;
                 font-size: 0.875rem;
                 line-height: 1.5;
diff --git a/packages/app-shell/src/color-mode.js b/packages/app-shell/src/color-mode.js
new file mode 100644
index 00000000..2bf29a10
--- /dev/null
+++ b/packages/app-shell/src/color-mode.js
@@ -0,0 +1,232 @@
+import {html, css} from 'lit';
+import * as commonStyles from '@dbp-toolkit/common/styles';
+import {createInstance} from './i18n.js';
+import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {Icon} from '@dbp-toolkit/common';
+import {classMap} from 'lit/directives/class-map.js';
+
+
+export class ColorMode extends ScopedElementsMixin(DBPLitElement) {
+    constructor() {
+        super();
+
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
+        this.themes = [];
+        this.disableDetectBrowserMode = false;
+        this.boundCloseAdditionalMenuHandler = this.hideModeMenu.bind(this);
+    }
+
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String },
+            themes: { type: Array, attribute: "themes" },
+            disableDetectBrowserMode: {type: Boolean, attribute: "themes-disable-detect-browser-mode"}
+        };
+    }
+
+    static get scopedElements() {
+        return {
+            'dbp-icon': Icon
+        };
+    }
+
+
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === "lang") {
+                this._i18n.changeLanguage(this.lang);
+            }
+        });
+        super.update(changedProperties);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            this.detectInitialMode();
+        });
+
+    }
+
+    detectInitialMode() {
+        //look for saved modes
+        let prefMode = localStorage.getItem('prefered-color-mode');
+        if (prefMode) {
+            // search for prefered mode
+            const theme = this.themes.find(theme => theme.class === prefMode);
+
+            if (theme) {
+                this.loadTheme(theme.class);
+            }
+            return;
+        }
+
+        if (!this.disableDetectBrowserMode) {
+            //look for browser mode
+            const useDark = window.matchMedia("(prefers-color-scheme: dark)");
+            if (useDark.matches) {
+                // search for dark mode
+                const theme = this.themes.find(theme => theme.class === "dark-theme");
+
+                if (theme) {
+                    this.loadTheme(theme.class);
+                }
+            }
+        }
+    }
+
+    toggleModeMenu() {
+        const button = this.shadowRoot.querySelector(".mode-button");
+        if (button.classList.contains("active"))
+            button.classList.remove("active");
+        else
+            button.classList.add("active");
+        const menu = this.shadowRoot.querySelector("ul.extended-menu");
+        const menuStart = this.shadowRoot.querySelector(".mode-button");
+        if (menu === null || menuStart === null) {
+            return;
+        }
+
+        menu.classList.toggle('hidden');
+
+        if (!menu.classList.contains('hidden')) { // add event listener for clicking outside of menu
+            document.addEventListener('click', this.boundCloseAdditionalMenuHandler);
+            this.initateOpenAdditionalMenu = true;
+        }
+        else {
+            document.removeEventListener('click', this.boundCloseAdditionalMenuHandler);
+        }
+    }
+
+    hideModeMenu() {
+        if (this.initateOpenAdditionalMenu) {
+            this.initateOpenAdditionalMenu = false;
+            return;
+        }
+
+        const menu = this.shadowRoot.querySelector("ul.extended-menu");
+        if (menu && !menu.classList.contains('hidden'))
+            this.toggleModeMenu();
+    }
+
+    loadTheme(themeName) {
+        const button = this.shadowRoot.querySelector(".button-" + themeName);
+        const otherButtons = this.shadowRoot.querySelectorAll(".button-theme");
+        otherButtons.forEach(button => button.classList.remove("active"));
+        button.classList.add("active");
+
+        const body = this.shadowRoot.host.getRootNode({composed: true}).body;
+        if (!body.classList.contains(themeName)) {
+
+            this.themes.forEach(theme => {
+                body.classList.remove(theme.class);
+            });
+
+            body.classList.add(themeName);
+        }
+    }
+
+    saveTheme(themeName) {
+        //set active state
+        const browserModeDark = window.matchMedia("(prefers-color-scheme: dark)");
+        const browserModeLight = window.matchMedia("(prefers-color-scheme: light)");
+
+        if (themeName === "light-theme" && browserModeLight.matches) {
+            localStorage.removeItem('prefered-color-mode');
+        } else if (themeName === "dark-theme" && browserModeDark.matches) {
+            localStorage.removeItem('prefered-color-mode');
+        } else {
+            localStorage.setItem('prefered-color-mode', themeName);
+        }
+    }
+
+    static get styles() {
+        return css`
+            ${commonStyles.getThemeCSS()}
+            ${commonStyles.getGeneralCSS()}
+            ${commonStyles.getButtonCSS()}
+           
+            
+            mode-button, button.button {
+                border: none;
+            }
+            
+            .active, .extended-menu li a.active dbp-icon {
+                color: var(--dbp-accent);
+            }
+            
+            .active {
+                font-weight: bolder;
+            }
+            
+            a:hover:not(.active) , .extended-menu li a:hover:not(.active) {
+              color: var(--dbp-hover-text);
+              background-color: var(--dbp-hover-base);
+              transition: none;
+            }
+            
+            a {
+              padding: 0.3em;
+              display: inline-block;
+              text-decoration: none;
+              transition: background-color 0.15s, color 0.15s;
+              color: var(--dbp-text);
+            }
+            
+            .extended-menu {
+              list-style: none;
+              border: var(--dbp-border);
+              position: absolute;
+              background-color: var(--dbp-base);
+              z-index: 1000;
+            }
+            
+            .extended-menu li {
+       
+              text-align: left;
+              min-width: 160px;
+            }
+            
+            .extended-menu li a {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              padding: 12px 15px;
+              width: 100%;
+              box-sizing: border-box;
+              text-align: left;
+              color: var(--dbp-text);
+              background: none;
+              display: block
+            }
+            
+            .icon {
+                margin-right: 10px;
+            }
+          
+        `;
+    }
+
+    render() {
+        const i18n = this._i18n;
+
+        return html`
+            <div class="${classMap({hidden: this.themes.length === 0})}">
+                <a class="mode-button" title="${i18n.t('color-mode')}"
+                        @click="${() => {this.toggleModeMenu();}}"><dbp-icon name="contrast"></dbp-icon></a>
+                <ul class='extended-menu hidden'>
+                    ${this.themes.map(theme => html`
+                        <li class="" id="${theme.class}">
+                            <a class="button-theme button-${theme.class}" @click="${() => {this.loadTheme(theme.class); this.saveTheme(theme.class)}}" title="${theme.name}">
+                                <dbp-icon class="icon" name="${theme.icon}"></dbp-icon> ${theme.name}
+                            </a>
+                        </li>
+                    `)}
+                </ul>
+            </div>
+        `;
+    }
+}
\ No newline at end of file
diff --git a/packages/app-shell/src/dbp-app-shell-welcome.js b/packages/app-shell/src/dbp-app-shell-welcome.js
index 96a4e853..7339fb96 100644
--- a/packages/app-shell/src/dbp-app-shell-welcome.js
+++ b/packages/app-shell/src/dbp-app-shell-welcome.js
@@ -35,35 +35,6 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
     }
 
     static get styles() {
-        const docStyle = getComputedStyle(document.documentElement);
-        let hoverTextCheck = false;
-        let hoverBaseCheck = false;
-        if (docStyle) {
-            const hoverBase = docStyle.getPropertyValue('--dbp-override-hover-base');
-            hoverBaseCheck = hoverBase ? true : false;
-            const hoverText = docStyle.getPropertyValue('--dbp-override-hover-text');
-            hoverTextCheck = hoverText ? true : false;
-        }
-
-        let hoverTextStyle = css``;
-        let hoverChevronStyle = css``;
-        let hoverBaseStyle = css``;
-
-        if (hoverTextCheck) {
-            hoverTextStyle = css`
-            color: var(--dbp-hover-text);
-            border-color: var(--dbp-hover-text);
-        `;
-            hoverChevronStyle = css`
-            background-color: var(--dbp-hover-text);
-        `;
-        }
-
-        if (hoverBaseCheck) {
-            hoverBaseStyle = css`
-            background-color: var(--dbp-hover-base);
-        `;
-        }
 
         // language=css
         return css`
@@ -80,8 +51,8 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
             }
 
             h2 a:hover {
-                ${hoverTextStyle}
-                ${hoverBaseStyle}
+                color: var(--dbp-hover-text, var(--dbp-text));
+                background-color: var(--dbp-hover-base);
             }
             
             h2 a {
@@ -91,7 +62,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
 
             h2 a::after {
                 content: "\\00a0\\00a0";
-                background-color: var(--dbp-text-dark);
+                background-color: var(--dbp-text);
                 -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014.8%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2014.8%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M383%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C383.4%2C380.4%2C383.2%2C380.5%2C383%2C380.5z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
                 mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014.8%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2014.8%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M383%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C383.4%2C380.4%2C383.2%2C380.5%2C383%2C380.5z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
                 -webkit-mask-repeat: no-repeat;
@@ -105,7 +76,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
             }
             
            h2 a:hover::after {
-               ${hoverChevronStyle}
+               background-color: var(--dbp-hover-text, var(--dbp-text));
            }
         `;
     }
diff --git a/packages/app-shell/src/i18n/de/translation.json b/packages/app-shell/src/i18n/de/translation.json
index 81f983e5..0e2b2c99 100644
--- a/packages/app-shell/src/i18n/de/translation.json
+++ b/packages/app-shell/src/i18n/de/translation.json
@@ -17,5 +17,6 @@
   "login": "Anmelden",
   "logout": "Abmelden",
   "page-not-found": "Die gewünschte Seite wurde nicht gefunden",
-  "choose-from-menu": "Bitte wählen Sie eine Aktivität aus dem Menu."
+  "choose-from-menu": "Bitte wählen Sie eine Aktivität aus dem Menu.",
+  "color-mode": "Farbmodus ändern"
 }
diff --git a/packages/app-shell/src/i18n/en/translation.json b/packages/app-shell/src/i18n/en/translation.json
index ae4a137d..3f94e35c 100644
--- a/packages/app-shell/src/i18n/en/translation.json
+++ b/packages/app-shell/src/i18n/en/translation.json
@@ -17,5 +17,6 @@
   "login": "Login",
   "logout": "Logout",
   "page-not-found": "Requested Page Not Found",
-  "choose-from-menu": "Please choose an activity from the menu."
+  "choose-from-menu": "Please choose an activity from the menu.",
+  "color-mode": "Change color mode"
 }
diff --git a/packages/auth/src/dbp-auth-demo.js b/packages/auth/src/dbp-auth-demo.js
index 4281a5dd..7cedb8ca 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: var(--dbp-text-dark);
+                    color: var(--dbp-text);
                     font-weight: 600;
                     line-height: 1.125;
                 }
diff --git a/packages/auth/src/login-button.js b/packages/auth/src/login-button.js
index 0e4d10ba..7b4caa2a 100644
--- a/packages/auth/src/login-button.js
+++ b/packages/auth/src/login-button.js
@@ -111,7 +111,8 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             a {
-                color: currentColor;
+                color: var(--dbp-text);
+                fill: var(--dbp-text);
                 cursor: pointer;
                 text-decoration: 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 15e69a0a..14e3385b 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,8 +362,8 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(AdapterLitElement) {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                border: var(--dbp-border-dark);
-                border-color: var(--dbp-text-muted-dark);
+                border: var(--dbp-border);
+                border-color: var(--dbp-text-muted);
                 -moz-border-radius-topright: var(--dbp-border-radius);
                 -moz-border-radius-bottomright: var(--dbp-border-radius);
                 line-height: 100%;
diff --git a/packages/common/assets/icons/contrast.svg b/packages/common/assets/icons/contrast.svg
new file mode 100644
index 00000000..d7397d50
--- /dev/null
+++ b/packages/common/assets/icons/contrast.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path d="M50,2.8C24,2.8,2.8,24,2.8,50S24,97.2,50,97.2S97.2,76,97.2,50C97.2,23.9,76,2.8,50,2.8z M50,91.7C27,91.7,8.3,73,8.3,50
+		S27,8.3,50,8.3S91.7,27,91.7,50S73,91.7,50,91.7z"/>
+</g>
+<g>
+	<path d="M50,8.3C73,8.3,91.7,27,91.7,50S73,91.7,50,91.7V8.3z"/>
+</g>
+</svg>
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index bb20fee6..4c85bd23 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: var(--dbp-text-dark);
+                color: var(--dbp-text);
                 font-weight: 600;
                 line-height: 1.125;
             }
@@ -162,10 +162,10 @@ 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>
+                            <li><code>--dbp-primary-light</code>: Primary Light color <div class="demoblock" style="background-color: var(--dbp-primary-light); color: var(--dbp-text)">X</div></li>
+                            <li><code>--dbp-primary-base</code>: Primary dark color <div class="demoblock" style="background-color: var(--dbp-primary-base); color: var(--dbp-override-text-light);">X</div></li>
+                            <li><code>--dbp-primary-base</code>: secondary Light color <div class="demoblock" style="background-color: var(--dbp-primary-base); color: var(--dbp-text)">X</div></li>
+                            <li><code>--dbp-primary-base</code>: secondary dark color <div class="demoblock" style="background-color: var(--dbp-primary-base); 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>
@@ -195,7 +195,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
                     <pre>
 &lt;style&gt;
 html {
-    /* This will override --dbp-primary-dark */
+    /* This will override --dbp-primary-base */
     --dbp-override-primary-dark: green;
     /* Same for all other variables, prefix with "override" */
 }
diff --git a/packages/common/src/spinner.js b/packages/common/src/spinner.js
index f3796081..cf2569bd 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:var(--dbp-accent-dark);
+     background-color:var(--dbp-accent);
         position:absolute;
           top:50%;
             left:50%;
diff --git a/packages/common/styles.js b/packages/common/styles.js
index e254d0d9..dfbb60da 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -35,7 +35,7 @@ export function getThemeCSS() {
         --dbp-downloaded-bg-color: var(--dbp-override-downloaded-bg-color, #c8dcc8);
         
         
-        /* new variables */
+        /* old new variables remove in future */
         --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));
@@ -58,23 +58,39 @@ export function getThemeCSS() {
         --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));
+        --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light));*/
+        
+        /* new new variables */
+        --dbp-base: var(--dbp-override-base, var(--dbp-override-base-light, var(--dbp-override-light, #ffffff)));
+        --dbp-base-inverted: var(--dbp-override-base-inverted, var(--dbp-override-base, var(--dbp-override-base-light, var(--dbp-override-light, #000000))));
+        --dbp-text: var(--dbp-override-text, var(--dbp-override-text-dark, var(--dbp-override-dark, #000000)));
+        --dbp-text-inverted: var(--dbp-override-text-inverted, var(--dbp-override-text-light, var(--dbp-override-light, #ffffff)));
+        --dbp-text-muted: var(--dbp-override-text-muted, var(--dbp-override-text-muted-dark, var(--dbp-override-muted-text, #767676)));
+        --dbp-accent: var(--dbp-override-accent, var(--dbp-override-accent-dark, var(--dbp-override-primary-bg-color, #c24f68)));
+        --dbp-primary-base: var(--dbp-override-primary-base, var(--dbp-override-primary-dark, var(--dbp-override-primary-bg-color, #2a4491)));
+        --dbp-primary-text: var(--dbp-override-primary-text, var(--dbp-override-text-light, var(--dbp-override-light, #ffffff)));
+        --dbp-primary-border: var(--dbp-override-primary-border, var(--dbp-override-border, var(--dbp-override-border-dark, 1px solid #000000)));
+        --dbp-secondary-base: var(--dbp-override-secondary-base, var(--dbp-override-secondary-light, var(--dbp-override-light, #ffffff)));
+        --dbp-secondary-text: var(--dbp-override-secondary-text, var(--dbp-override-secondary-dark, var(--dbp-override-dark, #000000)));
+        --dbp-secondary-border: var(--dbp-override-secondary-border, var(--dbp-override-border, var(--dbp-override-border-dark, 1px solid #000000)));
+        --dbp-info: var(--dbp-override-info, var(--dbp-override-info-dark, var(--dbp-override-primary-bg-color, #2a4491)));
+        --dbp-success: var(--dbp-override-success, var(--dbp-override-success-dark, var(--dbp-override-success-bg-color, #188018)));
+        --dbp-warning-as-text: var(--dbp-override-warning-as-text, var(--dbp-override-warning-color, var(--dbp-override-warning-dark, #c15500)));
+        --dbp-warning: var(--dbp-override-warning, var(--dbp-override-warning-color, var(--dbp-override-warning-light, #f99a41)));
+        --dbp-danger: var(--dbp-override-danger, var(--dbp-override-danger-bg-color, var(--dbp-override-danger-dark, #de3535)));
+        --dbp-border: var(--dbp-override-border, 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));
         --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light));
-        
-        /* TODO check if there are any uses of this in other apps then remove it */
-        --dbp-button-hover-base: var(--dbp-override-button-hover-base, var(--dbp-override-dark, #000000));
-        --dbp-button-hover-text: var(--dbp-override-button-hover-text, var(--dbp-override-light, #ffffff));
     }
-    
-    #main{
-        background-color: var(--dbp-base-light);
-        color: var(--dbp-text-dark);
+
+    #root{
+        background-color: var(--dbp-base);
+        color: var(--dbp-text);
     }
     
-    .dark {
-        background-color: var(--dbp-base-dark);
-    }
     
     `;
 }
@@ -111,7 +127,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         }
 
         .input, .textarea, .select select {
-            border: solid 1px var(--dbp-text-muted-light);
+            border: solid 1px var(--dbp-text-muted);
             border-radius: var(--dbp-border-radius);
             padding-bottom: calc(.375em - 1px);
             padding-left: calc(.625em - 1px);
@@ -120,7 +136,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         }
 
         .input::placeholder, .textarea::placeholder, .select select::placeholder {
-            color: var(--dbp-text-muted-dark);
+            color: var(--dbp-text-muted);
         }
 
         input, ::placeholder, textarea, select, .select select {
@@ -136,7 +152,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
             box-shadow: none;
             -moz-box-shadow: none;
             -webkit-box-shadow: none;
-            box-shadow: 0px 0px 4px 2px var(--dbp-accent-dark);
+            box-shadow: 0px 0px 4px 2px var(--dbp-accent);
         }
 
         .control {
@@ -156,18 +172,18 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         .hidden { display: none; }
 
         a {
-            color: var(--dbp-text-dark);
+            color: var(--dbp-text);
             cursor: pointer;
             text-decoration: none;
         }
 
         a.is-download {
-            border-bottom: var(--dbp-border-dark);
+            border-bottom: var(--dbp-border);
             transition: background-color 0.15s, color 0.15s;
         }
 
         a.is-download:hover {
-            color: var(--dbp-hover-text, var(--dbp-text-dark));
+            color: var(--dbp-hover-text, var(--dbp-text));
             background-color: var(--dbp-hover-base);
         }
 
@@ -185,7 +201,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         */
 
         .title {
-            color: var(--dbp-text-dark);
+            color: var(--dbp-text);
             font-size: 2rem;
             font-weight: 600;
             line-height: 1.125;
@@ -203,10 +219,10 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
         }
 
         .input, .select select, .textarea {
-            background-color: var(--dbp-base-light);
-            border-color: var(--dbp-text-muted-dark);
+            background-color: var(--dbp-base);
+            border-color: var(--dbp-text-muted);
             border-radius: var(--dbp-border-radius);
-            color: var(--dbp-text-muted-dark);
+            color: var(--dbp-text-muted);
         }
 
         *, ::after, ::before {
@@ -218,13 +234,21 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
             -webkit-appearance: none;
             background: calc(100% - 0.2rem) center no-repeat url("${unsafeCSS(getIconSVGURL('chevron-down'))}");
             background-size: 25%;
-            border: var(--dbp-border-dark);
+            border: var(--dbp-border);
             border-radius: var(--dbp-border-radius);
-            color: var(--dbp-text-dark);
+            color: var(--dbp-text);
             padding: 0.14rem 1.0rem 0.14rem 0.14rem;
         }
 
+        ::-moz-selection {
+            color: var(--dbp-primary-text);
+            background: var(--dbp-primary-base);
+        }
 
+        ::selection {
+            color: var(--dbp-primary-text);
+            background: var(--dbp-primary-base);
+        }
     `;
 }
 
@@ -381,8 +405,8 @@ export function getNotificationCSS() {
     // language=css
     return css`
         .notification {
-            background-color: var(--dbp-base-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-base);
+            color: var(--dbp-text);
             padding: 1.25rem 2.5rem 1.25rem 1.5rem;
             position: relative;
             border-radius: var(--dbp-border-radius);
@@ -399,7 +423,7 @@ export function getNotificationCSS() {
 
         .notification code,
         .notification pre {
-            color: var(--dbp-text-light);
+            color: var(--dbp-text-inverted);
             background: var(--dbp-muted-text-dark);
         }
 
@@ -425,28 +449,28 @@ export function getNotificationCSS() {
         }
 
         .notification.is-primary {
-            background-color: var(--dbp-primary-dark);
-            color: var(--dbp-text-light);
+            background-color: var(--dbp-primary-base);
+            color: var(--dbp-primary-text);
         }
 
         .notification.is-info {
-            background-color: var(--dbp-info-dark);
-            color: var(--dbp-text-light);
+            background-color: var(--dbp-info);
+            color: var(--dbp-text-inverted);
         }
 
         .notification.is-success {
-            background-color: var(--dbp-success-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-success);
+            color: var(--dbp-text-inverted);
         }
 
         .notification.is-warning {
-            background-color: var(--dbp-warning-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-warning);
+            color: var(--dbp-text);
         }
 
         .notification.is-danger {
-            background-color: var(--dbp-danger-dark);
-            color: var(--dbp-text-light);
+            background-color: var(--dbp-danger);
+            color: var(--dbp-text-inverted);
         }
     `;
 }
@@ -456,9 +480,9 @@ export function getButtonCSS() {
     // language=css
     return css`
         button.button, .button, button.dt-button {
-            border: var(--dbp-border-dark);
+            border: var(--dbp-border);
             border-radius: var(--dbp-border-radius);
-            color: var(--dbp-text-dark);
+            color: var(--dbp-text);
             cursor: pointer;
             justify-content: center;
             padding-bottom: calc(0.375em - 1px);
@@ -471,12 +495,14 @@ export function getButtonCSS() {
             font-weight: bolder;
             font-family: inherit;
             transition: background-color 0.15s ease 0s, color 0.15s ease 0s;
-            background: none;
+            background: var(--dbp-secondary-base);
+            color: var(--dbp-secondary-text);
+            border: var(--dbp-secondary-border);
         }
 
-        button.button:hover:enabled, .button:hover:enabled, button.dt-button:hover:enabled, button.dt-button:hover:not(.disabled), .button:hover {
-            color: var(--dbp-hover-text, var(--dbp-text-dark));
-            background-color: var(--dbp-hover-base);
+        button.button:hover:enabled, .button:hover:enabled, button.dt-button:hover:enabled, button.dt-button:hover:not(.disabled) {
+            color: var(--dbp-hover-text, var(--dbp-secondary-text));
+            background-color: var(--dbp-hover-base, var(--dbp-secondary-base));
         }
 
         button.button.is-small, .button.is-small {
@@ -485,38 +511,58 @@ export function getButtonCSS() {
         }
 
         button.button.is-primary, .button.is-primary {
-            background-color: var(--dbp-primary-dark);
-            border: var(--dbp-border-dark);
-            color: var(--dbp-text-light);
+            background-color: var(--dbp-primary-base);
+            border: var(--dbp-primary-border);
+            color: var(--dbp-primary-text);
         }
 
-        button.button.is-primary:hover {
-            background-color: var(--dbp-hover-base, var(--dbp-primary-dark));
-            color: var(--dbp-hover-text, var(--dbp-text-light));
+        button.button.is-primary:hover:enabled, .button.is-primary:hover:enabled {
+            background-color: var(--dbp-hover-base, var(--dbp-primary-base));
+            color: var(--dbp-hover-text, var(--dbp-primary-text));
         }
 
         button.button.is-info, .button.is-info {
-            background-color: var(--dbp-info-dark);
-            border-color: var(--dbp-info-dark);
-            color: var(--dbp-text-light);
+            background-color: var(--dbp-info);
+            border: var(--dbp-border);
+            color: var(--dbp-text-inverted);
+        }
+
+        button.button.is-info:hover:enabled, .button.is-info:hover:enabled {
+            background-color: var(--dbp-hover-base, var(--dbp-info));
+            color: var(--dbp-hover-text, var(--dbp-text-inverted));
         }
 
         button.button.is-success, .button.is-success {
-            background-color: var(--dbp-success-light);
-            border-color: var(--dbp-success-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-success);
+            border: var(--dbp-border);
+            color: var(--dbp-text-inverted);
+        }
+
+        button.button.is-success:hover:enabled, .button.is-success:hover:enabled {
+            background-color: var(--dbp-hover-base, var(--dbp-success));
+            color: var(--dbp-hover-text, var(--dbp-text-inverted));
         }
 
         button.button.is-warning, .button.is-warning {
-            background-color: var(--dbp-warning-light);
-            border-color: var(--dbp-warning-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-warning);
+            border: var(--dbp-border);
+            color: var(--dbp-text);
+        }
+
+        button.button.is-warning:hover:enabled, .button.is-warning:hover:enabled {
+            background-color: var(--dbp-hover-base, var(--dbp-warning));
+            color: var(--dbp-hover-text, var(--dbp-text));
         }
 
         .button.button.is-danger, .button.is-danger {
-            background-color: var(--dbp-danger-dark);
-            border-color: var(--dbp-danger-dark);
-            color: var(--dbp-text-light);
+            background-color: var(--dbp-danger);
+            border: var(--dbp-border);
+            color: var(--dbp-text-inverted);
+        }
+
+        .button.button.is-danger:hover:enabled, .button.is-danger:hover:enabled {
+            background-color: var(--dbp-hover-base, var(--dbp-danger));
+            color: var(--dbp-hover-text, var(--dbp-text-inverted));
         }
 
         button.button[disabled], .button[disabled], fieldset[disabled] .button {
@@ -530,7 +576,7 @@ export function getButtonCSS() {
             box-shadow: none;
             -moz-box-shadow: none;
             -webkit-box-shadow: none;
-            box-shadow: 0px 0px 4px 2px var(--dbp-accent-dark);
+            box-shadow: 0px 0px 4px 2px var(--dbp-accent);
         }
     `;
 }
@@ -581,9 +627,9 @@ export function getRadioAndCheckboxCss() {
             left: 0;
             height: 21px;
             width: 21px;
-            background-color: var(--dbp-base-light);
+            background-color: var(--dbp-base);
             border-radius: 0px;
-            border: var(--dbp-border-dark);
+            border: var(--dbp-border);
         }
         
         .radiobutton {
@@ -592,26 +638,26 @@ export function getRadioAndCheckboxCss() {
             left: 0;
             height: 20px;
             width: 20px;
-            background-color: var(--dbp-base-light);
+            background-color: var(--dbp-base);
             border: solid;
             border-radius: 100%;
-            border: var(--dbp-border-dark);
+            border: var(--dbp-border);
             
             box-sizing: content-box;
         }
 
         .button-container input[type="radio"]:checked ~ .radiobutton:after {
-            border-color: var(--dbp-base-light);
+            border-color: var(--dbp-base);
         }
         
         .button-container input[type="radio"]:disabled ~ .radiobutton {
-            border-color: var(--dbp-text-muted-light);
-            background-color: var(--dbp-text-muted-light);
+            border-color: var(--dbp-text-muted);
+            background-color: var(--dbp-text-muted);
         }
 
         .button-container input[type="radio"]:checked:disabled ~ .radiobutton:after {
-            border-color: var(--dbp-text-muted-light);
-            background-color: var(--dbp-text-muted-light);
+            border-color: var(--dbp-text-muted);
+            background-color: var(--dbp-text-muted);
         }
         
         .radiobutton:after {
@@ -629,16 +675,16 @@ export function getRadioAndCheckboxCss() {
             top: 0px;
             width: 100%;
             height: 100%;
-            background-color: var(--dbp-base-dark);
+            background-color: var(--dbp-text);
             border: none;
             border-radius: 100%;
-            border: 2px solid var(--dbp-base-light);
+            border: 2px solid var(--dbp-base);
             box-sizing: border-box;
         }
         
         .button-container input[type="checkbox"]:checked ~ .checkmark:after {
-            border-bottom: var(--dbp-border-dark);
-            border-right: var(--dbp-border-dark);
+            border-bottom: var(--dbp-border);
+            border-right: var(--dbp-border);
             border-width: 0 2px 2px 0;
         }
 
@@ -648,17 +694,17 @@ export function getRadioAndCheckboxCss() {
             box-shadow: none;
             -moz-box-shadow: none;
             -webkit-box-shadow: none;
-            box-shadow: 0px 0px 4px 2px var(--dbp-accent-dark);
+            box-shadow: 0px 0px 4px 2px var(--dbp-accent);
         }
         
         
         .button-container input[type="checkbox"]:disabled ~ .checkmark {
-            border-color: var(--dbp-text-muted-light);
-            background-color: var(--dbp-text-muted-light);
+            border-color: var(--dbp-text-muted);
+            background-color: var(--dbp-text-muted);
         }
 
         .button-container input[type="checkbox"]:checked:disabled ~ .checkmark:after {
-            border-color: var(--dbp-text-muted-light);
+            border-color: var(--dbp-text-muted);
         }
 
         .checkmark:after {
@@ -676,7 +722,7 @@ export function getRadioAndCheckboxCss() {
             top: 4px;
             width: 6px;
             height: 10px;
-            border: var(--dbp-border-dark);
+            border: var(--dbp-border);
             border-width: 0 2px 2px 0;
             -webkit-transform: rotate(45deg);
             -ms-transform: rotate(45deg);
@@ -758,7 +804,7 @@ export function getTagCSS() {
 
         .tag:not(body) {
             align-items: center;
-            background-color: var(--dbp-text-muted-light);
+            background-color: var(--dbp-text-muted);
             border-radius: var(--dbp-border-radius);
             color: #4a4a4a;
             display: inline-flex;
@@ -777,13 +823,13 @@ export function getTagCSS() {
         }
 
         .tag:not(body).is-dark {
-            background-color: var(--dbp-secondary-dark);
-            color: var(--dbp-text-light);
+            background-color: var(--dbp-secondary-base);
+            color: var(--dbp-secondary-text);
         }
 
         .tag:not(body).is-light {
-            background-color: var(--dbp-base-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-base);
+            color: var(--dbp-text);
         }
 
         .tag:not(body).is-normal {
@@ -878,7 +924,7 @@ export function getDocumentationCSS() {
         }
 
         .documentation a:hover {
-            color: var(--dbp-hover-text);
+            color: var(--dbp-hover-text, var(--dbp-text));
             background-color: var(--dbp-hover-base);
         }
 
@@ -914,7 +960,7 @@ export function getSelect2CSS() {
         }
 
         .select2-container--default .select2-selection--single .select2-selection__placeholder {
-            color: var(--dbp-text-muted-dark);
+            color: var(--dbp-text-muted);
         }
 
         /* Work around single selections not wrapping and breaking responsivness */
@@ -954,12 +1000,12 @@ export function getModalDialogCSS() {
             height: 100%;
             position: absolute;
             left: 0;
-            background-color: var(--dbp-base-dark);
+            background-color: var(--dbp-base-inverted);
             opacity: 0.6;
         }
 
         .modal-container {
-            background-color: var(--dbp-base-light);
+            background-color: var(--dbp-base);
             max-width: 600px;
             max-height: 100vh;
             min-width: 60%;
@@ -976,7 +1022,7 @@ export function getModalDialogCSS() {
             background: transparent;
             border: none;
             font-size: 1.5rem;
-            color: var(--dbp-accent-dark);
+            color: var(--dbp-accent);
             cursor: pointer;
             padding: 0px;
         }
@@ -1129,18 +1175,18 @@ export function getLinkCss() {
     // language=css
     return css`
         .int-link-external, .int-link-internal, .link, .link-without-hover {
-            border-bottom: var(--dbp-border-dark);
+            border-bottom: 1px solid var(--dbp-text);
         }
 
         .int-link-external:hover, .int-link-internal:hover, .link:hover {
-            color: var(--dbp-hover-text);
-            border-color: var(--dbp-hover-text);
+            color: var(--dbp-hover-text, var(--dbp-text));
+            border-color: var(--dbp-hover-text, var(--dbp-text));
             background-color: var(--dbp-hover-base);
         }
 
         .int-link-external:after, .int-link-internal:after, .link:after, .link-without-hover:after {
             content: "\\00a0\\00a0\\00a0";
-            background-color: var(--dbp-text-dark);
+            background-color: var(--dbp-text);
             -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2022.7%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2022.7%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M386.9%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C387.3%2C380.4%2C387.1%2C380.5%2C386.9%2C380.5z%22%0A%09%09%09%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
             mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2022.7%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2022.7%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M386.9%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C387.3%2C380.4%2C387.1%2C380.5%2C386.9%2C380.5z%22%0A%09%09%09%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
             -webkit-mask-repeat: no-repeat;
@@ -1154,7 +1200,7 @@ export function getLinkCss() {
         }
 
         .int-link-external:hover::after, .int-link-internal:hover::after, .link:hover::after{
-            background-color: var(--dbp-hover-text, var(--dbp-text-dark));
+            background-color: var(--dbp-hover-text, var(--dbp-text));
         }
     `;
 }
diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js
index 855ca709..ccf5f9b5 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-text-light);
-                background-color: var(--dbp-primary-dark);
+                color: var(--dbp-primary-text);
+                background-color: var(--dbp-primary-base);
                 content: '+';
             }
 
@@ -313,9 +313,7 @@ export class DataTableView extends AdapterLitElement {
 
             .dataTables_filter input {
                 border-radius: 0;
-                border-style: solid;
-                border-color: var(--dbp-base-dark);
-                border-width: 1px;
+                border:;
                 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 d5c35c62..9a68aeff 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: var(--dbp-text-dark);
+                    color: var(--dbp-text);
                     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: var(--dbp-text-dark);
+                    color: var(--dbp-text);
                 }
                 .content table th {
                     border: 1px solid #dbdbdb;
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 82aeebee..363f5780 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -728,7 +728,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             ${fileHandlingStyles.getFileHandlingCss()}
 
             a {
-                border-bottom: var(--dbp-border-dark);
+                border-bottom: var(--dbp-border);
                 padding: 0;
             }
 
@@ -809,7 +809,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
             }
 
             .clipboard-footer {
-                background-color: var(--dbp-base-light);
+                background-color: var(--dbp-base);
                 width: 100%;
                 padding-top: 10px;
                 display: flex;
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index 4e9282d1..ab3680a5 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -360,7 +360,7 @@ export class FileSink extends ScopedElementsMixin(DbpFileHandlingLitElement) {
             }
 
             .paddle::before {
-                background-color: var(--dbp-base-light);
+                background-color: var(--dbp-base);
                 opacity: 0.8;
                 content: "";
                 width: 100%;
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index fdee6df2..95e4f7f5 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -556,7 +556,7 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
             }
             
             #dropArea {
-                border: var(--dbp-border-dark, var(--FUBorderWidth, 2px) var(--FUBorderStyle, dashed) var(--FUBBorderColor, black));
+                border: var(--dbp-border, 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);
@@ -590,7 +590,7 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
             }
             
             .paddle::before {
-                background-color: var(--dbp-base-light);
+                background-color: var(--dbp-base);
                 opacity: 0.8;
                 content: "";
                 width: 100%;
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index de3dc3a0..9ddf2686 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -2050,7 +2050,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
 
             .breadcrumb-folder {
                 padding-right: 5px;
-                color: #444;
+                color: var(--dbp-text-muted);
                 font-size: 1.4em;
                 padding-top: 7px;
             }
@@ -2066,12 +2066,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .tabulator-placeholder {
-                border-top: 1px solid var(--dbp-text-muted-light);
+                border-top: 1px solid var(--dbp-text-muted);
             }
 
             #new-folder-row.highlighted {
-                background: #259207;
-                color: white;
+                background: var(--dbp-success);
+                color: var(--dbp-text-inverted);
             }
 
             span.first {
@@ -2137,9 +2137,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
 
             .extended-breadcrumb-menu {
                 list-style: none;
-                border: black 1px solid;
+                border: var(--dbp-border);
                 position: absolute;
-                background-color: white;
+                background-color: var(--dbp-base);
                 z-index: 1000;
                 /** display: grid; **/
             }
@@ -2154,8 +2154,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .tabulator-row.no-select.tabulator-selected {
-                background-color: white;
-                color: #333;
+                background-color: var(--dbp-base);
+                color: var(--dbp-text-muted);
             }
 
             input[type=text]#tf-new-folder:focus {
@@ -2218,8 +2218,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .error {
-                background-color: var(--dbp-base-light);
-                color: var(--dbp-danger-dark);
+                background-color: var(--dbp-base);
+                color: var(--dbp-danger);
             }
 
             .filter-options-wrapper {
@@ -2254,15 +2254,16 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
 
             .extended-menu {
                 list-style: none;
-                border: black 1px solid;
+                border: var(--dbp-border);
                 position: absolute;
-                background-color: white;
+                background-color: var(--dbp-base);
                 z-index: 1000;
                 right: 0px;
             }
 
             .extended-menu a:hover {
-                color: #E4154B;
+                color: var(--dbp-hover-text, var(--dbp-text));
+                background-color: var(--dbp-hover-base);
             }
 
             .nextcloud-header {
@@ -2339,7 +2340,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
 
 
             .nextcloud-footer {
-                background-color: var(--dbp-base-light);
+                background-color: var(--dbp-base);
                 width: 100%;
                 padding-top: 10px;
             }
@@ -2409,7 +2410,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             #replace-modal-box input[type="text"]:disabled {
-                color: var(--dbp-text-muted-light);
+                color: var(--dbp-text-muted);
             }
 
             #replace-modal-box .modal-content div {
@@ -2443,7 +2444,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             input:disabled + label {
-                color: var(--dbp-text-muted-light);
+                color: var(--dbp-text-muted);
             }
 
             .inline-block {
@@ -2456,30 +2457,30 @@ 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: var(--dbp-text-dark);
-                background-color: var(--dbp-base-light);
+                color: var(--dbp-text);
+                background-color: var(--dbp-base);
             }
 
             .inline-block {
                 position: absolute;
                 right: 0px;
                 z-index: 1;
-                background-color: var(--dbp-base-light);
+                background-color: var(--dbp-base);
                 bottom: -45px;
             }
 
             .addRowAnimation {
-                color: var(--dbp-text-dark);
+                color: var(--dbp-text);
                 animation: added 0.4s ease;
             }
 
             #abortButton {
-                background-color: var(--dbp-base-light);
-                color: var(--dbp-danger-dark);
+                background-color: var(--dbp-base);
+                color: var(--dbp-danger);
             }
 
             #abortButton:hover {
-                color: var(--dbp-text-light);
+                color: var(--dbp-text-inverted);
             }
             
             .menu-buttons {
@@ -2489,13 +2490,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
 
             @keyframes added {
                 0% {
-                    background-color: var(--dbp-base-light);
+                    background-color: var(--dbp-base);
                 }
                 50% {
-                    background-color: var(--dbp-success-light);
+                    background-color: var(--dbp-success);
                 }
                 100% {
-                    background-color: var(--dbp-base-light);
+                    background-color: var(--dbp-base);
                 }
             }
 
@@ -2508,7 +2509,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .button.button, .button, button.dt-button {
-                background-color: var(--dbp-base-light);
+                background-color: var(--dbp-base);
             }
 
             #new-folder {
@@ -2636,7 +2637,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                     position: absolute;
                     right: 52px;
                     z-index: 1;
-                    background-color: var(--dbp-base-light);
+                    background-color: var(--dbp-base);
                     bottom: 0px;
                 }
 
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index da568589..56b48c85 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: var(--dbp-base-light);
-            border-right: var(--dbp-border-dark);
+            background-color: var(--dbp-base);
+            border-right: var(--dbp-border);
             grid-area: sidebar;
         }
 
@@ -34,8 +34,8 @@ export function getFileHandlingCss() {
         }
 
         .modal-nav .active{
-            background-color: var(--dbp-secondary-dark);
-            color: var(--dbp-text-light);
+            background-color: var(--dbp-base-inverted);
+            color: var(--dbp-text-inverted);
         }
 
         .modal-content {
@@ -140,17 +140,17 @@ export function getFileHandlingCss() {
         }
 
         .tabulator-row, .tabulator-row.tabulator-row-even{
-            background-color: var(--dbp-base-light);
+            background-color: var(--dbp-base);
         }
 
         .tabulator-row.tabulator-selectable.tabulator-selectable:hover{
-            background-color: var(--dbp-base-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-base);
+            color: var(--dbp-text);
         }
 
         .tabulator-row.tabulator-selectable.tabulator-selected:hover, .tabulator-row.tabulator-selected{
-            background-color: var(--dbp-hover-base);
-            color: var(--dbp-hover-text);
+            background-color: var(--dbp-hover-base, var(--dbp-base-inverted));
+            color: var(--dbp-hover-text, var(--dbp-text-inverted));
         }
 
         .tabulator .tabulator-header .tabulator-col .tabulator-col-content{
@@ -163,12 +163,12 @@ export function getFileHandlingCss() {
 
         .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow{
             border-top: none;
-            border-bottom: 4px solid var(--dbp-text-muted-dark);
+            border-bottom: 4px solid var(--dbp-text-muted);
         }
 
         .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow{
             border-top: none;
-            border-bottom: 4px solid var(--dbp-text-muted-light);
+            border-bottom: 4px solid var(--dbp-text-muted);
         }
 
         .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{
@@ -178,14 +178,27 @@ export function getFileHandlingCss() {
 
         .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow,
         .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow{
-            border-top: 4px solid var(--dbp-text-muted-dark);
+            border-top: 4px solid var(--dbp-text-muted);
             border-bottom: none;
         }
 
         .tabulator-row, .tabulator-row.tabulator-row-even{
             padding-top: 10px;
             padding-bottom: 10px;
-            border-top: 1px solid var(--dbp-text-muted-light);
+            border-top: 1px solid #eee;
+            color: var(--dbp-text);
+        }
+
+        .tabulator-row.tabulator-row-even.tabulator-selected{
+            color: var(--dbp-hover-text, var(--dbp-text-inverted));
+        }
+
+        .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
+            border-bottom-color: var(--dbp-text);
+        }
+
+        .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
+            border-bottom-color: var(--dbp-text-muted);
         }
 
         .tabulator-header{
@@ -222,7 +235,7 @@ export function getFileHandlingCss() {
             height: 32px;
             width: 32px;
             background-color: unset;
-            color: var(--dbp-text-dark);
+            color: var(--dbp-text);
             font-size: 1.3em;
             margin-top: -8px;
         }
@@ -276,7 +289,7 @@ export function getFileHandlingCss() {
         
         .tabulator-selected .tabulator-responsive-collapse-toggle-open, 
         .tabulator-selected .tabulator-responsive-collapse-toggle-close{
-            color: var(--dbp-text-light);
+            color: var(--dbp-text-inverted);
         }
         
         .tabulator .tabulator-header .tabulator-col{
@@ -314,8 +327,8 @@ export function getFileHandlingCss() {
                 /*justify-content: space-around;*/
                 grid-area: nav;
                 border: none;
-                border-bottom: var(--dbp-border-dark);
-                border-top: var(--dbp-border-dark);
+                border-bottom: var(--dbp-border);
+                border-top: var(--dbp-border);
                 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 9fb0b395..0b5352e0 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -95,7 +95,7 @@ export class LanguageSelect extends AdapterLitElement {
                 display: inline-block;
                 text-decoration: none;
                 transition: background-color 0.15s, color 0.15s;
-                color: var(--dbp-text-dark);
+                color: var(--dbp-text);
             }
 
             input::-moz-focus-inner { border: 0; }
@@ -106,7 +106,7 @@ export class LanguageSelect extends AdapterLitElement {
                 box-shadow: none;
                 -moz-box-shadow: none;
                 -webkit-box-shadow: none;
-                box-shadow: 0px 0px 4px 2px var(--dbp-accent-dark);
+                box-shadow: 0px 0px 4px 2px var(--dbp-accent);
             }
             
             `
diff --git a/packages/notification/src/notification.js b/packages/notification/src/notification.js
index a3c8f1cc..db9bda9d 100644
--- a/packages/notification/src/notification.js
+++ b/packages/notification/src/notification.js
@@ -113,8 +113,8 @@ export class Notification extends DBPLitElement {
             }
 
             .delete::before, .modal-close::before, .delete::after, .modal-close::after {
-                background-color: var(--dbp-base-light);
-                color: var(--dbp-text-dark);
+                background-color: var(--dbp-base);
+                color: var(--dbp-text);
                 content: "";
                 display: block;
                 left: 50%;
diff --git a/packages/person-select/src/person-select.js b/packages/person-select/src/person-select.js
index 0794a469..6f30a8cb 100644
--- a/packages/person-select/src/person-select.js
+++ b/packages/person-select/src/person-select.js
@@ -348,8 +348,8 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                border: var(--dbp-border-dark);
-                border-color: var(--dbp-text-muted-dark);
+                border: var(--dbp-border);
+                border-color: var(--dbp-text-muted);
                 -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 34f419b8..e9a95ab0 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -317,8 +317,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
 
                 canvas.beginPath();
                 if (lastCode) {
-                    let okColor = getComputedStyle(this).getPropertyValue('--dbp-success-dark');
-                    let notOkColor = getComputedStyle(this).getPropertyValue('--dbp-danger-dark');
+                    let okColor = getComputedStyle(this).getPropertyValue('--dbp-success');
+                    let notOkColor = getComputedStyle(this).getPropertyValue('--dbp-danger');
                     canvas.fillStyle = matched ? okColor : notOkColor;
                 } else {
                     canvas.fillStyle = 'white';
@@ -432,8 +432,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         
             .output {
                   margin-top: 20px;
-                  background: var(--dbp-text-muted-light);
-                  color: var(--dbp-text-dark);
+                  background: var(--dbp-text-muted);
+                  color: var(--dbp-text);
                   padding: 10px;
                   padding-bottom: 0;
             }
@@ -459,7 +459,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             
             #videoSource:hover {
                 background: calc(100% - 0.2rem) center no-repeat url("${unsafeCSS(getIconSVGURL('chevron-down'))}");
-                color: var(--dbp-text-dark);
+                color: var(--dbp-text);
                 background-position-x: calc(100% - 0.4rem);
                 background-size: auto 45%;
             }
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index ee2f3a26..868fbcec 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -75,12 +75,12 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
             }
 
             .tippy-box {
-                background-color: var(--dbp-base-dark);
-                color: var(--dbp-text-light);
+                background-color: var(--dbp-base-inverted);
+                color: var(--dbp-text-inverted);
             }
 
             .tippy-arrow{
-               color: var(--dbp-base-dark);
+               color: var(--dbp-text);
             }
         `;
     }
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index 8d75a27d..e4efd8b8 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -58,7 +58,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
 
             .tooltip-icon {
                 display: inline;
-                color: var(--dbp-secondary-dark);
+                color: var(--dbp-text);
             }
             
         `;
diff --git a/toolkit-showcase/src/styles.js b/toolkit-showcase/src/styles.js
index df13ec7c..55d49382 100644
--- a/toolkit-showcase/src/styles.js
+++ b/toolkit-showcase/src/styles.js
@@ -82,16 +82,16 @@ export function getDemoCSS() {
         }
 
         pre {
-            background-color: var(--dbp-base-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-base);
+            color: var(--dbp-text);
             padding: 0.4em;
             overflow-x: auto;
             border: 1px solid #ddd;
         }
 
         code {
-            background-color: var(--dbp-base-light);
-            color: var(--dbp-text-dark);
+            background-color: var(--dbp-base);
+            color: var(--dbp-text);
             line-height: 1.5em;
             font-weight: normal;
             padding: 0.25em 0.5em 0.25em;
-- 
GitLab