Add the theme switcher demo activity to toolkit showcase

toolkit-showcase/README.md

@@ -18,7 +18,7 @@ You can then open <http://127.0.0.1:8001/>.
 
 1) Add demo activity path to `input` list of `rollup.config.js`
 2) Create `assets/*.metadata.json` file like `assets/file-handling.metadata.json`
-3) Reference in `assets/*.metadata.json` file in the `activities` part of `assets/dbp-toolkit-demo.topic.metadata.json.ejs`
+3) Reference in `assets/*.metadata.json` file in the `activities` part of `assets/dbp-toolkit-showcase.topic.metadata.json.ejs`
 
 ## Importing demo activities
 - imported demo activity has to be a `export class`

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

@@ -53,6 +53,56 @@
             --dbp-override-warning-text-color: black;
             --dbp-override-success-bg-color: #259207;
         }
+
+        .light-theme{
+            --dbp-override-base: white;
+            --dbp-override-base-inverted: black;
+            --dbp-override-text: black;
+            --dbp-override-text-inverted: white;
+            --dbp-override-text-muted: #767676;
+            --dbp-override-accent: #c24f68;
+            --dbp-override-primary-base: #2a4491;
+            --dbp-override-primary-text: white;
+            --dbp-override-primary-border: 1px solid #2a4491;
+            --dbp-override-secondary-base: white;
+            --dbp-override-secondary-text: black;
+            --dbp-override-secondary-border: 1px solid black;
+            --dbp-override-info: #2a4491;
+            --dbp-override-success: #188018;
+            --dbp-override-warning-as-text: #c15500;
+            --dbp-override-warning: #f99a41;
+            --dbp-override-danger: #de3535;
+            --dbp-override-border: 1px solid black;
+            --dbp-override-border-radius: 0px;
+            --dbp-override-hover-base: black;
+            --dbp-override-hover-text: white;
+
+        }
+
+        .dark-theme{
+            --dbp-override-base: #151515;
+            --dbp-override-base-inverted: white;
+            --dbp-override-text: white;
+            --dbp-override-text-inverted: #151515;
+            --dbp-override-text-muted: #666666;
+            --dbp-override-accent: #c24f68;
+            --dbp-override-primary-base: #8ca4eb;
+            --dbp-override-primary-text: #151515;
+            --dbp-override-primary-border: 1px solid #8ca4eb;
+            --dbp-override-secondary-base: #151515;
+            --dbp-override-secondary-text: white;
+            --dbp-override-secondary-border: 1px solid white;
+            --dbp-override-info: #8ca4eb;
+            --dbp-override-success: #7acc79;
+            --dbp-override-warning-as-text: #f99a41;
+            --dbp-override-warning: #f99a41;
+            --dbp-override-danger: #de3535;
+            --dbp-override-border: 1px solid white;
+            --dbp-override-border-radius: 0px;
+            --dbp-override-hover-base: white;
+            --dbp-override-hover-text: #151515;
+
+        }
     </style>
 
     <!-- Preloading/Preconnecting -->

toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs

@@ -26,7 +26,8 @@
     {"path": "matomo.metadata.json"},
     {"path": "person-profile.metadata.json"},
     {"path": "file-handling.metadata.json"},
-    {"path": "tooltip.metadata.json"}
+    {"path": "tooltip.metadata.json"},
+    {"path": "theme-switcher.metadata.json"}
   ],
   "attributes": []
 }
\ No newline at end of file

toolkit-showcase/src/dbp-demo-template.js

@@ -2,6 +2,7 @@ import {css, html} from 'lit';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 //import {ClassName} from '@dbp-toolkit/package-name/src/dbp-demo-activity-name'; TODO
 import * as commonStyles from '@dbp-toolkit/common/styles';
+import * as commonUtils from "@dbp-toolkit/common/utils";
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 // import readme from '@dbp-toolkit/class-name/README.md'; TODO
 import * as demoStyles from "./styles";
@@ -59,7 +60,7 @@ export class DbpActivityNameDemoActivity extends ScopedElementsMixin(AdapterLitE
         return html`
              <!--
                 TODO
-                ${unsafeHTML('readme')}
+                ${unsafeHTML(readme)}
                 <dbp-class-name-demo id="demo" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-class-name-demo>
             -->
         `;

toolkit-showcase/src/dbp-theme-switcher-demo-activity.js

+import {css, html} from 'lit';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {ThemeSwitcherDemo} from '@dbp-toolkit/theme-switcher/src/demo';
+import * as commonStyles from '@dbp-toolkit/common/styles';
+import * as commonUtils from "@dbp-toolkit/common/utils";
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import readme from '@dbp-toolkit/theme-switcher/README.md';
+import * as demoStyles from "./styles";
+import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
+
+export class DbpThemeSwitcherDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
+    constructor() {
+        super();
+        this.lang = 'en';
+    }
+
+    static get scopedElements() {
+        return {
+            'dbp-theme-switcher-demo': ThemeSwitcherDemo,
+        };
+    }
+
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String }
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    static get styles() {
+        // language=css
+        return [
+            commonStyles.getThemeCSS(),
+            commonStyles.getGeneralCSS(),
+            demoStyles.getDemoCSS(),
+            css`
+            h1.title {margin-bottom: 1em;}
+            div.container {margin-bottom: 1.5em;}
+
+            #demo{
+                display: block;
+                padding-top: 50px;
+            }
+            
+            `
+        ];
+    }
+
+    render() {
+        return html`
+                ${unsafeHTML(readme)}
+                <dbp-theme-switcher-demo id="demo" lang="${this.lang}"></dbp-theme-switcher-demo>
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('dbp-theme-switcher-demo-activity', DbpThemeSwitcherDemoActivity);