feat(themes,clerk-js): Add support for dark mode theming

.changeset/busy-impalas-wink.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/themes': minor
+'@clerk/types': minor
+---
+
+TODO

packages/clerk-js/bundlewatch.config.json

@@ -6,7 +6,7 @@
     { "path": "./dist/clerk.headless*.js", "maxSize": "55.2KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "113KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "118KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
+    { "path": "./dist/vendors*.js", "maxSize": "40.6KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/customizables/AppearanceContext.tsx

@@ -1,4 +1,7 @@
 import { createContextAndHook, useDeepEqualMemo } from '@clerk/shared/react';
+import type { BaseTheme, BaseThemeTaggedType } from '@clerk/types';
+// eslint-disable-next-line no-restricted-imports
+import { css, Global } from '@emotion/react';
 import React from 'react';
 
 import type { AppearanceCascade, ParsedAppearance } from './parseAppearance';
@@ -17,7 +20,34 @@ const AppearanceProvider = (props: AppearanceProviderProps) => {
     return { value };
   }, [props.appearance, props.globalAppearance]);
 
-  return <AppearanceContext.Provider value={ctxValue}>{props.children}</AppearanceContext.Provider>;
+  // Extract global CSS from theme if it exists
+  const getGlobalCss = (theme: BaseTheme | BaseTheme[] | undefined) => {
+    if (
+      typeof theme === 'object' &&
+      !Array.isArray(theme) &&
+      '__type' in theme &&
+      theme.__type === 'prebuilt_appearance'
+    ) {
+      // Cast to the specific type that includes __internal_globalCss
+      return (theme as BaseThemeTaggedType & { __internal_globalCss?: string }).__internal_globalCss;
+    }
+    return null;
+  };
+
+  const globalCss = getGlobalCss(props.appearance?.theme) || getGlobalCss(props.globalAppearance?.theme);
+
+  return (
+    <AppearanceContext.Provider value={ctxValue}>
+      {globalCss && (
+        <Global
+          styles={css`
+            ${globalCss}
+          `}
+        />
+      )}
+      {props.children}
+    </AppearanceContext.Provider>
+  );
 };
 
 export { AppearanceProvider, useAppearance };

packages/themes/package.json

@@ -45,14 +45,17 @@
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
     "lint": "eslint src",
-    "lint:attw": "attw --pack . --exclude-entrypoints shadcn.css --profile node16"
+    "lint:attw": "attw --pack . --exclude-entrypoints shadcn.css --profile node16",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@clerk/types": "workspace:^",
     "tslib": "catalog:repo"
   },
   "devDependencies": {
-    "tsup": "catalog:repo"
+    "tsup": "catalog:repo",
+    "vitest": "catalog:repo"
   },
   "engines": {
     "node": ">=18.17.0"