diff --git a/packages/ssg/src/lib/config/ssg.ts b/packages/ssg/src/lib/config/ssg.ts
index 8a834bc..600154f 100644
--- a/packages/ssg/src/lib/config/ssg.ts
+++ b/packages/ssg/src/lib/config/ssg.ts
@@ -134,10 +134,11 @@ export function ssgPlugin(): RsbuildPlugin {
         const Critters = _require('critters') as new (opts?: {
           path?: string;
           publicPath?: string;
-          preload?: string;
+          preload?: 'body' | 'media' | 'swap' | 'js' | 'js-lazy' | boolean;
           inlineFonts?: boolean;
           pruneSource?: boolean;
           reduceInlineStyles?: boolean;
+          allowRules?: (string | RegExp)[];
         }) => { process(html: string): Promise<string> };
 
         const configuredAssetPrefix =
@@ -147,10 +148,11 @@ export function ssgPlugin(): RsbuildPlugin {
         const critters = new Critters({
           path: webDistPath,
           publicPath: configuredAssetPrefix,
-          preload: 'media',
+          preload: false,
           inlineFonts: false,
           pruneSource: false,
           reduceInlineStyles: false,
+          allowRules: [/\.dark/],
         });
 
         for (const entryName of entryNames) {
diff --git a/packages/ui/src/lib/theme/constants.ts b/packages/ui/src/lib/theme/constants.ts
index 9a0ae20..84b39cd 100644
--- a/packages/ui/src/lib/theme/constants.ts
+++ b/packages/ui/src/lib/theme/constants.ts
@@ -10,7 +10,7 @@ export const THEME_INIT_SCRIPT = `(function(){try{var k='ermnvldmr/ui/lib/theme'
  * These align with the main palette in styles.css.
  */
 export const THEME_INIT_STYLES = `
-  :root { background-color: #fafafa; color: #262626; }
-  .dark { background-color: #141414; color: #f6f6f6; }
+  :root { --rb-background: #fafafa; --rb-base: #f6f6f6; --rb-text: #262626; background-color: #fafafa; color: #262626; }
+  .dark { --rb-background: #141414; --rb-base: #262626; --rb-text: #f6f6f6; background-color: #141414; color: #f6f6f6; }
   body { margin: 0; transition: background-color 0.2s ease; }
 `;