diff --git a/.changeset/mighty-monkeys-wash.md b/.changeset/mighty-monkeys-wash.md
new file mode 100644
index 00000000000..07a89546218
--- /dev/null
+++ b/.changeset/mighty-monkeys-wash.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/styled-system": minor
+---
+
+Updated `_dark` and `_light` pseudo selectors to allow semantic tokens to change
+with the `data-theme` attributes.
diff --git a/.changeset/twenty-cooks-visit.md b/.changeset/twenty-cooks-visit.md
new file mode 100644
index 00000000000..3280fa5fddb
--- /dev/null
+++ b/.changeset/twenty-cooks-visit.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/system": minor
+---
+
+Added `[data-theme]` to the CSS variables root selector. This allows the
+semantic tokens to change according to `data-theme="dark"` and
+`data-theme="light"` DOM element attributes.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 404d424a85a..9ac9cfabcb0 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -56,7 +56,20 @@ const withChakra = (StoryFn: Function, context: StoryContext) => {
   }, [dir])
 
   return (
-    <ChakraProvider theme={extendTheme({ direction: dir })}>
+    <ChakraProvider
+      theme={extendTheme({
+        direction: dir,
+        semanticTokens: {
+          colors: {
+            semantic: {
+              default: "red.500",
+              _light: "red.500",
+              _dark: "blue.400",
+            },
+          },
+        },
+      })}
+    >
       <div dir={dir} id="story-wrapper" style={{ minHeight: "100vh" }}>
         <ColorModeToggleBar />
         <StoryFn />
diff --git a/packages/styled-system/src/pseudos.ts b/packages/styled-system/src/pseudos.ts
index 15277d23432..688f35bab15 100644
--- a/packages/styled-system/src/pseudos.ts
+++ b/packages/styled-system/src/pseudos.ts
@@ -298,12 +298,18 @@ export const pseudoSelectors = {
    * Styles for when `data-theme` is applied to any parent of
    * this component or element.
    */
-  _dark: ".chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]",
+  _dark:
+    ".chakra-ui-dark &:not([data-theme])," +
+    "[data-theme=dark] &:not([data-theme])," +
+    "&[data-theme=dark]",
   /**
    * Styles for when `data-theme` is applied to any parent of
    * this component or element.
    */
-  _light: ".chakra-ui-light &, [data-theme=light] &, &[data-theme=light]",
+  _light:
+    ".chakra-ui-light &:not([data-theme])," +
+    "[data-theme=light] &:not([data-theme])," +
+    "&[data-theme=light]",
 }
 
 export type Pseudos = typeof pseudoSelectors
diff --git a/packages/styled-system/tests/css-var.test.ts b/packages/styled-system/tests/css-var.test.ts
index 15162868967..7a16f0f5271 100644
--- a/packages/styled-system/tests/css-var.test.ts
+++ b/packages/styled-system/tests/css-var.test.ts
@@ -482,7 +482,7 @@ test("should convert semantic tokens", () => {
         "--colors-red-800": "#ff0080",
         "--colors-secondary": "var(--colors-red-800)",
         "--colors-success": "var(--colors-red-100)",
-        ".chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]": Object {
+        ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]": Object {
           "--colors-primary": "var(--colors-red-400)",
           "--colors-secondary": "var(--colors-red-700)",
         },
diff --git a/packages/system/src/providers.tsx b/packages/system/src/providers.tsx
index a54690b2796..47c229eeb8f 100644
--- a/packages/system/src/providers.tsx
+++ b/packages/system/src/providers.tsx
@@ -39,9 +39,13 @@ export interface CSSVarsProps {
   root?: string
 }
 
-export const CSSVars = ({ root = ":host, :root" }: CSSVarsProps) => (
-  <Global styles={(theme: any) => ({ [root]: theme.__cssVars })} />
-)
+export const CSSVars = ({ root = ":host, :root" }: CSSVarsProps) => {
+  /**
+   * Append color mode selector to allow semantic tokens to change according to the color mode
+   */
+  const selector = [root, `[data-theme]`].join(",")
+  return <Global styles={(theme: any) => ({ [selector]: theme.__cssVars })} />
+}
 
 export function useTheme<T extends object = Dict>() {
   const theme = React.useContext(
diff --git a/packages/system/stories/system.stories.tsx b/packages/system/stories/system.stories.tsx
index fa1dd181634..e0b280b5916 100644
--- a/packages/system/stories/system.stories.tsx
+++ b/packages/system/stories/system.stories.tsx
@@ -195,3 +195,22 @@ export const WithCSSVarToken = () => {
     </chakra.div>
   )
 }
+
+export const WithSemanticTokens = () => {
+  return (
+    <div>
+      <chakra.p color="semantic">I am in the default color mode</chakra.p>
+      <div data-theme="light">
+        <chakra.p color="semantic">I am forced to light mode (red)</chakra.p>
+      </div>
+      <div data-theme="dark">
+        <chakra.p color="semantic">I am forced to dark mode (blue)</chakra.p>
+        <div data-theme="light">
+          <chakra.p pl="4" color="semantic">
+            I am nested and forced to light mode (red)
+          </chakra.p>
+        </div>
+      </div>
+    </div>
+  )
+}