feat: add setTheme TIDO method

README.md

@@ -23,6 +23,7 @@ With this project we provide a highly configurable viewer for projects that impl
       - [Image](#image)
       - [Text](#text)
       - [Annotations](#annotations)
+- [Methods](#methods)
 - [Bookmarking](#bookmarking)
 - [Getting Started (Developers)](#getting-started-developers)
   - [Prerequisites](#prerequisites)
@@ -379,6 +380,24 @@ no options
 | types[i].displayWhen    | String                 | `null`       | Text content type that was specified under [Text options](#text). Annotation will only be shown if that content type is currently active.                                                                                    |
 | types[i].annotationType | String                 | `annotation` | Controls the look of the annotation item. Allowed values: `annotation` or `text`. Currently the only difference is that there is no index at type `text`.                                                                     |
 
+## Methods
+
+The instantiated TIDO Object exposes methods to control TIDO's behaviour programmatically.
+Just call them in your outer JavaScript application like this:
+
+```javascript
+const tido = new Tido()
+tido.someMethod()
+```
+
+**Available Methods:**
+
+| Name     | Arguments | Type            | Description                                                                                |
+|----------|-----------|-----------------|--------------------------------------------------------------------------------------------|
+| setTheme | name      | `dark`, `light` | Sets color theme. The attribute `colo-scheme` at the container element will be overridden. |
+
+
+
 ## Bookmarking
 
 TIDO will reflect certain state changes to the URL so you can save and share your current view.

src/main.js

@@ -9,6 +9,9 @@ import './css/style.css';
 import './css/style.scss';
 import { getRGBColor } from '@/utils/color';
 
+import { useToggle } from '@vueuse/core/index';
+import { isDark } from '@/utils/is-dark';
+
 const pinia = createPinia()
 
 function generateId() {
@@ -23,6 +26,7 @@ window.Tido = function Tido(config = {}) {
       return () => h(App);
     },
   });
+
   this.app.provide('config', this.config);
   this.app.use(PrimeVue);
   this.app.use(pinia);
@@ -63,6 +67,16 @@ window.Tido = function Tido(config = {}) {
   const container = this.config?.container || '#app';
 
   this.mount(container);
+
+  this.setTheme = (name) => {
+    if (!name || name !== 'light' && name !== 'dark') return;
+    const toggleDark = useToggle(isDark);
+
+    let darkValue = false;
+    if (name === 'dark') darkValue = true;
+
+    toggleDark(darkValue);
+  }
 };
 
 export default window.Tido;

src/utils/is-dark.js

@@ -8,6 +8,12 @@ function initUseDark(container) {
     attribute: 'color-scheme',
     valueDark: 'dark',
     valueLight: 'light',
+    onChanged(dark) {
+      // Set the attribute update manually to avoid using localStorage, so it will not be polluted.
+      document
+        .querySelector(container)
+        .setAttribute('color-scheme', dark ? 'dark' : 'light')
+    },
   });
 }