From b7e3a25b2b5e7132c71e175a20cc5d47d75e09f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Collonval?= <fcollonval@gmail.com>
Date: Tue, 12 Sep 2023 09:10:50 +0200
Subject: [PATCH] Improve CDN example

---
 examples/cdn/index.html                      | 29 ++++++++++----------
 packages/components/docs/getting-started.mdx |  2 +-
 2 files changed, 16 insertions(+), 15 deletions(-)
diff --git a/examples/cdn/index.html b/examples/cdn/index.html
index 3d2693de..58f28054 100644
--- a/examples/cdn/index.html
+++ b/examples/cdn/index.html
@@ -21,29 +21,31 @@
         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>
 
-<body data-theme-mode="dark">
+<body data-theme-mode="light">
     <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>
+    <jp-button id="theme-mode"></jp-button>
 
     <script type="module">
         // Apply JupyterLab theme
         import { applyJupyterTheme } from 'https://unpkg.com/@jupyter/web-components/dist/toolkit.min.js';
 
+        // Inject icon in theme mode button
+        fetch('https://unpkg.com/@mdi/svg@7.2.96/svg/brightness-6.svg')
+            .then(
+                r => r.text()
+            )
+            .then(
+                brightness6 => {
+                    document.querySelector('#theme-mode').insertAdjacentHTML('afterbegin', brightness6)
+                }
+            );
+
+        applyJupyterTheme();
+
         function switchThemeMode(th) {
             const mode = document.body.getAttribute('data-theme-mode');
             document.body.setAttribute(
@@ -58,7 +60,6 @@
             );
             applyJupyterTheme();
         }
-        switchThemeMode();
 
         document.querySelector('#theme-mode').addEventListener('click', () => {
             switchThemeMode();
diff --git a/packages/components/docs/getting-started.mdx b/packages/components/docs/getting-started.mdx
index 5b050410..3d6232b2 100644
--- a/packages/components/docs/getting-started.mdx
+++ b/packages/components/docs/getting-started.mdx
@@ -32,7 +32,7 @@ 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.
 
-> A [example](https://raw.githubusercontent.com/jupyterlab-contrib/jupyter-ui-toolkit/main/examples/cdn) is available in the project repository.
+> A [example](https://raw.githubusercontent.com/jupyterlab-contrib/jupyter-ui-toolkit/main/examples/cdn/index.html) is available in the project repository.
 
 ## NPM package
 
