feat: add theme support

apps/contrast-plugin/public/manifest.json

@@ -7,4 +7,3 @@
       "selection:read"
     ]
   }
-

apps/contrast-plugin/src/app/app.element.css

@@ -1,5 +1,11 @@
 .wrapper {
-  color: var(--app-white);
+  &[data-theme='dark'] {
+    color: var(--app-white);
+  }
+
+  &[data-theme='light'] {
+    color: var(--app-black);
+  }
 }
 
 .color {
@@ -92,4 +98,4 @@
   border-left: var(--spacing-12) solid transparent;
   border-right: var(--spacing-12) solid transparent;
   border-bottom: var(--spacing-24) solid transparent;
-}
+}

apps/contrast-plugin/src/app/app.element.ts

@@ -8,22 +8,27 @@ export class AppElement extends HTMLElement {
     const luminosityFirstColor = this.getLuminosity(firstColor);
     const luminositySecondColor = this.getLuminosity(secondColor);
 
-    const result = (luminosityFirstColor + 0.05) / (luminositySecondColor + 0.05);
+    const result =
+      (luminosityFirstColor + 0.05) / (luminositySecondColor + 0.05);
     this.setColors(firstColor, secondColor);
     this.setResult(result.toFixed(2).toString());
     this.setA11yTags(result);
   }
 
   getLuminosity(color: string) {
     const rgb = this.hexToRgb(color);
-      return 0.2126 * (rgb[0]/255) + 0.7152 * (rgb[1]/255) + 0.0722 * (rgb[2]/255);
+    return (
+      0.2126 * (rgb[0] / 255) +
+      0.7152 * (rgb[1] / 255) +
+      0.0722 * (rgb[2] / 255)
+    );
   }
 
   hexToRgb(hex: string) {
-      const r = parseInt(hex.slice(1, 3), 16)
-      const g = parseInt(hex.slice(3, 5), 16)
-      const b = parseInt(hex.slice(5, 7), 16)
-      return [ r, g, b ];
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return [r, g, b];
   }
 
   setResult(text: string) {
@@ -56,13 +61,24 @@ export class AppElement extends HTMLElement {
       code2.innerText = secondColor ? secondColor : '';
     }
 
-    if (contrastPreview && smallText && largeText && circle && square && triangle) {
-      contrastPreview.style.background = secondColor ? secondColor : 'transparent';
+    if (
+      contrastPreview &&
+      smallText &&
+      largeText &&
+      circle &&
+      square &&
+      triangle
+    ) {
+      contrastPreview.style.background = secondColor
+        ? secondColor
+        : 'transparent';
       smallText.style.color = firstColor ? firstColor : 'transparent';
       largeText.style.color = firstColor ? firstColor : 'transparent';
       circle.style.background = firstColor ? firstColor : 'transparent';
       square.style.background = firstColor ? firstColor : 'transparent';
-      triangle.style.borderBottom = firstColor ? `var(--spacing-24) solid ${firstColor}` : 'var(--spacing-24) solid transparent';
+      triangle.style.borderBottom = firstColor
+        ? `var(--spacing-24) solid ${firstColor}`
+        : 'var(--spacing-24) solid transparent';
     }
 
     const emptyPreview = document.getElementById('empty-preview');
@@ -75,45 +91,45 @@ export class AppElement extends HTMLElement {
 
   setA11yTags(result: number) {
     const selectors = {
-        aa: document.getElementById('aa'),
-        aaa: document.getElementById('aaa'),
-        aaLg: document.getElementById('aa-lg'),
-        aaaLg: document.getElementById('aaa-lg'),
-        graphics: document.getElementById('graphics')
+      aa: document.getElementById('aa'),
+      aaa: document.getElementById('aaa'),
+      aaLg: document.getElementById('aa-lg'),
+      aaaLg: document.getElementById('aaa-lg'),
+      graphics: document.getElementById('graphics'),
     };
     const fail = 'tag fail';
     const good = 'tag good';
 
     function setClass(selector: HTMLElement | null, className: string) {
-        if (selector) {
-            selector.className = className;
-        }
+      if (selector) {
+        selector.className = className;
+      }
     }
 
     if (result > 7) {
-        setClass(selectors.aa, good);
-        setClass(selectors.aaa, good);
-        setClass(selectors.aaLg, good);
-        setClass(selectors.aaaLg, good);
-        setClass(selectors.graphics, good);
+      setClass(selectors.aa, good);
+      setClass(selectors.aaa, good);
+      setClass(selectors.aaLg, good);
+      setClass(selectors.aaaLg, good);
+      setClass(selectors.graphics, good);
     } else if (result > 4.5) {
-        setClass(selectors.aa, good);
-        setClass(selectors.aaa, fail);
-        setClass(selectors.aaLg, good);
-        setClass(selectors.aaaLg, good);
-        setClass(selectors.graphics, good);
+      setClass(selectors.aa, good);
+      setClass(selectors.aaa, fail);
+      setClass(selectors.aaLg, good);
+      setClass(selectors.aaaLg, good);
+      setClass(selectors.graphics, good);
     } else if (result > 3) {
-        setClass(selectors.aa, fail);
-        setClass(selectors.aaa, fail);
-        setClass(selectors.aaLg, good);
-        setClass(selectors.aaaLg, fail);
-        setClass(selectors.graphics, good);
+      setClass(selectors.aa, fail);
+      setClass(selectors.aaa, fail);
+      setClass(selectors.aaLg, good);
+      setClass(selectors.aaaLg, fail);
+      setClass(selectors.graphics, good);
     } else {
-        setClass(selectors.aa, fail);
-        setClass(selectors.aaa, fail);
-        setClass(selectors.aaLg, fail);
-        setClass(selectors.aaaLg, fail);
-        setClass(selectors.graphics, fail);
+      setClass(selectors.aa, fail);
+      setClass(selectors.aaa, fail);
+      setClass(selectors.aaLg, fail);
+      setClass(selectors.aaaLg, fail);
+      setClass(selectors.graphics, fail);
     }
   }
 
@@ -122,18 +138,22 @@ export class AppElement extends HTMLElement {
       if (event.data.type === 'selection') {
         if (event.data.content.length === 2) {
           this.calculateContrast('#d5d1d1', '#000410');
-        } else  {
+        } else {
           this.setColors(null, null);
           this.setResult('0');
           this.setA11yTags(0);
         }
       } else if (event.data.type === 'page') {
         console.log('refrespage', event.data);
       } else if (event.data.type === 'init') {
+        this.setAttribute('data-theme', event.data.content.theme);
+
         if (event.data.content.selection.length === 2) {
           //TODO get real colors from selection
           this.calculateContrast('#d5d1d1', '#000410');
         }
+      } else if (event.data.type === 'theme') {
+        this.setAttribute('data-theme', event.data.content);
       }
     });
 

apps/contrast-plugin/src/plugin.ts

@@ -1,5 +1,4 @@
 penpot.ui.open('Contrast plugin', 'http://localhost:4201', {
-  theme: 'dark',
   width: 450,
   height: 625,
 });
@@ -16,6 +15,7 @@ penpot.ui.onMessage<{ content: string }>((message) => {
         pageId: pageState.id,
         fileId: fileState.id,
         revn: fileState.revn,
+        theme: penpot.getTheme(),
         selection: penpot.getSelection(),
       },
     });
@@ -24,4 +24,8 @@ penpot.ui.onMessage<{ content: string }>((message) => {
 
 penpot.on('selectionchange', (id) => {
   penpot.ui.sendMessage({ type: 'selection', content: id });
-});
+});
+
+penpot.on('themechange', (theme) => {
+  penpot.ui.sendMessage({ type: 'theme', content: theme });
+});

apps/example-plugin/src/app/app.element.ts

@@ -45,11 +45,14 @@ export class AppElement extends HTMLElement {
         this.#revn = event.data.content.revn;
         this.refreshPage(event.data.content.pageId, event.data.content.name);
         this.refreshSelectionId(event.data.content.selection);
+        this.setAttribute('data-theme', event.data.content.theme);
+      } else if (event.data.type === 'theme') {
+        this.setAttribute('data-theme', event.data.content);
       }
     });
 
     this.innerHTML = `
-    <div class="wrapper" data-theme="light">
+    <div class="wrapper">
       <h1>Test area</h1>
 
       <p>Current project name: <span id="project-name">Unknown</span></p>

apps/example-plugin/src/plugin.ts

@@ -1,7 +1,6 @@
 penpot.log('Hello from plugin');
 
 penpot.ui.open('Plugin name', 'http://localhost:4201', {
-  theme: 'light',
   width: 500,
   height: 600,
 });
@@ -27,6 +26,7 @@ penpot.ui.onMessage<{ content: string }>((message) => {
         pageId: pageState.id,
         fileId: fileState.id,
         revn: fileState.revn,
+        theme: penpot.getTheme(),
         selection: penpot.getSelection(),
       },
     });
@@ -57,3 +57,7 @@ penpot.on('filechange', (file) => {
 penpot.on('selectionchange', (id) => {
   penpot.ui.sendMessage({ type: 'selection', content: id });
 });
+
+penpot.on('themechange', (theme) => {
+  penpot.ui.sendMessage({ type: 'theme', content: theme });
+});

apps/example-styles/src/app/app.element.css

@@ -1,5 +1,5 @@
-
-html, body {
+html,
+body {
   background: var(--app-black);
   color: var(--app-white);
   margin: 0 var(--spacing-20);
@@ -23,12 +23,12 @@ section {
   margin-block-end: var(--spacing-20);
   padding: var(--spacing-32);
 
-  &[data-theme="dark"] {
-      border: 1px solid var(--db-quaternary);
+  &[data-theme='dark'] {
+    border: 1px solid var(--db-quaternary);
   }
 
-  &[data-theme="light"] {
-      border: 1px solid var(--lb-quaternary);
+  &[data-theme='light'] {
+    border: 1px solid var(--lb-quaternary);
   }
 }
 
@@ -58,7 +58,7 @@ section {
 
 .color-preview {
   block-size: var(--spacing-36);
-  border: 1px solid #8F9DA3;
+  border: 1px solid #8f9da3;
   border-radius: var(--spacing-4);
   display: block;
   inline-size: var(--spacing-36);
@@ -87,12 +87,12 @@ section {
   gap: var(--spacing-20);
 
   &:not(:last-child) {
-      margin-block-end: var(--spacing-20);
+    margin-block-end: var(--spacing-20);
   }
 }
 
 /* ICON */
 .icons-section {
   display: flex;
   gap: var(--spacing-8);
-}
+}

docs/plugin-usage.md

@@ -19,6 +19,9 @@ penpot.ui.getPageState();
 
 // selection id
 penpot.ui.getSelection();
+
+// current theme (dark/light)
+penpot.ui.getTheme();
 ```
 
 ### Messages
@@ -53,7 +56,7 @@ window.addEventListener('message', function (event) {
 
 ### Events
 
-Current events `pagechange`, `filechange` and `selectionchange`.
+Current events `pagechange`, `filechange`,`selectionchange` and `themechange`.
 
 ```ts
 const event = (page) => {

libs/plugins-runtime/src/index.ts

@@ -2,7 +2,7 @@ import 'ses';
 import './lib/plugin-modal';
 
 import { ɵloadPlugin } from './lib/load-plugin';
-import { setFileState, setPageState, setSelection } from './lib/api';
+import { setFileState, setPageState, setSelection, setTheme } from './lib/api';
 import { getSelectedUuids } from 'plugins-parser';
 
 repairIntrinsics({
@@ -38,4 +38,12 @@ export function initialize(api: any) {
 
     setSelection(selectionData);
   });
+
+  api.addListener('plugin-theme', 'theme', (theme: 'light' | 'default') => {
+    console.log('Theme change:', theme);
+
+    const newTheme: Theme = theme === 'default' ? 'dark' : theme;
+
+    setTheme(newTheme);
+  });
 }