Try to read Jupyter CSS properties even if body attribute is not set. (#71)

fcollonval · web-flow · commit 3efa9f431cb3 · 2023-09-11T17:28:00.000+02:00
* Try to read Jupyter CSS properties even if body attribute is not set.

* Simplify the story about theme mode from CDN
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,8 @@ jupyter_ui_demo/labextension
 # Version file is handled by hatchling
 jupyter_ui_demo/_version.py
 
+examples/cdn/toolkit.min.js
+
 # Created by https://www.gitignore.io/api/python
 # Edit at https://www.gitignore.io/?templates=python
 
diff --git a/README.md b/README.md
@@ -86,6 +86,8 @@ A pre-bundled script that contains all APIs needed to use Jupyter UI Toolkit is
 
 The above CDN location points to the latest release of `@jupyter/web-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
 
+See the [example](./examples/cdn/index.html) folder for more hints about theming.
+
 ## Documentation
 
 Further documentation can be found in the following places:
diff --git a/examples/cdn/index.html b/examples/cdn/index.html
@@ -17,23 +17,52 @@
             --jp-ui-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             --jp-ui-font-size1: 13px;
         }
+
+        body {
+            background-color: var(--neutral-layer-1);
+        }
+
+        #theme-mode>span {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            background-image: url('https://unpkg.com/@mdi/svg/svg/brightness-6.svg');
+            background-color: var(--neutral-foreground-rest);
+            mix-blend-mode: difference;
+        }
     </style>
 </head>
-<!-- 
-    The toolkit supports theming from JupyterLab theme
-    For that you need to set `data-jp-theme-name` with a theme _name_
-    and `data-jp-theme-light` with `true` (ligth theme) or `false` (dark theme)
--->
-
-<body data-jp-theme-name="default" data-jp-theme-light="true">
 
+<body data-theme-mode="dark">
     <jp-button appearance="accent" onclick="alert('Accent button pressed')">Click me!</jp-button>
     <jp-button onclick="alert('Neutral button pressed')">Click me!</jp-button>
+    <jp-button id="theme-mode">
+        <span></span>
+    </jp-button>
 
     <script type="module">
-        // Inject JupyterLab theme listener
-        import { addJupyterLabThemeChangeListener } from 'https://unpkg.com/@jupyter/web-components/dist/toolkit.min.js';
-        addJupyterLabThemeChangeListener();
+        // Apply JupyterLab theme
+        import { applyJupyterTheme } from 'https://unpkg.com/@jupyter/web-components/dist/toolkit.min.js';
+
+        function switchThemeMode(th) {
+            const mode = document.body.getAttribute('data-theme-mode');
+            document.body.setAttribute(
+                'data-theme-mode',
+                mode == 'light' ? 'dark' : 'light'
+            );
+            document.body.style.removeProperty('--jp-layout-color1');
+            document.body.style.setProperty(
+                '--jp-layout-color1',
+                // Apparent opposite condition as we don't update the mode variable
+                mode == 'dark' ? '#808080' : 'black'
+            );
+            applyJupyterTheme();
+        }
+        switchThemeMode();
+
+        document.querySelector('#theme-mode').addEventListener('click', () => {
+            switchThemeMode();
+        });
     </script>
 </body>
 
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -1,7 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export { addJupyterLabThemeChangeListener } from './utilities/theme/applyTheme';
+export {
+  addJupyterLabThemeChangeListener,
+  applyJupyterTheme
+} from './utilities/theme/applyTheme';
 
 export * from './color';
 export * from './design-tokens';
diff --git a/packages/components/src/utilities/theme/applyTheme.ts b/packages/components/src/utilities/theme/applyTheme.ts
@@ -7,6 +7,7 @@ import {
   parseColor,
   rgbToHSL
 } from '@microsoft/fast-colors';
+import { isDark } from '@microsoft/fast-components';
 import { DesignToken } from '@microsoft/fast-foundation';
 import {
   Palette,
@@ -28,6 +29,8 @@ import {
 
 const THEME_NAME_BODY_ATTRIBUTE = 'data-jp-theme-name';
 const THEME_MODE_BODY_ATTRIBUTE = 'data-jp-theme-light';
+// Use to determine the neutral color and possibly if theme is dark
+const BASE_LAYOUT_COLOR = '--jp-layout-color1';
 
 /**
  * Flag to initialized only one listener
@@ -48,7 +51,7 @@ export function addJupyterLabThemeChangeListener(): void {
 function initThemeChangeListener(): void {
   const addObserver = () => {
     const observer = new MutationObserver(() => {
-      applyCurrentTheme();
+      applyJupyterTheme();
     });
     observer.observe(document.body, {
       attributes: true,
@@ -57,7 +60,7 @@ function initThemeChangeListener(): void {
       characterData: false
     });
 
-    applyCurrentTheme();
+    applyJupyterTheme();
   };
 
   if (document.readyState === 'complete') {
@@ -115,7 +118,7 @@ const tokenMappings: { [key: string]: IConverter<any> } = {
     converter: intConverter,
     token: controlCornerRadius
   },
-  '--jp-layout-color1': {
+  [BASE_LAYOUT_COLOR]: {
     converter: (value: string, isDark: boolean): Palette<Swatch> | null => {
       const parsedColor = parseColor(value);
       if (parsedColor) {
@@ -173,22 +176,37 @@ const tokenMappings: { [key: string]: IConverter<any> } = {
 /**
  * Applies the current Jupyter theme to the toolkit components.
  */
-function applyCurrentTheme() {
-  if (!document.body.getAttribute(THEME_NAME_BODY_ATTRIBUTE)) {
-    return;
-  }
-
+export function applyJupyterTheme(): void {
   // Get all the styles applied to the <body> tag in the webview HTML
   // Importantly this includes all the CSS variables associated with the
   // current Jupyter theme
   const styles = getComputedStyle(document.body);
 
   // Set mode
-  const isDark =
-    document.body.getAttribute(THEME_MODE_BODY_ATTRIBUTE) === 'false';
+  //   It will look at the body attribute or try to extrapolate
+  const themeMode = document.body.getAttribute(THEME_MODE_BODY_ATTRIBUTE);
+  let isDark_ = false;
+  if (themeMode) {
+    isDark_ = themeMode === 'false';
+  } else {
+    const layoutColor = styles.getPropertyValue(BASE_LAYOUT_COLOR).toString();
+    if (layoutColor) {
+      const parsedColor = parseColor(layoutColor);
+      if (parsedColor) {
+        isDark_ = isDark(
+          SwatchRGB.create(parsedColor.r, parsedColor.g, parsedColor.b)
+        );
+        console.debug(
+          `Theme is ${
+            isDark_ ? 'dark' : 'light'
+          } based on '${BASE_LAYOUT_COLOR}' value: ${layoutColor}.`
+        );
+      }
+    }
+  }
   baseLayerLuminance.setValueFor(
     document.body,
-    isDark ? StandardLuminance.DarkMode : StandardLuminance.LightMode
+    isDark_ ? StandardLuminance.DarkMode : StandardLuminance.LightMode
   );
 
   for (const jpTokenName in tokenMappings) {
@@ -198,7 +216,7 @@ function applyCurrentTheme() {
     if (document.body && value !== '') {
       const parsedValue = (toolkitTokenName.converter ?? ((v: string) => v))(
         value.trim(),
-        isDark
+        isDark_
       );
       if (parsedValue !== null) {
         toolkitTokenName.token.setValueFor(document.body, parsedValue);
