added theme class to <html> in root layout;

added --lx- prefix to color vars in tw plugin
hanzoai · Jan 24, 2024 · 619c9c3 · 619c9c3
1 parent 630c157
commit 619c9c3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/packages/ui/next/root-layout.tsx b/packages/ui/next/root-layout.tsx
@@ -33,7 +33,7 @@ const RootLayout: React.FC<
   conf,
   children,
 }) =>  (
-  <html lang='en' suppressHydrationWarning className='dark'>
+  <html lang='en' suppressHydrationWarning className='lux-dark-theme'>
     <head >
       <base target='_blank' />
     </head>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@luxdefi/ui",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "Library that contains shared UI primitives, styles, and core types",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

diff --git a/packages/ui/tailwind/typo-plugin/get-plugin-styles.js b/packages/ui/tailwind/typo-plugin/get-plugin-styles.js
@@ -7,24 +7,24 @@ import {
 const typographyColorTheme = {
     // vars are defined in global.css
     // and dark mode is handled at that level.
-  '--tw-prose-body': "var(--fg-body)",
-  '--tw-prose-headings': "var(--fg-0)",
-  '--tw-prose-links': "var(--fg-0)",
-  '--tw-prose-links-hover': "var(--fg-2)",
-  '--tw-prose-bold': "var(--fg-0)",
-  '--tw-prose-counters': "var(--fg-4)",
-  '--tw-prose-bullets': "var(--fg-2)",
-  '--tw-prose-hr': "var(--fg-2)",
-  '--tw-prose-quotes': "var(--fg-body)",
-  '--tw-prose-quote-borders': "var(--fg-3)",
-  '--tw-prose-captions': "var(--fg-2)",
-  '--tw-prose-kbd': "var(--fg-0)",
-  '--tw-prose-kbd-shadows': "var(--fg-1)",
-  '--tw-prose-code': "var(--fg-0)",
-  '--tw-prose-pre-code': "var(--fg-1)",
-  '--tw-prose-pre-bg': "var(--bg-1)",
-  '--tw-prose-th-borders': "var(--fg-2)",
-  '--tw-prose-td-borders': "var(--fg-3)",
+  '--tw-prose-body': "var(--lx-fg-body)",
+  '--tw-prose-headings': "var(--lx-fg-0)",
+  '--tw-prose-links': "var(--lx-fg-0)",
+  '--tw-prose-links-hover': "var(--lx-fg-2)",
+  '--tw-prose-bold': "var(--lx-fg-0)",
+  '--tw-prose-counters': "var(--lx-fg-4)",
+  '--tw-prose-bullets': "var(--lx-fg-2)",
+  '--tw-prose-hr': "var(--lx-fg-2)",
+  '--tw-prose-quotes': "var(--lx-fg-body)",
+  '--tw-prose-quote-borders': "var(--lx-fg-3)",
+  '--tw-prose-captions': "var(--lx-fg-2)",
+  '--tw-prose-kbd': "var(--lx-fg-0)",
+  '--tw-prose-kbd-shadows': "var(--lx-fg-1)",
+  '--tw-prose-code': "var(--lx-fg-0)",
+  '--tw-prose-pre-code': "var(--lx-fg-1)",
+  '--tw-prose-pre-bg': "var(--lx-bg-1)",
+  '--tw-prose-th-borders': "var(--lx-fg-2)",
+  '--tw-prose-td-borders': "var(--lx-fg-3)",
 }
 
 const defaultCSS = {