diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json
index 394555a6..5f3144db 100644
--- a/packages/graph-editor/package.json
+++ b/packages/graph-editor/package.json
@@ -58,9 +58,9 @@
"@tokens-studio/graph-engine": "*",
"@tokens-studio/graph-engine-migration": "*",
"@tokens-studio/icons": "^0.1.4",
- "@tokens-studio/tokens": "^0.3.9",
+ "@tokens-studio/tokens": "^0.3.11",
"@tokens-studio/types": "^0.5.1",
- "@tokens-studio/ui": "^3.0.1",
+ "@tokens-studio/ui": "^3.0.4",
"@xzdarcy/react-timeline-editor": "^0.1.9",
"array-move": "^4.0.0",
"clsx": "^2.1.1",
diff --git a/packages/nodes-design-tokens/package.json b/packages/nodes-design-tokens/package.json
index 876d846f..49b40a24 100644
--- a/packages/nodes-design-tokens/package.json
+++ b/packages/nodes-design-tokens/package.json
@@ -38,7 +38,7 @@
"dependencies": {
"@adobe/leonardo-contrast-colors": "^1.0.0",
"@tokens-studio/types": "^0.5.1",
- "@tokens-studio/ui": "^3.0.1",
+ "@tokens-studio/ui": "^3.0.4",
"colorjs.io": "^0.5.2",
"dot-prop": "^8.0.2",
"lodash.orderby": "^4.6.0",
diff --git a/packages/nodes-figma/package.json b/packages/nodes-figma/package.json
index 8babc8d1..ce7f1309 100644
--- a/packages/nodes-figma/package.json
+++ b/packages/nodes-figma/package.json
@@ -37,7 +37,7 @@
},
"dependencies": {
"@tokens-studio/types": "^0.5.1",
- "@tokens-studio/ui": "^3.0.1",
+ "@tokens-studio/ui": "^3.0.4",
"dot-prop": "^8.0.2"
},
"peerDependencies": {
diff --git a/packages/nodes-fs/package.json b/packages/nodes-fs/package.json
index fb877f3e..1b633d58 100644
--- a/packages/nodes-fs/package.json
+++ b/packages/nodes-fs/package.json
@@ -31,7 +31,7 @@
"test": "vitest run"
},
"dependencies": {
- "@tokens-studio/ui": "^3.0.1",
+ "@tokens-studio/ui": "^3.0.4",
"mobx-react-lite": "^4.0.5"
},
"peerDependencies": {
diff --git a/packages/nodes-previews/package.json b/packages/nodes-previews/package.json
index 8e28f447..62149299 100644
--- a/packages/nodes-previews/package.json
+++ b/packages/nodes-previews/package.json
@@ -38,7 +38,7 @@
"@tokens-studio/graph-engine": "*",
"@tokens-studio/graph-engine-nodes-design-tokens": "*",
"@tokens-studio/icons": "^0.1.4",
- "@tokens-studio/ui": "^3.0.1",
+ "@tokens-studio/ui": "^3.0.4",
"colorjs.io": "^0.5.2",
"react": "^18.2.0"
},
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ce8b5028..d8ef25eb 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -46,8 +46,8 @@
"@tokens-studio/graph-engine-nodes-image": "*",
"@tokens-studio/graph-engine-nodes-preview": "*",
"@tokens-studio/icons": "^0.1.4",
- "@tokens-studio/tokens": "^0.3.9",
- "@tokens-studio/ui": "^3.0.1",
+ "@tokens-studio/tokens": "^0.3.11",
+ "@tokens-studio/ui": "^3.0.4",
"@ts-rest/core": "^3.51.0",
"@ts-rest/open-api": "^3.51.0",
"@ts-rest/react-query": "^3.51.0",
diff --git a/packages/ui/src/app/layout.tsx b/packages/ui/src/app/layout.tsx
index 208578d4..ee1e363f 100644
--- a/packages/ui/src/app/layout.tsx
+++ b/packages/ui/src/app/layout.tsx
@@ -92,7 +92,7 @@ export default function RootLayout({
}) {
return (
-
+
{children}
diff --git a/packages/ui/src/components/rail.tsx b/packages/ui/src/components/rail.tsx
index 1a89393a..a8be7ef7 100644
--- a/packages/ui/src/components/rail.tsx
+++ b/packages/ui/src/components/rail.tsx
@@ -50,11 +50,11 @@ const RailItem = ({ icon, label, link }: RailItem) => {
};
const ThemeToggle = () => {
- const [isDark, setIsDark] = useState(false);
+ const [isDark, setIsDark] = useState(true);
useEffect(() => {
// Check initial theme on mount
- const isDarkMode = document.body.classList.contains('ts-theme-dark');
+ const isDarkMode = document.body.getAttribute('data-theme') === 'dark';
setIsDark(isDarkMode);
}, []);
@@ -62,14 +62,11 @@ const ThemeToggle = () => {
const newIsDark = !isDark;
setIsDark(newIsDark);
- document.body.classList.remove(
- newIsDark ? 'ts-theme-light' : 'ts-theme-dark'
- );
- document.body.classList.add(newIsDark ? 'ts-theme-dark' : 'ts-theme-light');
+ document.body.setAttribute('data-theme', newIsDark ? 'dark' : 'light');
};
return (
-
+