feat: dark theme

Author: serafimcloud

apps/vscode-extension/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 21st.dev Extension
 
+## 0.5.6
+
+### Patch Changes
+
+- Added dark theme support for VS Code Extension
+- Enhanced integration with system theme preferences
+- Improved visual accessibility in low-light environments
+
 ## 0.5.1
 
 ### Patch Changes

examples/react-example/src/App.tsx

@@ -1,26 +1,102 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
 import './App.css';
+import { TwentyFirstToolbar } from '@21st-extension/toolbar-react';
 
 function App() {
   const [count, setCount] = useState(0);
+  const [isDark, setIsDark] = useState(false);
 
   const handleRuntimeError = () => {
     throw new Error('This is a runtime error for testing purposes');
   };
 
+  const toggleTheme = () => {
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      setIsDark(false);
+    } else {
+      document.documentElement.classList.add('dark');
+      setIsDark(true);
+    }
+  };
+
+  const getCSSVariable = (varName: string) => {
+    const anchor = document.querySelector('stagewise-companion-anchor');
+    if (anchor) {
+      return getComputedStyle(anchor).getPropertyValue(varName).trim();
+    }
+    return 'not found';
+  };
+
+  const [cssVars, setCssVars] = useState<{ [key: string]: string }>({});
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCssVars({
+        background: getCSSVariable('--background'),
+        foreground: getCSSVariable('--foreground'),
+        border: getCSSVariable('--border'),
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <>
+      <TwentyFirstToolbar />
       <div>
-        <a href="https://vite.dev" target="_blank">
+        <a href="https://vitejs.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
         <a href="https://react.dev" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
       <h1>Vite + React</h1>
+
+      {/* Theme Debug Info */}
+      <div
+        style={{
+          border: '1px solid #ccc',
+          padding: '10px',
+          margin: '20px 0',
+          backgroundColor: '#f9f9f9',
+        }}
+      >
+        <h3>Theme Debug Info:</h3>
+        <p>Current theme: {isDark ? 'Dark' : 'Light'}</p>
+        <p>HTML classes: {document.documentElement.className || 'none'}</p>
+        <p>
+          Toolbar element exists:{' '}
+          {document.querySelector('stagewise-companion-anchor') ? 'Yes' : 'No'}
+        </p>
+
+        <h4>CSS Variables:</h4>
+        <ul>
+          <li>--background: {cssVars.background || 'loading...'}</li>
+          <li>--foreground: {cssVars.foreground || 'loading...'}</li>
+          <li>--border: {cssVars.border || 'loading...'}</li>
+        </ul>
+
+        <button
+          type="button"
+          onClick={toggleTheme}
+          style={{
+            padding: '8px 16px',
+            backgroundColor: isDark ? '#333' : '#fff',
+            color: isDark ? '#fff' : '#333',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Toggle Theme (Current: {isDark ? 'Dark' : 'Light'})
+        </button>
+      </div>
+
       <div className="card">
         <button type="button" onClick={() => setCount((count) => count + 1)}>
           count is {count}

packages/create-stagewise-plugin/CHANGELOG.md

@@ -1,5 +1,13 @@
 # create-21st-plugin
 
+## 0.5.6
+
+### Patch Changes
+
+- Updated plugin templates with dark theme support
+- Enhanced scaffold templates for better dark theme integration
+- Added examples for theme-aware plugin development
+
 ## 0.5.1
 
 ### Patch Changes

packages/extension-toolbar-srpc-contract/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @21st-extension/extension-toolbar-srpc-contract
 
+## 0.5.6
+
+### Patch Changes
+
+- Enhanced SRPC contract to support dark theme communication
+- Updated type definitions for theme-related properties
+- Updated dependencies
+  - @21st-extension/srpc@0.5.6
+
 ## 0.5.1
 
 ### Patch Changes

packages/srpc/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @21st-extension/srpc
 
+## 0.5.6
+
+### Patch Changes
+
+- Enhanced communication protocols to support dark theme preferences
+- Updated serialization to handle theme-related data
+
 ## 0.5.1
 
 ### Patch Changes

packages/srpc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@21st-extension/srpc",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "AGPL-3.0-only",
   "type": "module",
   "private": false,

packages/typescript-config/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @21st-extension/typescript-config
 
+## 0.5.6
+
+### Patch Changes
+
+- Enhanced TypeScript configurations for dark theme support
+- Updated build configurations for theme-aware development
+- Improved type safety for theme-related features
+
 ## 0.5.1
 
 ### Patch Changes

packages/ui/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @21st-extension/ui
 
+## 0.5.6
+
+### Patch Changes
+
+- Added dark theme support for UI components
+- Enhanced component styling for both light and dark themes
+- Improved accessibility with better contrast ratios
+
 ## 0.5.1
 
 ### Patch Changes

plugins/angular/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @21st-extension/angular
 
+## 0.5.6
+
+### Patch Changes
+
+- Added dark theme support for Angular plugin integration
+- Enhanced visual consistency with 21st.dev Toolbar dark theme
+- Updated dependencies
+  - @21st-extension/toolbar@0.5.6
+
 ## 0.5.1
 
 ### Patch Changes

plugins/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@21st-extension/angular",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "type": "module",
   "keywords": [
     "21st-extension",