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')
+ },
  });
 }