examples/cdn/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Jupyter UI toolkit using CDN</title>
    <script type="module" src="https://unpkg.com/@jupyter/web-components/dist/toolkit.min.js"></script>
    <style>
        /*
            Minimal set of CSS properties from a JupyterLab theme
            used to theme the toolkit.
        */
        :root {
            --jp-brand-color1: #f2c812;
            --jp-layout-color1: #808080;
            --jp-border-width: 1px;
            --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>

<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">
        // 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>

</html>