diff --git a/examples/example-react/src/pages/Dark.tsx b/examples/example-react/src/pages/Dark.tsx
index 1ca9fce13..435ab3c01 100644
--- a/examples/example-react/src/pages/Dark.tsx
+++ b/examples/example-react/src/pages/Dark.tsx
@@ -24,7 +24,9 @@ export default () => {
   }
   return (
     <Box h-400 roundedLG bgGray800--dark bgAmber100 p4>
-      <Box red200>40 Lorem ipsum dolor sit amet</Box>
+      <Box _dark={['green200']} red200>
+        40 Lorem ipsum dolor sit amet
+      </Box>
       <Box column toCenter spaceY3 gray800 white--dark textCenter>
         <Box
           as="button"
diff --git a/examples/example-react/src/pages/TextSize.tsx b/examples/example-react/src/pages/TextSize.tsx
index 0cfcaf2ae..3483ef63f 100644
--- a/examples/example-react/src/pages/TextSize.tsx
+++ b/examples/example-react/src/pages/TextSize.tsx
@@ -14,7 +14,11 @@ setTheme({
 
 export default () => {
   return (
-    <Box text2XL brand100>
+    <Box
+      text2XL
+      _hover={['bgAmber300', 'border']}
+      _md={['bgTeal400', 'text5XL']}
+    >
       40 Lorem ipsum dolor sit amet
     </Box>
   );
diff --git a/packages/parser/src/parser.ts b/packages/parser/src/parser.ts
index 3238ee830..0952ca72f 100644
--- a/packages/parser/src/parser.ts
+++ b/packages/parser/src/parser.ts
@@ -57,6 +57,12 @@ export class Parser {
   traverseProps(props: Props): void {
     if (isEmptyObj(props)) return
 
+    const { pseudos = [], theme } = this.config
+    const { breakpoints, modes } = theme || {}
+    const breakpointKeys = Object.keys(breakpoints)
+    const modeKeys: string[] = modes || []
+    const pseudoKeys: string[] = pseudos
+
     const { excludedProps = [] } = props
     const entries = Object.entries<any>(props)
 
@@ -77,10 +83,31 @@ export class Parser {
 
       // parse css prop
       if (propKey === 'css') {
-        this.parseCSSProp(propValue)
+        this.parseCSSObject(propValue)
         continue
       }
 
+      /** handle _hover, _sm, _dark... */
+      if (propKey.startsWith('_')) {
+        const postfix = propKey.replace(/^_/, '')
+        const obj = Array.isArray(propValue)
+          ? propValue.reduce<any>((r, cur) => ({ ...r, [cur]: true }), {})
+          : propValue
+
+        if (modeKeys.includes(postfix)) {
+          this.parseCSSObject(obj, { mode: postfix })
+          continue
+        }
+        if (breakpointKeys.includes(postfix)) {
+          this.parseCSSObject(obj, { breakpoint: breakpoints[postfix] })
+          continue
+        }
+        if (pseudoKeys.includes(postfix)) {
+          this.parseCSSObject(obj, { pseudo: ':' + postfix })
+          continue
+        }
+      }
+
       let atom = new Atom({ propKey, propValue })
 
       try {
@@ -202,6 +229,9 @@ export class Parser {
     const validTypes = ['string', 'boolean', 'number', 'undefined']
     if (propKey === 'css') return true
 
+    // for _hover,_sm,_dark...
+    if (propKey.startsWith('_')) return true
+
     const type = typeof propValue
     if (validTypes.includes(type)) return true
 
@@ -246,7 +276,7 @@ export class Parser {
     }
   }
 
-  parseCSSProp(propValue: any) {
+  parseCSSObject(propValue: any, meta = {}) {
     const parsed = parse(propValue)
 
     const prefixClassName = objectToClassName(propValue)
@@ -254,7 +284,7 @@ export class Parser {
     for (const { selector, selectorType, style } of parsed) {
       const [propKey, propValue] = Object.entries(style)[0]
 
-      let option: Options = { propKey, propValue, meta: {} }
+      let option: Options = { propKey, propValue, meta }
 
       if (selectorType === 'pseudo' && option.meta) {
         option.meta.pseudo = selector