packages/qr-code-scanner/package.json

 {
     "name": "@dbp-toolkit/qr-code-scanner",
     "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/qr-code-scanner",
-    "version": "0.3.0",
+    "version": "0.3.1",
     "main": "src/index.js",
     "license": "LGPL-2.1-or-later",
     "repository": {
@@ -15,10 +15,10 @@
     },
     "devDependencies": {
         "@esm-bundle/chai": "^4.2.0",
-        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.0.0",
         "@rollup/plugin-node-resolve": "^13.0.0",
-        "@rollup/plugin-url": "^6.0.0",
+        "@rollup/plugin-url": "^7.0.0",
         "eslint": "^8.0.0",
         "eslint-plugin-jsdoc": "^39.0.0",
         "i18next-parser": "^6.3.0",
@@ -26,7 +26,7 @@
         "karma-chrome-launcher": "^3.0.0",
         "karma-firefox-launcher": "^2.1.0",
         "karma-mocha": "^2.0.1",
-        "mocha": "^9.0.0",
+        "mocha": "^10.0.0",
         "playwright-core": "^1.20.2",
         "prettier": "^2.5.1",
         "rollup": "^2.33.3",
@@ -37,11 +37,11 @@
         "selfsigned": "^2.0.0"
     },
     "dependencies": {
-        "@dbp-toolkit/common": "^0.3.0",
+        "@dbp-toolkit/common": "^0.3.3",
         "@open-wc/scoped-elements": "^2.1.0",
         "async-mutex": "^0.3.0",
         "lit": "^2.0.0",
-        "qr-scanner": "^1.2.0"
+        "qr-scanner": "^1.4.1"
     },
     "scripts": {
         "clean": "rm dist/*",

packages/qr-code-scanner/rollup.config.js

@@ -67,10 +67,6 @@ export default async () => {
                         src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'),
                         dest: 'dist/' + (await getDistPath('@dbp-toolkit/common', 'icons')),
                     },
-                    {
-                        src: await getPackagePath('qr-scanner', 'qr-scanner-worker.*'),
-                        dest: 'dist/' + (await getDistPath(pkg.name)),
-                    },
                 ],
             }),
             process.env.ROLLUP_WATCH === 'true'

packages/qr-code-scanner/src/engine.js

+export class ScanResult {
+    constructor() {
+        this.data = null;
+        this.cornerPoints = null;
+    }
+}
+
+export class QrCodeScannerEngine {
+    constructor() {
+        this._engine = null;
+        this._canvas = document.createElement('canvas');
+        this._scanner = null;
+    }
+
+    /**
+     * Scan am image like thing for a QR code. Returns null if none is found.
+     * The region to scan in can be restricted via "options".
+     *
+     * @param {*} image
+     * @param {?object} options
+     * @param {number} options.x
+     * @param {number} options.y
+     * @param {number} options.width
+     * @param {number} options.height
+     * @returns {?ScanResult}
+     */
+    async scanImage(image, options = null) {
+        if (this._scanner === null) {
+            this._scanner = (await import('qr-scanner')).default;
+        }
+        if (this._engine === null) {
+            this._engine = await this._scanner.createQrEngine();
+        }
+        try {
+            let tmp = await this._scanner.scanImage(image, {
+                scanRegion: options ?? null,
+                qrEngine: this._engine,
+                canvas: this._canvas,
+            });
+            let res = new ScanResult();
+            res.data = tmp.data;
+            res.cornerPoints = tmp.cornerPoints;
+            return res;
+        } catch (e) {
+            return null;
+        }
+    }
+}

packages/qr-code-scanner/src/index.js

-import {QrCodeScanner} from './qr-code-scanner.js';
-
-export {QrCodeScanner};
+export {QrCodeScanner} from './qr-code-scanner.js';
+export {QrCodeScannerEngine, ScanResult} from './engine.js';

packages/qr-code-scanner/src/qr-code-scanner.js

@@ -5,10 +5,9 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {Icon, MiniSpinner} from '@dbp-toolkit/common';
 import {classMap} from 'lit/directives/class-map.js';
-import * as commonUtils from '@dbp-toolkit/common/utils';
 import {Mutex} from 'async-mutex';
-import {name as pkgName} from './../package.json';
 import {getIconSVGURL} from '@dbp-toolkit/common';
+import {QrCodeScannerEngine, ScanResult} from './engine.js';
 
 /**
  * Returns the ID for the most important device
@@ -118,39 +117,6 @@ async function createVideoElement(deviceId) {
     return null;
 }
 
-class QRScanner {
-    constructor() {
-        this._engine = null;
-        this._canvas = document.createElement('canvas');
-        this._scanner = null;
-    }
-
-    async scan(canvas, x, y, width, height) {
-        if (this._scanner === null) {
-            this._scanner = (await import('qr-scanner')).default;
-            this._scanner.WORKER_PATH = commonUtils.getAssetURL(
-                pkgName,
-                'qr-scanner-worker.min.js'
-            );
-        }
-        if (this._engine === null) {
-            this._engine = await this._scanner.createQrEngine(this._scanner.WORKER_PATH);
-        }
-        try {
-            return {
-                data: await this._scanner.scanImage(
-                    canvas,
-                    {x: x, y: y, width: width, height: height},
-                    this._engine,
-                    this._canvas
-                ),
-            };
-        } catch (e) {
-            return null;
-        }
-    }
-}
-
 export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
@@ -272,10 +238,11 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         }
         this._askPermission = false;
 
+        /** @type {?ScanResult} */
         let lastCode = null;
         let lastSentData = null;
 
-        let detector = new QRScanner();
+        let detector = new QrCodeScannerEngine();
         let detectorRunning = false;
 
         const tick = () => {
@@ -307,7 +274,12 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                 if (!detectorRunning) {
                     detectorRunning = true;
                     detector
-                        .scan(canvasElement, maskStartX, maskStartY, maskWidth, maskHeight)
+                        .scanImage(canvasElement, {
+                            x: maskStartX,
+                            y: maskStartY,
+                            width: maskWidth,
+                            height: maskHeight,
+                        })
                         .then((code) => {
                             detectorRunning = false;
                             // if we got restarted then the video element is new, so stop then.
@@ -315,17 +287,18 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                             lastCode = code;
 
                             if (code) {
-                                if (lastSentData !== code.data) {
-                                    this._outputData = code.data;
+                                let currentData = code.data;
+                                if (lastSentData !== currentData) {
+                                    this._outputData = currentData;
                                     this.dispatchEvent(
                                         new CustomEvent('code-detected', {
                                             bubbles: true,
                                             composed: true,
-                                            detail: {code: code.data},
+                                            detail: {code: currentData},
                                         })
                                     );
                                 }
-                                lastSentData = code.data;
+                                lastSentData = currentData;
                             } else {
                                 this._outputData = null;
                                 lastSentData = null;

packages/qr-code-scanner/test/unit.js

 import {assert} from '@esm-bundle/chai';
 
 import '../src/dbp-qr-code-scanner';
+import {QrCodeScannerEngine} from '../src';
 
 suite('dbp-qr-code-scanner basics', () => {
     let node;
@@ -19,3 +20,30 @@ suite('dbp-qr-code-scanner basics', () => {
         assert.isNotNull(node.shadowRoot);
     });
 });
+
+suite('scan image', () => {
+    test('should detect', async () => {
+        let engine = new QrCodeScannerEngine();
+        let image = new Image();
+        image.setAttribute(
+            'src',
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmAQMAAACS83vtAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bi1IqDu0gopChdbIgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APE0clJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KrQ+4ogIghhBHGJmfqcKKbhOb7u4ePrXYJneZ/7c/QrBZMBPoF4lumGRbxBPL1p6Zz3iaOsLCnE58RjBl2Q+JHrsstvnEsO+3lm1Mhm5omjxEKpi+UuZmVDJZ4ijimqRvn+nMsK5y3OarXO2vfkLwwXtJVlrtMcRgqLWIIIATLqqKAKCwlaNVJMZGg/6eEfcvwiuWRyVcDIsYAaVEiOH/wPfndrFicn3KRwEgi+2PZHHOjdBVoN2/4+tu3WCRB4Bq60jr/WBGY+SW90tNgRMLANXFx3NHkPuNwBBp90yZAcKUDTXywC72f0TXkgcguE1tze2vs4fQCy1FX6Bjg4BEZLlL3u8e6+7t7+PdPu7wdo/XKjkhoyogAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+YFEwogFupCMRsAAAAGUExURQAAAP///6XZn90AAAABYktHRAH/Ai3eAAAAuUlEQVQI12P4DwR/GDDJD1KfFWwYvt/ctn4Pw5fYnRpAMrz1BZCM6wKS3y97vN/D8EHUa4ENw//PrPZ/GH7e7FwKJA19l9ow/Lv4extQzdPvjEBzBH+31jB80jyVu4fh//09JjDyn1Ef5x+Gz7caltswfM2xOruH4Y8Qd8Ueho8rnHhrGP6yWjPWAE0+uNOG4YMM+wqgaTe3WtYwfInoZQaS0b1BQDKcZRLQhZf99gJtkSieuIcBh18ArRODGZrlUXYAAAAASUVORK5CYII='
+        );
+        let res;
+
+        res = await engine.scanImage(image);
+        assert.strictEqual(res.data, 'http://en.m.wikipedia.org');
+
+        // the second time the same
+        res = await engine.scanImage(image);
+        assert.strictEqual(res.data, 'http://en.m.wikipedia.org');
+
+        // if we don't scan the whole thing then it fails
+        res = await engine.scanImage(image, {x: 0, y: 0, width: 5, height: 5});
+        assert.isNull(res);
+
+        // if we pass the right size, then everything is OK again
+        res = await engine.scanImage(image, {x: 0, y: 0, width: image.width, height: image.height});
+        assert.strictEqual(res.data, 'http://en.m.wikipedia.org');
+    });
+});

packages/resource-select/package.json

 {
     "name": "@dbp-toolkit/resource-select",
     "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/resource-select",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "main": "src/index.js",
     "license": "LGPL-2.1-or-later",
     "repository": {
@@ -15,11 +15,11 @@
     },
     "devDependencies": {
         "@esm-bundle/chai": "^4.2.0",
-        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.0.0",
         "@rollup/plugin-replace": "^4.0.0",
-        "@rollup/plugin-url": "^6.0.0",
+        "@rollup/plugin-url": "^7.0.0",
         "eslint": "^8.0.0",
         "eslint-plugin-jsdoc": "^39.0.0",
         "i18next-parser": "^6.3.0",
@@ -27,7 +27,7 @@
         "karma-chrome-launcher": "^3.0.0",
         "karma-firefox-launcher": "^2.1.0",
         "karma-mocha": "^2.0.1",
-        "mocha": "^9.0.0",
+        "mocha": "^10.0.0",
         "playwright-core": "^1.20.2",
         "prettier": "^2.5.1",
         "rollup": "^2.33.3",
@@ -37,8 +37,8 @@
         "rollup-plugin-terser": "^7.0.2"
     },
     "dependencies": {
-        "@dbp-toolkit/auth": "^0.3.0",
-        "@dbp-toolkit/common": "^0.3.0",
+        "@dbp-toolkit/auth": "^0.3.1",
+        "@dbp-toolkit/common": "^0.3.3",
         "@open-wc/scoped-elements": "^2.1.0",
         "jquery": "^3.4.1",
         "lit": "^2.0.0",

packages/resource-select/src/dbp-resource-select-demo.js

@@ -79,9 +79,8 @@ export class ResourceSelectDemo extends ScopedElementsMixin(DBPLitElement) {
 
     render() {
         let buildUrl = (select, url) => {
-            url += '/' + encodeURIComponent(select.auth['person-id']);
-            url += '/organizations';
-            url += '?' + new URLSearchParams({lang: select.lang}).toString();
+            url += '?person=' + encodeURIComponent(select.auth['person-id']);
+            url += '&' + new URLSearchParams({lang: select.lang}).toString();
             return url;
         };
 
@@ -109,7 +108,7 @@ export class ResourceSelectDemo extends ScopedElementsMixin(DBPLitElement) {
                                     subscribe="auth"
                                     lang="${this.lang}"
                                     entry-point-url="${this.entryPointUrl}"
-                                    resource-path="base/people"
+                                    resource-path="base/organizations"
                                     @change="${change}"
                                     .buildUrl="${buildUrl}"
                                     .formatResource="${formatResource}"></dbp-resource-select>

packages/resource-select/src/resource-select.js

@@ -7,7 +7,7 @@ import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import select2LangDe from '@dbp-toolkit/resource-select/src/i18n/de/select2';
 import select2LangEn from '@dbp-toolkit/resource-select/src/i18n/en/select2';
-import {AdapterLitElement} from '@dbp-toolkit/provider/src/adapter-lit-element';
+import {AdapterLitElement} from '@dbp-toolkit/common';
 import * as hydra from './hydra.js';
 
 export class ResourceSelect extends AdapterLitElement {
@@ -142,8 +142,14 @@ export class ResourceSelect extends AdapterLitElement {
 
     async _updateAll() {
         this._setValue(this.value);
-        if (!this.auth.token) {
+
+        // Show a dummy loading variant initially
+        const $select = this._getSelect2();
+        if (!this._IsSelect2Initialized($select)) {
             await this._setSelect2Loading();
+        }
+
+        if (!this.auth.token) {
             return;
         }
         await this._updateResources();

packages/theme-switcher/README.md

@@ -80,15 +80,37 @@ Or you can include the JS files directly via CDN:
 <script type="module" src="https://unpkg.com/@dbp-toolkit/theme-switcher@0.0.1/dist/theme-switcher.js"></script>
 ```
 
-## Theme Switcher
-
-### Usage
+## Usage
 
 ```html
 <dbp-theme-switcher></dbp-theme-switcher>
 ```
 
-### Attributes
+## Usage in an application with appshell
+If you want to use multiple themes in the appshell, then you have to define the classes inside the `<head>` tag inside the `<style>` tag.
+
+Then add the themes attribute with your themes to the application tag in the `<body>` tag.
+
+### Themes attribute
+
+The themes attribute is organized as an array with objects. The objects have following properties: class(name of the class added to the style tag), 
+icon (name of an icon, which is displayed infront of the Theme name) and name(Friendly name of your theme).
+
+Attention! Currently we don't support translation of the friendly name, so choose an across languages name.
+
+```html
+
+        themes='[{"class": "name-of-your-class", "icon": "name-of-the-icon", "name": "Friendly name of your theme"}, 
+        {"class": "name-of-another-class", "icon": "name-of-the-icon", "name": "Friendly name of another theme"}]'
+
+```
+
+### Example
+A full example can be found in each application in the `index.html` of the `app-template` folder. (E.g. [Greenlight app-template](https://gitlab.tugraz.at/dbp/greenlight/greenlight/-/blob/main/app-template/index.html))
+
+
+
+## Attributes
 
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
     - example `<dbp-file-source lang="de"></dbp-file-source>`
@@ -108,7 +130,7 @@ Or you can include the JS files directly via CDN:
          detects if the browser uses the dark mode and handles the given string as dark mode class
       
 
-### Note
+## Note
 The classes should be defined outside of the body tag.
 
 ## Local development

packages/theme-switcher/package.json

 {
     "name": "@dbp-toolkit/theme-switcher",
     "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/theme-switcher",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "main": "src/index.js",
     "license": "LGPL-2.1-or-later",
     "repository": {
@@ -15,7 +15,7 @@
     },
     "devDependencies": {
         "@esm-bundle/chai": "^4.2.0",
-        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.0.2",
         "@rollup/plugin-node-resolve": "^13.0.0",
         "eslint": "^8.0.0",
@@ -25,7 +25,7 @@
         "karma-chrome-launcher": "^3.0.0",
         "karma-firefox-launcher": "^2.1.0",
         "karma-mocha": "^2.0.0",
-        "mocha": "^9.0.0",
+        "mocha": "^10.0.0",
         "playwright-core": "^1.20.2",
         "prettier": "^2.5.1",
         "rollup": "^2.33.3",
@@ -35,7 +35,7 @@
         "rollup-plugin-terser": "^7.0.2"
     },
     "dependencies": {
-        "@dbp-toolkit/common": "^0.3.0",
+        "@dbp-toolkit/common": "^0.3.3",
         "@open-wc/scoped-elements": "^2.1.0",
         "i18next": "^21.4.2",
         "jszip": "^3.5.0",

packages/tooltip/package.json

 {
     "name": "@dbp-toolkit/tooltip",
     "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/tooltip",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "main": "src/index.js",
     "license": "LGPL-2.1-or-later",
     "repository": {
@@ -15,10 +15,10 @@
     },
     "devDependencies": {
         "@esm-bundle/chai": "^4.2.0",
-        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.0.0",
-        "@rollup/plugin-url": "^6.0.0",
+        "@rollup/plugin-url": "^7.0.0",
         "eslint": "^8.0.0",
         "eslint-plugin-jsdoc": "^39.0.0",
         "i18next-parser": "^6.3.0",
@@ -26,7 +26,7 @@
         "karma-chrome-launcher": "^3.0.0",
         "karma-firefox-launcher": "^2.1.0",
         "karma-mocha": "^2.0.1",
-        "mocha": "^9.0.0",
+        "mocha": "^10.0.0",
         "playwright-core": "^1.20.2",
         "prettier": "^2.5.1",
         "rollup": "^2.33.3",
@@ -37,8 +37,8 @@
         "rollup-plugin-terser": "^7.0.2"
     },
     "dependencies": {
-        "@dbp-toolkit/auth": "^0.3.0",
-        "@dbp-toolkit/common": "^0.3.0",
+        "@dbp-toolkit/auth": "^0.3.1",
+        "@dbp-toolkit/common": "^0.3.3",
         "@open-wc/scoped-elements": "^2.1.0",
         "lit": "^2.0.0",
         "tippy.js": "^6.3.1"

packages/typescript-example/package.json

 {
     "name": "@dbp-toolkit/typescript-example",
-    "version": "0.2.4",
+    "version": "0.2.5",
     "main": "src/index.js",
     "license": "LGPL-2.1-or-later",
     "repository": {
@@ -14,7 +14,7 @@
     },
     "devDependencies": {
         "@esm-bundle/chai": "^4.2.0",
-        "@rollup/plugin-commonjs": "^21.0.0",
+        "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.0.0",
         "@types/mocha": "^9.0.0",
@@ -25,7 +25,7 @@
         "karma-chrome-launcher": "^3.0.0",
         "karma-firefox-launcher": "^2.1.0",
         "karma-mocha": "^2.0.1",
-        "mocha": "^9.0.0",
+        "mocha": "^10.0.0",
         "playwright-core": "^1.20.2",
         "prettier": "^2.5.1",
         "rollup": "^2.33.3",
@@ -33,13 +33,13 @@
         "rollup-plugin-delete": "^2.0.0",
         "rollup-plugin-serve": "^1.0.1",
         "rollup-plugin-terser": "^7.0.2",
-        "rollup-plugin-typescript2": "^0.31.0",
+        "rollup-plugin-typescript2": "^0.32.0",
         "ts-lit-plugin": "^1.2.1",
         "tslib": "^2.0.3",
         "typescript": "^4.1.2"
     },
     "dependencies": {
-        "@dbp-toolkit/common": "^0.3.0",
+        "@dbp-toolkit/common": "^0.3.3",
         "@open-wc/scoped-elements": "^2.1.0",
         "lit": "^2.0.0"
     },

rollup.utils.js

@@ -9,6 +9,10 @@ export function getBuildInfo(build) {
     let remote = child_process.execSync('git config --get remote.origin.url').toString().trim();
     let commit = child_process.execSync('git rev-parse --short HEAD').toString().trim();
 
+    if (remote.indexOf('git@') === 0) {
+        remote = remote.replace(':', '/').replace('git@', 'https://');
+    }
+
     let parsed = url.parse(remote);
     let newPath = parsed.path.slice(0, parsed.path.lastIndexOf('.'));
     let newUrl = parsed.protocol + '//' + parsed.host + newPath + '/commit/' + commit;

toolkit-showcase/assets/common.metadata.json

@@ -14,5 +14,5 @@
         "de": "Gemeinsame Web Components",
         "en": "Common web components"
     },
-    "subscribe": "lang,entry-point-url"
+    "subscribe": "lang,entry-point-url,lang-dir"
 }

toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs

@@ -3,20 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="theme-color" content="white"/>
+    <meta name="theme-color" content="#ffffff">
 
     <!-- Favicons -->
     <link rel="shortcut icon" type="image/x-icon" href="<%= getPrivateUrl('favicon.ico') %>">
-    <link rel="icon" type="image/svg+xml" href="<%= getPrivateUrl('favicon.svg') %>" sizes="any">
-
-    <!-- PWA manifest file -->
-    <link rel="manifest" href="<%= getUrl(name + '.manifest.json') %>">
-    
-    <!-- PWA iphone -->
+    <link rel="icon" type="image/svg+xml" href="<%= getPrivateUrl('favicon.svg') %>">
     <link rel="apple-touch-icon" sizes="180x180" href="<%= getPrivateUrl('apple-touch-icon.png') %>">
-    <link rel="icon" type="image/png" sizes="32x32" href="<%= getPrivateUrl('icon-32x32.png') %>">
-    <link rel="icon" type="image/png" sizes="16x16" href="<%= getPrivateUrl('icon-16x16.png') %>">
-    <link rel="mask-icon" href="<%= getPrivateUrl('safari-pinned-tab.svg') %>" color="#e4154b">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= getPrivateUrl('favicon-32x32.png') %>">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= getPrivateUrl('favicon-16x16.png') %>">
+    <link rel="manifest" href="<%= getUrl(name + '.webmanifest') %>">
+    <link rel="mask-icon" href="<%= getPrivateUrl('safari-pinned-tab.svg') %>" color="#3775c1">
+    <meta name="msapplication-config" content="<%= getUrl(name + '_browserconfig.xml') %>" />
+    <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="apple-mobile-web-app-status-bar-style" content="white">
 
     <!-- Loading spinner -->
@@ -33,74 +31,68 @@
 
     <!-- Font related CSS -->
     <style>
-        @import "<%= getPrivateUrl('fonts/source-sans-pro/300.css') %>";
-        @import "<%= getPrivateUrl('fonts/source-sans-pro/400.css') %>";
-        @import "<%= getPrivateUrl('fonts/source-sans-pro/600.css') %>";
+
+        @import "<%= getPrivateUrl('fonts/nunito-sans/300.css') %>";
+        @import "<%= getPrivateUrl('fonts/nunito-sans/300-italic.css') %>";
+        @import "<%= getPrivateUrl('fonts/nunito-sans/600.css') %>";
+        @import "<%= getPrivateUrl('fonts/nunito-sans/600-italic.css') %>";
+
 
         body {
-            font-family: 'Source Sans Pro', 'Calibri', 'Arial', 'sans-serif';
-            font-weight: 300;
+            font-family: 'Nunito Sans', 'Calibri', 'Arial', 'sans-serif';
+            line-height: 1.4em;
+            font-weight: 400;
             margin: 0;
         }
 
-        /* TU-Graz style override */
         html {
-            --dbp-override-primary-bg-color: #245b78;
-            --dbp-override-primary-button-border: solid 1px #245b78;
-            --dbp-override-info-bg-color: #245b78;
-            --dbp-override-danger-bg-color: #e4154b;
-            --dbp-override-warning-bg-color: #ffe183;
-            --dbp-override-warning-text-color: black;
-            --dbp-override-success-bg-color: #259207;
         }
 
         .light-theme{
             --dbp-override-background: white;
-            --dbp-override-content: black;
+            --dbp-override-content: #222120;
 
-            --dbp-override-primary: #2a4491;
-            --dbp-override-secondary: black;
+            --dbp-override-primary: #3775c1;
+            --dbp-override-secondary: #222120;
             --dbp-override-secondary-surface: white;
-            --dbp-override-on-secondary-surface: black;
-            --dbp-override-secondary-surface-border-color: black;
+            --dbp-override-on-secondary-surface: #222120;
+            --dbp-override-secondary-surface-border-color: #222120;
 
             --dbp-override-muted: #767676;
-            --dbp-override-accent: #c24f68;
-            --dbp-override-info: #2a4491;
-            --dbp-override-success: #188018;
-            --dbp-override-warning: #c15500;
-            --dbp-override-warning-surface: #ffad4d;
-            --dbp-override-on-warning-surface: black;
-            --dbp-override-danger: #de3535;
-
-            --dbp-override-border: 1px solid black;
-
-            --dbp-override-hover-background-color: black;
-            --dbp-override-hover-color: white;
+            --dbp-override-accent: #9e1e4d;
+            --dbp-override-info: #38808a;
+            --dbp-override-success: #338555;
+            --dbp-override-success-surface: #5ec189;
+            --dbp-override-on-success-surface: #222120;
+            --dbp-override-warning: #bf8808;
+            --dbp-override-warning-surface: #f9cc66;
+            --dbp-override-on-warning-surface: #222120;
+            --dbp-override-danger: #cc3232;
+
+            --dbp-override-border: 1px solid #222120;
         }
 
         .dark-theme{
-            --dbp-override-background: #151515;
+            --dbp-override-background: #222120;
             --dbp-override-content: white;
 
-            --dbp-override-primary: #8ca4eb;
+            --dbp-override-primary: #3775c1;
             --dbp-override-secondary: white;
-            --dbp-override-secondary-surface: #151515;
+            --dbp-override-secondary-surface: #222120;
             --dbp-override-on-secondary-surface: white;
-            --dbp-override-secondary-surface-border-color: #151515;
+            --dbp-override-secondary-surface-border-color: white;
 
-            --dbp-override-muted: #666666;
-            --dbp-override-accent: #c24f68;
-            --dbp-override-info: #8ca4eb;
-            --dbp-override-success: #7acc79;
-            --dbp-override-warning: #f99a41;
-            --dbp-override-on-warning-surface: black;
-            --dbp-override-danger: #de3535;
+            --dbp-override-muted: #767676;
+            --dbp-override-accent: #C13F6F;
+            --dbp-override-info: #38808a;
+            --dbp-override-success: #5ec189;
+            --dbp-override-success-surface: #5ec189;
+            --dbp-override-on-success-surface: #222120;
+            --dbp-override-warning: #f9cc66;
+            --dbp-override-danger: #cc3232;
 
             --dbp-override-border: 1px solid white;
 
-            --dbp-override-hover-background-color: white;
-            --dbp-override-hover-color: #151515;
         }
     </style>
 
@@ -113,6 +105,7 @@
 <<%= name %>
     provider-root
     lang="de"
+    lang-dir="<%= getPrivateUrl('translation-overrides/') %>"
     entry-point-url="<%= entryPointURL %>"
     nextcloud-auth-url="<%= nextcloudWebAppPasswordURL %>"
     nextcloud-web-dav-url="<%= nextcloudWebDavURL %>"
@@ -127,8 +120,38 @@
     build-url='<%= buildInfo.url %>'
     build-time='<%= buildInfo.time %>'
     env='<%= buildInfo.env %>'
+    themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"},
+            {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'
+    html-overrides="global-override"
 ><dbp-loading-spinner></dbp-loading-spinner></<%= name %>>
 
+
+<template id="global-override">
+    <template id="<%= name %>">
+        <div slot="name">
+            <style>
+
+                .logo-dark, .light-theme .logo-dark, .dark-theme .logo-light{
+                    display: none;
+                }
+
+                .logo-light, .light-theme .logo-light, .dark-theme .logo-dark{
+                    display: block;
+                }
+            </style>
+            <img class="logo-light" style="height: 100px" src="<%= getPrivateUrl('dbp_logo_on_white.svg') %>" alt="Digital Blueprint - A University toolbox logo">
+            <img class="logo-dark" style="height: 100px" src="<%= getPrivateUrl('dbp_logo_on_black.svg') %>" alt="Digital Blueprint - A University toolbox logo">
+        </div>
+        <div slot="title" style="margin-top:40px;line-height: 23px;">
+            <span style="text-transform: lowercase;letter-spacing: 3px"><span style="font-weight: bold">toolkit</span> <br><span style="margin-left: 136px;font-size: 0.8em;">showcase</span></span>
+        </div>
+        <div slot="logo">
+            <div>
+            </div>
+        </div>
+    </template>
+</template>
+
 <!-- Error handling for too old browsers -->
 <script src="<%= getPrivateUrl('browser-check.js') %>" defer></script>
 <noscript>Diese Applikation benötigt Javascript / This application requires Javascript</noscript>