diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
index 21c5196f71f..3e63ddba90d 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
@@ -36,17 +36,18 @@ export function formatExtraOutput(
             ? index.mixin.map(([mixinName, output]) => {
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
                 return Array.isArray(m)
-                  ? `@mixin ${mixinName} {\n\t${m.map((o) => `${o}`.replace("$", "--")).join("\n\t")}\n}`
+                  ? `@mixin ${mixinName} {\n\t${m.map((o) => `${o}`.replaceAll("$", "--")).join("\n\t")}\n}`
                   : "";
               })
             : [];
           const medias = index.media
             ? index.media.map(([mediaSchemed, output]) => {
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
+                const cssProps = m.map((o) => `${o}`.replaceAll("$", "--"));
                 return Array.isArray(m)
-                  ? `@media (${mediaSchemed}) {\n\t:root {\n\t\t${m
-                      .map((o) => `${o}`.replace("$", "--"))
-                      .join("\n\t\t")}\n\t}\n}`
+                  ? `${
+                      output === "light" ? `:root {\n\t${cssProps.join("\n\t")}\n}\n` : ""
+                    }@media (${mediaSchemed}) {\n\t.calcite-mode-auto {\n\t\t${cssProps.join("\n\t\t")}\n\t}\n}`
                   : "";
               })
             : [];