diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..82c6752c
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,19 @@
+# Exclude HTML
+*.html linguist-detectable=false
+*.htm linguist-detectable=false
+
+# Exclude Kotlin
+*.kt linguist-detectable=false
+*.kts linguist-detectable=false
+
+# Exclude JavaScript
+*.js linguist-detectable=false
+*.jsx linguist-detectable=false
+*.mjs linguist-detectable=false
+*.cjs linguist-detectable=false
+
+# Exclude Ruby
+*.rb linguist-detectable=false
+
+# Exclude Swift
+*.swift linguist-detectable=false
diff --git a/bun.lock b/bun.lock
index 671bb1ed..f5e4b23c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -126,12 +126,12 @@
     },
     "packages/uniwind": {
       "name": "uniwind",
-      "version": "1.3.0",
+      "version": "1.3.1",
       "dependencies": {
         "@tailwindcss/node": "4.1.17",
         "@tailwindcss/oxide": "4.1.17",
         "culori": "4.0.2",
-        "lightningcss": "1.30.2",
+        "lightningcss": "1.30.1",
       },
       "devDependencies": {
         "@react-native/babel-preset": "0.83.0",
@@ -1896,29 +1896,29 @@
 
     "lighthouse-logger": ["lighthouse-logger@1.4.2", "", { "dependencies": { "debug": "^2.6.9", "marky": "^1.2.2" } }, "sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g=="],
 
-    "lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],
+    "lightningcss": ["lightningcss@1.30.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.30.1", "lightningcss-darwin-x64": "1.30.1", "lightningcss-freebsd-x64": "1.30.1", "lightningcss-linux-arm-gnueabihf": "1.30.1", "lightningcss-linux-arm64-gnu": "1.30.1", "lightningcss-linux-arm64-musl": "1.30.1", "lightningcss-linux-x64-gnu": "1.30.1", "lightningcss-linux-x64-musl": "1.30.1", "lightningcss-win32-arm64-msvc": "1.30.1", "lightningcss-win32-x64-msvc": "1.30.1" } }, "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg=="],
 
     "lightningcss-android-arm64": ["lightningcss-android-arm64@1.30.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A=="],
 
-    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="],
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ=="],
 
-    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="],
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA=="],
 
-    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA=="],
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig=="],
 
-    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.2", "", { "os": "linux", "cpu": "arm" }, "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA=="],
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.1", "", { "os": "linux", "cpu": "arm" }, "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q=="],
 
-    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A=="],
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw=="],
 
-    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA=="],
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ=="],
 
-    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w=="],
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.1", "", { "os": "linux", "cpu": "x64" }, "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw=="],
 
-    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA=="],
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.1", "", { "os": "linux", "cpu": "x64" }, "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ=="],
 
-    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ=="],
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA=="],
 
-    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.1", "", { "os": "win32", "cpu": "x64" }, "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg=="],
 
     "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
 
@@ -2822,6 +2822,8 @@
 
     "@expo/metro-config/hermes-parser": ["hermes-parser@0.29.1", "", { "dependencies": { "hermes-estree": "0.29.1" } }, "sha512-xBHWmUtRC5e/UL0tI7Ivt2riA/YBq9+SiYFU7C1oBa/j2jYGlIF9043oak1F47ihuDIxQ5nbsKueYJDRY02UgA=="],
 
+    "@expo/metro-config/lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],
+
     "@expo/metro-config/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
     "@expo/metro-config/postcss": ["postcss@8.4.49", "", { "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA=="],
@@ -2924,6 +2926,8 @@
 
     "@react-navigation/native-stack/@react-navigation/elements": ["@react-navigation/elements@2.8.0", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.19", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-uvSOkYOF7wfgkt57cl+6fZ2vQgTiYYyJleZzuWthPKHK4nDq2M4sc9SSzgK9GS9UCJFRBErNtl3S+/ErtrwREw=="],
 
+    "@tailwindcss/node/lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.6.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.6.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA=="],
@@ -3312,6 +3316,26 @@
 
     "@expo/metro-config/hermes-parser/hermes-estree": ["hermes-estree@0.29.1", "", {}, "sha512-jl+x31n4/w+wEqm0I2r4CMimukLbLQEYpisys5oCre611CI5fc9TxhqkBBCJ1edDG4Kza0f7CgNz8xVMLZQOmQ=="],
 
+    "@expo/metro-config/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.2", "", { "os": "linux", "cpu": "arm" }, "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ=="],
+
+    "@expo/metro-config/lightningcss/lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
+
     "@expo/metro-config/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
 
     "@expo/metro/metro/@babel/core": ["@babel/core@7.28.5", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.28.3", "@babel/helpers": "^7.28.4", "@babel/parser": "^7.28.5", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw=="],
@@ -3404,6 +3428,26 @@
 
     "@react-native/dev-middleware/open/is-wsl": ["is-wsl@2.2.0", "", { "dependencies": { "is-docker": "^2.0.0" } }, "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww=="],
 
+    "@tailwindcss/node/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.2", "", { "os": "linux", "cpu": "arm" }, "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
+
     "@testing-library/dom/pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
     "@testing-library/dom/pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
diff --git a/packages/uniwind/package.json b/packages/uniwind/package.json
index a48b2bb0..468983ab 100644
--- a/packages/uniwind/package.json
+++ b/packages/uniwind/package.json
@@ -81,7 +81,7 @@
         "@tailwindcss/node": "4.1.17",
         "@tailwindcss/oxide": "4.1.17",
         "culori": "4.0.2",
-        "lightningcss": "1.30.2"
+        "lightningcss": "1.30.1"
     },
     "peerDependencies": {
         "react": ">=19.0.0",
diff --git a/packages/uniwind/src/components/ScopedTheme/ScopedTheme.native.tsx b/packages/uniwind/src/components/ScopedTheme/ScopedTheme.native.tsx
new file mode 100644
index 00000000..2f49ecd8
--- /dev/null
+++ b/packages/uniwind/src/components/ScopedTheme/ScopedTheme.native.tsx
@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react'
+import { UniwindContext } from '../../core/context'
+import { ThemeName, UniwindContextType } from '../../core/types'
+
+type ScopedThemeProps = {
+    theme: ThemeName
+}
+
+export const ScopedTheme: React.FC<React.PropsWithChildren<ScopedThemeProps>> = ({ theme, children }) => {
+    const value = useMemo<UniwindContextType>(() => ({ scopedTheme: theme }), [theme])
+
+    return (
+        <UniwindContext.Provider value={value}>
+            {children}
+        </UniwindContext.Provider>
+    )
+}
diff --git a/packages/uniwind/src/components/ScopedTheme/ScopedTheme.tsx b/packages/uniwind/src/components/ScopedTheme/ScopedTheme.tsx
new file mode 100644
index 00000000..9dd01c2c
--- /dev/null
+++ b/packages/uniwind/src/components/ScopedTheme/ScopedTheme.tsx
@@ -0,0 +1,19 @@
+import React, { useMemo } from 'react'
+import { UniwindContext } from '../../core/context'
+import type { ThemeName, UniwindContextType } from '../../core/types'
+
+type ScopedThemeProps = {
+    theme: ThemeName
+}
+
+export const ScopedTheme: React.FC<React.PropsWithChildren<ScopedThemeProps>> = ({ theme, children }) => {
+    const value = useMemo<UniwindContextType>(() => ({ scopedTheme: theme }), [theme])
+
+    return (
+        <UniwindContext.Provider value={value}>
+            <div className={theme} style={{ display: 'contents' }}>
+                {children}
+            </div>
+        </UniwindContext.Provider>
+    )
+}
diff --git a/packages/uniwind/src/components/ScopedTheme/index.ts b/packages/uniwind/src/components/ScopedTheme/index.ts
new file mode 100644
index 00000000..9c9e340b
--- /dev/null
+++ b/packages/uniwind/src/components/ScopedTheme/index.ts
@@ -0,0 +1 @@
+export * from './ScopedTheme'
diff --git a/packages/uniwind/src/components/native/Pressable.tsx b/packages/uniwind/src/components/native/Pressable.tsx
index 3c220a57..b582da49 100644
--- a/packages/uniwind/src/components/native/Pressable.tsx
+++ b/packages/uniwind/src/components/native/Pressable.tsx
@@ -1,4 +1,5 @@
 import { Pressable as RNPressable, PressableProps } from 'react-native'
+import { useUniwindContext } from '../../core/context'
 import { UniwindStore } from '../../core/native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
@@ -11,6 +12,7 @@ export const Pressable = copyComponentProperties(RNPressable, (props: PressableP
             isDisabled: Boolean(props.disabled),
         },
     )
+    const uniwindContext = useUniwindContext()
 
     return (
         <RNPressable
@@ -22,6 +24,7 @@ export const Pressable = copyComponentProperties(RNPressable, (props: PressableP
                             props.className,
                             props,
                             { isDisabled: Boolean(props.disabled), isPressed: true },
+                            uniwindContext,
                         ).styles,
                         typeof props.style === 'function' ? props.style(state) : props.style,
                     ]
diff --git a/packages/uniwind/src/components/native/useStyle.ts b/packages/uniwind/src/components/native/useStyle.ts
index 8b7e82f2..cfea356d 100644
--- a/packages/uniwind/src/components/native/useStyle.ts
+++ b/packages/uniwind/src/components/native/useStyle.ts
@@ -1,12 +1,14 @@
 import { useLayoutEffect, useReducer } from 'react'
+import { useUniwindContext } from '../../core/context'
 import { UniwindListener } from '../../core/listener'
 import { UniwindStore } from '../../core/native'
 import { ComponentState } from '../../core/types'
 
 export const useStyle = (className: string | undefined, componentProps: Record<string, any>, state?: ComponentState) => {
     'use no memo'
+    const uniwindContext = useUniwindContext()
     const [_, rerender] = useReducer(() => ({}), {})
-    const styleState = UniwindStore.getStyles(className, componentProps, state)
+    const styleState = UniwindStore.getStyles(className, componentProps, state, uniwindContext)
 
     useLayoutEffect(() => {
         if (__DEV__ || styleState.dependencies.length > 0) {
diff --git a/packages/uniwind/src/core/config/config.native.ts b/packages/uniwind/src/core/config/config.native.ts
index fb783f4c..3c51bc19 100644
--- a/packages/uniwind/src/core/config/config.native.ts
+++ b/packages/uniwind/src/core/config/config.native.ts
@@ -36,23 +36,12 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
                 return varValue
             }
 
-            const value = getValue()
-            const runtimeThemeVariables = UniwindStore.runtimeThemeVariables.get(theme) ?? {}
-
-            if (theme === this.currentTheme) {
-                Object.defineProperty(UniwindStore.vars, varName, {
-                    configurable: true,
-                    enumerable: true,
-                    get: () => value,
-                })
-            }
-
-            Object.defineProperty(runtimeThemeVariables, varName, {
+            UniwindStore.vars[theme] ??= {}
+            Object.defineProperty(UniwindStore.vars[theme], varName, {
                 configurable: true,
                 enumerable: true,
-                get: () => value,
+                get: getValue,
             })
-            UniwindStore.runtimeThemeVariables.set(theme, runtimeThemeVariables)
         })
 
         if (theme === this.currentTheme) {
@@ -70,12 +59,11 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
 
     protected __reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) {
         super.__reinit(generateStyleSheetCallback, themes)
-        UniwindStore.reinit(generateStyleSheetCallback)
+        UniwindStore.reinit(generateStyleSheetCallback, themes)
     }
 
     protected onThemeChange() {
         UniwindStore.runtime.currentThemeName = this.currentTheme
-        UniwindStore.reinit()
     }
 }
 
diff --git a/packages/uniwind/src/core/context.ts b/packages/uniwind/src/core/context.ts
new file mode 100644
index 00000000..6948050c
--- /dev/null
+++ b/packages/uniwind/src/core/context.ts
@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react'
+import type { ThemeName } from './types'
+
+export const UniwindContext = createContext({
+    scopedTheme: null as ThemeName | null,
+})
+
+export const useUniwindContext = () => useContext(UniwindContext)
+
+UniwindContext.displayName = 'UniwindContext'
diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts
index 62c6e337..a5f77a87 100644
--- a/packages/uniwind/src/core/native/store.ts
+++ b/packages/uniwind/src/core/native/store.ts
@@ -2,7 +2,7 @@
 import { Dimensions, Platform } from 'react-native'
 import { Orientation, StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
-import { ComponentState, CSSVariables, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName } from '../types'
+import { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType } from '../types'
 import { cloneWithAccessors } from './native-utils'
 import { parseBoxShadow, parseFontVariant, parseTextShadowMutation, parseTransformsMutation, resolveGradient } from './parsers'
 import { UniwindRuntime } from './runtime'
@@ -17,30 +17,39 @@ const emptyState: StylesResult = { styles: {}, dependencies: [], dependencySum:
 
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
-    vars = {} as Record<string, unknown>
-    runtimeThemeVariables = new Map<ThemeName, CSSVariables>()
+    vars = {} as Record<ThemeName, Record<string, unknown>>
     private stylesheet = {} as StyleSheets
-    private cache = new Map<string, StylesResult>()
-    private generateStyleSheetCallbackResult: ReturnType<GenerateStyleSheetsCallback> | null = null
-
-    getStyles(className: string | undefined, componentProps?: Record<string, any>, state?: ComponentState): StylesResult {
+    private cache = {} as Record<ThemeName, Map<string, StylesResult>>
+
+    getStyles(
+        className: string | undefined,
+        componentProps: Record<string, any> | undefined,
+        state: ComponentState | undefined,
+        uniwindContext: UniwindContextType,
+    ): StylesResult {
         if (className === undefined || className === '') {
             return emptyState
         }
 
-        const cacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}`
+        const isScopedTheme = uniwindContext.scopedTheme !== null
+        const cacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}${isScopedTheme}`
+        const cache = this.cache[uniwindContext.scopedTheme ?? this.runtime.currentThemeName]
 
-        if (this.cache.has(cacheKey)) {
-            return this.cache.get(cacheKey)!
+        if (!cache) {
+            return emptyState
         }
 
-        const result = this.resolveStyles(className, componentProps, state)
+        if (cache.has(cacheKey)) {
+            return cache.get(cacheKey)!
+        }
+
+        const result = this.resolveStyles(className, componentProps, state, uniwindContext)
 
         // Don't cache styles that depend on data attributes
         if (!result.hasDataAttributes) {
-            this.cache.set(cacheKey, result)
+            cache.set(cacheKey, result)
             UniwindListener.subscribe(
-                () => this.cache.delete(cacheKey),
+                () => cache.delete(cacheKey),
                 result.dependencies,
                 { once: true },
             )
@@ -49,47 +58,49 @@ class UniwindStoreBuilder {
         return result
     }
 
-    reinit = (generateStyleSheetCallback?: GenerateStyleSheetsCallback) => {
-        const config = generateStyleSheetCallback?.(this.runtime) ?? this.generateStyleSheetCallbackResult
-
-        if (!config) {
-            return
-        }
-
+    reinit = (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => {
+        const config = generateStyleSheetCallback(this.runtime)
         const { scopedVars, stylesheet, vars } = config
-
-        this.generateStyleSheetCallbackResult = config
-        this.stylesheet = stylesheet
-        this.vars = vars
-
-        const themeVars = scopedVars[`__uniwind-theme-${this.runtime.currentThemeName}`]
         const platformVars = scopedVars[`__uniwind-platform-${Platform.OS}`]
-        const runtimeThemeVars = this.runtimeThemeVariables.get(this.runtime.currentThemeName)
-
-        if (themeVars) {
-            Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(themeVars))
-        }
 
         if (platformVars) {
-            Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(platformVars))
+            Object.defineProperties(vars, Object.getOwnPropertyDescriptors(platformVars))
         }
 
-        if (runtimeThemeVars) {
-            Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(runtimeThemeVars))
-        }
+        this.stylesheet = stylesheet
+        this.vars = Object.fromEntries(themes.map(theme => {
+            const clonedVars = cloneWithAccessors(vars)
+            const themeVars = scopedVars[`__uniwind-theme-${theme}`]
 
-        if (__DEV__ && generateStyleSheetCallback) {
+            if (themeVars) {
+                Object.defineProperties(clonedVars, Object.getOwnPropertyDescriptors(themeVars))
+            }
+
+            return [theme, clonedVars]
+        }))
+        this.cache = Object.fromEntries(themes.map(theme => [theme, new Map()]))
+
+        if (__DEV__) {
             UniwindListener.notifyAll()
         }
     }
 
-    private resolveStyles(classNames: string, componentProps?: Record<string, any>, state?: ComponentState) {
+    private resolveStyles(
+        classNames: string,
+        componentProps: Record<string, any> | undefined,
+        state: ComponentState | undefined,
+        uniwindContext: UniwindContextType,
+    ) {
         const result = {} as Record<string, any>
-        let vars = this.vars
+        const theme = uniwindContext.scopedTheme ?? this.runtime.currentThemeName
+        // At this point we're sure that theme is correct
+        let vars = this.vars[theme]!
+        const originalVars = vars
         let hasDataAttributes = false
         const dependencies = new Set<StyleDependency>()
         let dependencySum = 0
         const bestBreakpoints = new Map<string, Style>()
+        const isScopedTheme = uniwindContext.scopedTheme !== null
 
         for (const className of classNames.split(' ')) {
             if (!(className in this.stylesheet)) {
@@ -99,6 +110,10 @@ class UniwindStoreBuilder {
             for (const style of this.stylesheet[className] as Array<Style>) {
                 if (style.dependencies) {
                     style.dependencies.forEach(dep => {
+                        if (dep === StyleDependency.Theme && isScopedTheme) {
+                            return
+                        }
+
                         dependencies.add(dep)
                         dependencySum |= 1 << dep
                     })
@@ -111,7 +126,7 @@ class UniwindStoreBuilder {
                 if (
                     style.minWidth > this.runtime.screen.width
                     || style.maxWidth < this.runtime.screen.width
-                    || (style.theme !== null && this.runtime.currentThemeName !== style.theme)
+                    || (style.theme !== null && theme !== style.theme)
                     || (style.orientation !== null && this.runtime.orientation !== style.orientation)
                     || (style.rtl !== null && this.runtime.rtl !== style.rtl)
                     || (style.active !== null && state?.isPressed !== style.active)
@@ -138,8 +153,8 @@ class UniwindStoreBuilder {
 
                     if (property[0] === '-') {
                         // Clone vars object if we are adding inline variables
-                        if (vars === this.vars) {
-                            vars = cloneWithAccessors(this.vars)
+                        if (vars === originalVars) {
+                            vars = cloneWithAccessors(originalVars)
                         }
 
                         Object.defineProperty(vars, property, {
diff --git a/packages/uniwind/src/core/types.ts b/packages/uniwind/src/core/types.ts
index 9c4ddf9b..579093ec 100644
--- a/packages/uniwind/src/core/types.ts
+++ b/packages/uniwind/src/core/types.ts
@@ -1,5 +1,7 @@
+import React from 'react'
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
 import { ColorScheme, Orientation, StyleDependency, UniwindConfig } from '../types'
+import type { UniwindContext } from './context'
 
 export type Style = {
     entries: Array<[string, () => unknown]>
@@ -92,3 +94,5 @@ export type ComponentState = {
 }
 
 export type CSSVariables = Record<string, string | number>
+
+export type UniwindContextType = React.ContextType<typeof UniwindContext>
diff --git a/packages/uniwind/src/core/web/getWebStyles.ts b/packages/uniwind/src/core/web/getWebStyles.ts
index 91e40079..1b84569d 100644
--- a/packages/uniwind/src/core/web/getWebStyles.ts
+++ b/packages/uniwind/src/core/web/getWebStyles.ts
@@ -1,14 +1,18 @@
-import { RNStyle } from '../types'
+import { RNStyle, UniwindContextType } from '../types'
 import { parseCSSValue } from './parseCSSValue'
 
-const dummy = typeof document !== 'undefined'
+const dummyParent = typeof document !== 'undefined'
     ? Object.assign(document.createElement('div'), {
         style: 'display: none',
     })
     : null
+const dummy = typeof document !== 'undefined'
+    ? document.createElement('div')
+    : null
 
-if (dummy) {
-    document.body.appendChild(dummy)
+if (dummyParent && dummy) {
+    document.body.appendChild(dummyParent)
+    dummyParent.appendChild(dummy)
 }
 
 const getComputedStyles = () => {
@@ -47,7 +51,7 @@ const getObjectDifference = <T extends object>(obj1: T, obj2: T): T => {
     return diff
 }
 
-export const getWebStyles = (className?: string): RNStyle => {
+export const getWebStyles = (className: string | undefined, uniwindContext: UniwindContextType): RNStyle => {
     if (className === undefined) {
         return {}
     }
@@ -56,6 +60,12 @@ export const getWebStyles = (className?: string): RNStyle => {
         return {}
     }
 
+    if (uniwindContext.scopedTheme !== null) {
+        dummyParent?.setAttribute('class', uniwindContext.scopedTheme)
+    } else {
+        dummyParent?.removeAttribute('class')
+    }
+
     dummy.className = className
 
     const computedStyles = getObjectDifference(initialStyles, getComputedStyles())
@@ -74,3 +84,19 @@ export const getWebStyles = (className?: string): RNStyle => {
             }),
     )
 }
+
+export const getWebVariable = (name: string, uniwindContext: UniwindContextType) => {
+    if (!dummyParent) {
+        return undefined
+    }
+
+    if (uniwindContext.scopedTheme !== null) {
+        dummyParent.setAttribute('class', uniwindContext.scopedTheme)
+    } else {
+        dummyParent.removeAttribute('class')
+    }
+
+    const variable = window.getComputedStyle(dummyParent).getPropertyValue(name)
+
+    return parseCSSValue(variable)
+}
diff --git a/packages/uniwind/src/css/processFunctions.ts b/packages/uniwind/src/css-visitor/function-visitor.ts
similarity index 69%
rename from packages/uniwind/src/css/processFunctions.ts
rename to packages/uniwind/src/css-visitor/function-visitor.ts
index 8bfbd0e5..b96409d2 100644
--- a/packages/uniwind/src/css/processFunctions.ts
+++ b/packages/uniwind/src/css-visitor/function-visitor.ts
@@ -1,12 +1,14 @@
-import { CustomAtRules, TokenOrValue, Visitor } from 'lightningcss'
+import { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss'
 
 const ONE_PX = {
     type: 'token',
     value: { type: 'dimension', unit: 'px', value: 1 },
 } satisfies TokenOrValue
 
-export const processFunctions: Visitor<CustomAtRules>['Function'] = {
-    pixelRatio: (fn) => {
+export class FunctionVisitor {
+    [name: string]: (fn: LightningCSSFunction) => TokenOrValue
+
+    pixelRatio(fn: LightningCSSFunction): TokenOrValue {
         return {
             type: 'function',
             value: {
@@ -17,9 +19,10 @@ export const processFunctions: Visitor<CustomAtRules>['Function'] = {
                     ONE_PX,
                 ],
             },
-        } satisfies TokenOrValue
-    },
-    fontScale: (fn) => {
+        }
+    }
+
+    fontScale(fn: LightningCSSFunction): TokenOrValue {
         return {
             type: 'function',
             value: {
@@ -33,7 +36,10 @@ export const processFunctions: Visitor<CustomAtRules>['Function'] = {
                     },
                 ],
             },
-        } satisfies TokenOrValue
-    },
-    hairlineWidth: () => ONE_PX,
+        }
+    }
+
+    hairlineWidth(): TokenOrValue {
+        return ONE_PX
+    }
 }
diff --git a/packages/uniwind/src/css-visitor/index.ts b/packages/uniwind/src/css-visitor/index.ts
new file mode 100644
index 00000000..6d161302
--- /dev/null
+++ b/packages/uniwind/src/css-visitor/index.ts
@@ -0,0 +1 @@
+export * from './visitor'
diff --git a/packages/uniwind/src/css-visitor/rule-visitor.ts b/packages/uniwind/src/css-visitor/rule-visitor.ts
new file mode 100644
index 00000000..448a727e
--- /dev/null
+++ b/packages/uniwind/src/css-visitor/rule-visitor.ts
@@ -0,0 +1,90 @@
+import { ReturnedDeclaration, ReturnedMediaQuery, ReturnedRule, Rule, SelectorComponent } from 'lightningcss'
+
+type LightningRuleVisitor = Rule<ReturnedDeclaration, ReturnedMediaQuery>
+type LightningRuleVisitors = Partial<
+    {
+        [K in LightningRuleVisitor['type']]: (rule: Extract<LightningRuleVisitor, { type: K }>) => ReturnedRule | Array<ReturnedRule> | void
+    }
+>
+
+export class RuleVisitor implements LightningRuleVisitors {
+    processedClassNames = new Set<string>()
+    processedVariables = new Set<string>()
+    currentLayerName = ''
+
+    constructor(private readonly themes: Array<string>) {}
+
+    'layer-block' = (layer: Extract<LightningRuleVisitor, { type: 'layer-block' }>) => {
+        this.currentLayerName = layer.value.name?.join('') ?? ''
+    }
+
+    style = (styleRule: Extract<LightningRuleVisitor, { type: 'style' }>) => {
+        const firstSelector = styleRule.value.selectors.at(0)?.at(0)
+        const secondSelector = styleRule.value.selectors.at(0)?.at(1)
+
+        if (
+            this.currentLayerName === 'theme' && firstSelector?.type === 'nesting' && secondSelector?.type === 'pseudo-class'
+            && secondSelector.kind === 'where'
+        ) {
+            return this.processThemeStyle(styleRule, secondSelector)
+        }
+
+        if (firstSelector?.type === 'class') {
+            return this.processClassStyle(styleRule, firstSelector)
+        }
+    }
+
+    private processThemeStyle(
+        styleRule: Extract<LightningRuleVisitor, { type: 'style' }>,
+        secondSelector: Extract<SelectorComponent, { type: 'pseudo-class'; kind: 'where' }>,
+    ): ReturnedRule | void {
+        const whereSelector = secondSelector.selectors.at(0)?.at(0)
+
+        if (whereSelector?.type !== 'class') {
+            return
+        }
+
+        const selectedVariant = this.themes.find(theme => whereSelector.name === theme)
+
+        if (selectedVariant === undefined || this.processedVariables.has(selectedVariant)) {
+            return
+        }
+
+        this.processedVariables.add(selectedVariant)
+
+        return {
+            type: 'style' as const,
+            value: {
+                loc: styleRule.value.loc,
+                selectors: [[{ type: 'class' as const, name: selectedVariant }]],
+                declarations: styleRule.value.declarations,
+                rules: styleRule.value.rules,
+            },
+        }
+    }
+
+    private processClassStyle(
+        styleRule: Extract<LightningRuleVisitor, { type: 'style' }>,
+        firstSelector: Extract<SelectorComponent, { type: 'class' }>,
+    ): ReturnedRule | void {
+        const selectedVariant = this.themes.find(theme => firstSelector.name.includes(`${theme}:`))
+
+        if (selectedVariant === undefined || this.processedClassNames.has(firstSelector.name)) {
+            return
+        }
+
+        this.processedClassNames.add(firstSelector.name)
+
+        return {
+            type: 'scope',
+            value: {
+                loc: styleRule.value.loc,
+                rules: [styleRule],
+                scopeStart: [[{ type: 'class', name: selectedVariant }]],
+                scopeEnd: this.themes
+                    .filter(theme => theme !== selectedVariant)
+                    .map(theme => [{ type: 'class', name: theme }]),
+            },
+        }
+    }
+}
diff --git a/packages/uniwind/src/css-visitor/visitor.ts b/packages/uniwind/src/css-visitor/visitor.ts
new file mode 100644
index 00000000..3fdcec79
--- /dev/null
+++ b/packages/uniwind/src/css-visitor/visitor.ts
@@ -0,0 +1,13 @@
+import { CustomAtRules, Visitor } from 'lightningcss'
+import { FunctionVisitor } from './function-visitor'
+import { RuleVisitor } from './rule-visitor'
+
+export class UniwindCSSVisitor implements Visitor<CustomAtRules> {
+    Function: Visitor<CustomAtRules>['Function']
+    Rule: Visitor<CustomAtRules>['Rule']
+
+    constructor(private readonly themes: Array<string>) {
+        this.Function = new FunctionVisitor()
+        this.Rule = new RuleVisitor(this.themes)
+    }
+}
diff --git a/packages/uniwind/src/hoc/withUniwind.native.tsx b/packages/uniwind/src/hoc/withUniwind.native.tsx
index 6fb7a8ae..7cfa3444 100644
--- a/packages/uniwind/src/hoc/withUniwind.native.tsx
+++ b/packages/uniwind/src/hoc/withUniwind.native.tsx
@@ -1,4 +1,5 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import { useUniwindContext } from '../core/context'
 import { UniwindListener } from '../core/listener'
 import { UniwindStore } from '../core/native'
 import { StyleDependency } from '../types'
@@ -16,6 +17,7 @@ export const withUniwind: WithUniwind = <
     : withAutoUniwind(Component)
 
 const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject) => {
+    const uniwindContext = useUniwindContext()
     const { dependencies, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
         if (isColorClassProperty(propName)) {
             const colorProp = classToColor(propName)
@@ -24,7 +26,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(propValue)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[colorProp] = styles.accentColor
@@ -34,7 +36,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 
         if (isClassProperty(propName)) {
             const styleProp = classToStyle(propName)
-            const { styles, dependencies } = UniwindStore.getStyles(propValue)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[styleProp] ??= []
@@ -74,6 +76,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 }
 
 const withManualUniwind = (Component: Component<AnyObject>, options: Record<PropertyKey, OptionMapping>) => (props: AnyObject) => {
+    const uniwindContext = useUniwindContext()
     const { generatedProps, dependencies } = Object.entries(options).reduce((acc, [propName, option]) => {
         const className = props[option.fromClassName]
 
@@ -87,7 +90,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(className)
+            const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
 
             acc.generatedProps[propName] = styles[option.styleProperty]
             acc.dependencies.push(...dependencies)
@@ -95,7 +98,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
             return acc
         }
 
-        const { styles, dependencies } = UniwindStore.getStyles(className)
+        const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
         acc.dependencies.push(...dependencies)
 
         if (!isStyleProperty(propName)) {
diff --git a/packages/uniwind/src/hoc/withUniwind.tsx b/packages/uniwind/src/hoc/withUniwind.tsx
index 676697bc..449315a4 100644
--- a/packages/uniwind/src/hoc/withUniwind.tsx
+++ b/packages/uniwind/src/hoc/withUniwind.tsx
@@ -1,4 +1,5 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import { useUniwindContext } from '../core/context'
 import { CSSListener, formatColor, getWebStyles } from '../core/web'
 import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
@@ -14,6 +15,8 @@ export const withUniwind: WithUniwind = <
     : withAutoUniwind(Component)
 
 const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject) => {
+    const uniwindContext = useUniwindContext()
+
     const { classNames, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
         if (isColorClassProperty(propName)) {
             const colorProp = classToColor(propName)
@@ -23,7 +26,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
             }
 
             const className = propValue
-            const color = getWebStyles(className).accentColor
+            const color = getWebStyles(className, uniwindContext).accentColor
 
             acc.generatedProps[colorProp] = color !== undefined
                 ? formatColor(color)
@@ -69,6 +72,8 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 }
 
 const withManualUniwind = (Component: Component<AnyObject>, options: Record<PropertyKey, OptionMapping>) => (props: AnyObject) => {
+    const uniwindContext = useUniwindContext()
+
     const { generatedProps, classNames } = Object.entries(options).reduce((acc, [propName, option]) => {
         const className = props[option.fromClassName]
 
@@ -82,7 +87,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const value = getWebStyles(className)[option.styleProperty]
+            const value = getWebStyles(className, uniwindContext)[option.styleProperty]
             const transformedValue = value !== undefined && option.styleProperty.toLowerCase().includes('color')
                 ? formatColor(value as string)
                 : value
diff --git a/packages/uniwind/src/hooks/useCSSVariable/getVariableValue.native.ts b/packages/uniwind/src/hooks/useCSSVariable/getVariableValue.native.ts
index 0165880d..ab7e18ac 100644
--- a/packages/uniwind/src/hooks/useCSSVariable/getVariableValue.native.ts
+++ b/packages/uniwind/src/hooks/useCSSVariable/getVariableValue.native.ts
@@ -1,3 +1,5 @@
-import { UniwindStore } from '../../core/native'
+import { UniwindRuntime, UniwindStore } from '../../core/native'
+import { UniwindContextType } from '../../core/types'
 
-export const getVariableValue = (name: string) => UniwindStore.vars[name]
+export const getVariableValue = (name: string, uniwindContext: UniwindContextType) =>
+    UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName]?.[name]
diff --git a/packages/uniwind/src/hooks/useCSSVariable/getVariableValue.ts b/packages/uniwind/src/hooks/useCSSVariable/getVariableValue.ts
index a68e24bb..7c1eae5d 100644
--- a/packages/uniwind/src/hooks/useCSSVariable/getVariableValue.ts
+++ b/packages/uniwind/src/hooks/useCSSVariable/getVariableValue.ts
@@ -1,19 +1,3 @@
-import { parseCSSValue } from '../../core/web'
+import { getWebVariable } from '../../core/web'
 
-const documentStyles = typeof document !== 'undefined'
-    ? window.getComputedStyle(document.documentElement)
-    : null
-
-export const getVariableValue = (name: string) => {
-    if (!documentStyles) {
-        return undefined
-    }
-
-    const value = documentStyles.getPropertyValue(name).trim()
-
-    if (value === '') {
-        return undefined
-    }
-
-    return parseCSSValue(value)
-}
+export const getVariableValue = getWebVariable
diff --git a/packages/uniwind/src/hooks/useCSSVariable/useCSSVariable.ts b/packages/uniwind/src/hooks/useCSSVariable/useCSSVariable.ts
index 069daf3e..6cc09a41 100644
--- a/packages/uniwind/src/hooks/useCSSVariable/useCSSVariable.ts
+++ b/packages/uniwind/src/hooks/useCSSVariable/useCSSVariable.ts
@@ -1,13 +1,15 @@
 import { useLayoutEffect, useRef, useState } from 'react'
+import { useUniwindContext } from '../../core/context'
 import { UniwindListener } from '../../core/listener'
 import { Logger } from '../../core/logger'
+import { UniwindContextType } from '../../core/types'
 import { StyleDependency } from '../../types'
 import { getVariableValue } from './getVariableValue'
 
-const getValue = (name: string | Array<string>) =>
+const getValue = (name: string | Array<string>, uniwindContext: UniwindContextType) =>
     Array.isArray(name)
-        ? name.map(getVariableValue)
-        : getVariableValue(name)
+        ? name.map(name => getVariableValue(name, uniwindContext))
+        : getVariableValue(name, uniwindContext)
 
 const arrayEquals = <T>(a: Array<T>, b: Array<T>) => {
     if (a.length !== b.length) {
@@ -42,7 +44,8 @@ type UseCSSVariable = {
  * @returns Value / Values of the CSS variable. On web it is always a string (1rem, #ff0000, etc.), but on native it can be a string or a number (16px, #ff0000)
  */
 export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) => {
-    const [value, setValue] = useState(getValue(name))
+    const uniwindContext = useUniwindContext()
+    const [value, setValue] = useState(getValue(name, uniwindContext))
     const nameRef = useRef(name)
 
     useLayoutEffect(() => {
@@ -51,27 +54,27 @@ export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) =>
                 return
             }
 
-            setValue(getValue(name))
+            setValue(getValue(name, uniwindContext))
             nameRef.current = name
 
             return
         }
 
         if (name !== nameRef.current) {
-            setValue(getValue(name))
+            setValue(getValue(name, uniwindContext))
             nameRef.current = name
         }
     }, [name])
 
     useLayoutEffect(() => {
-        const updateValue = () => setValue(getValue(nameRef.current))
+        const updateValue = () => setValue(getValue(nameRef.current, uniwindContext))
         const dispose = UniwindListener.subscribe(
             updateValue,
             [StyleDependency.Theme, StyleDependency.Variables],
         )
 
         return dispose
-    }, [])
+    }, [uniwindContext])
 
     if (Array.isArray(value)) {
         value.forEach((val, index) => {
diff --git a/packages/uniwind/src/hooks/useResolveClassNames.native.ts b/packages/uniwind/src/hooks/useResolveClassNames.native.ts
index a402b612..ad06891f 100644
--- a/packages/uniwind/src/hooks/useResolveClassNames.native.ts
+++ b/packages/uniwind/src/hooks/useResolveClassNames.native.ts
@@ -1,18 +1,21 @@
 import { useLayoutEffect, useReducer } from 'react'
+import { useUniwindContext } from '../core/context'
 import { UniwindListener } from '../core/listener'
 import { UniwindStore } from '../core/native'
 
 export const useResolveClassNames = (className: string) => {
+    const uniwindContext = useUniwindContext()
     const [uniwindState, recreate] = useReducer(
-        () => UniwindStore.getStyles(className),
-        UniwindStore.getStyles(className),
+        () => UniwindStore.getStyles(className, undefined, undefined, uniwindContext),
+        undefined,
+        () => UniwindStore.getStyles(className, undefined, undefined, uniwindContext),
     )
 
     useLayoutEffect(() => {
         if (className !== '') {
             recreate()
         }
-    }, [className])
+    }, [className, uniwindContext])
 
     useLayoutEffect(() => {
         if (uniwindState.dependencies.length > 0) {
diff --git a/packages/uniwind/src/hooks/useResolveClassNames.ts b/packages/uniwind/src/hooks/useResolveClassNames.ts
index 9150d88b..7087f92b 100644
--- a/packages/uniwind/src/hooks/useResolveClassNames.ts
+++ b/packages/uniwind/src/hooks/useResolveClassNames.ts
@@ -1,13 +1,16 @@
 import { useLayoutEffect, useReducer } from 'react'
+import { useUniwindContext } from '../core/context'
 import { RNStyle } from '../core/types'
 import { CSSListener, getWebStyles } from '../core/web'
 
 const emptyState = {} as RNStyle
 
 export const useResolveClassNames = (className: string) => {
+    const uniwindContext = useUniwindContext()
     const [styles, recreate] = useReducer(
-        () => className !== '' ? getWebStyles(className) : emptyState,
-        className !== '' ? getWebStyles(className) : emptyState,
+        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        undefined,
+        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
     )
 
     useLayoutEffect(() => {
@@ -20,7 +23,7 @@ export const useResolveClassNames = (className: string) => {
         const dispose = CSSListener.subscribeToClassName(className, recreate)
 
         return dispose
-    }, [className])
+    }, [className, uniwindContext])
 
     return styles
 }
diff --git a/packages/uniwind/src/hooks/useUniwind.ts b/packages/uniwind/src/hooks/useUniwind.ts
index 4445b7c1..f108da1f 100644
--- a/packages/uniwind/src/hooks/useUniwind.ts
+++ b/packages/uniwind/src/hooks/useUniwind.ts
@@ -1,14 +1,20 @@
 import { useLayoutEffect, useState } from 'react'
 import { Uniwind } from '../core'
+import { useUniwindContext } from '../core/context'
 import { UniwindListener } from '../core/listener'
 import { ThemeName } from '../core/types'
 import { StyleDependency } from '../types'
 
 export const useUniwind = () => {
+    const uniwindContext = useUniwindContext()
     const [theme, setTheme] = useState(Uniwind.currentTheme)
     const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)
 
     useLayoutEffect(() => {
+        if (uniwindContext.scopedTheme !== null) {
+            return
+        }
+
         const dispose = UniwindListener.subscribe(() => {
             setTheme(Uniwind.currentTheme)
             setHasAdaptiveThemes(Uniwind.hasAdaptiveThemes)
@@ -17,10 +23,10 @@ export const useUniwind = () => {
         return () => {
             dispose()
         }
-    }, [])
+    }, [uniwindContext])
 
     return {
-        theme: theme as ThemeName,
-        hasAdaptiveThemes,
+        theme: uniwindContext.scopedTheme ?? theme as ThemeName,
+        hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes,
     }
 }
diff --git a/packages/uniwind/src/index.ts b/packages/uniwind/src/index.ts
index f57b0c1c..daeba02c 100644
--- a/packages/uniwind/src/index.ts
+++ b/packages/uniwind/src/index.ts
@@ -1,3 +1,4 @@
+export * from './components/ScopedTheme'
 export { Uniwind } from './core'
 export { withUniwind } from './hoc'
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types'
diff --git a/packages/uniwind/src/metro/compileVirtual.ts b/packages/uniwind/src/metro/compileVirtual.ts
index 2947a413..1da5a7eb 100644
--- a/packages/uniwind/src/metro/compileVirtual.ts
+++ b/packages/uniwind/src/metro/compileVirtual.ts
@@ -1,9 +1,10 @@
 import { compile } from '@tailwindcss/node'
 import { Scanner } from '@tailwindcss/oxide'
+import { transform } from 'lightningcss'
 import path from 'path'
+import { UniwindCSSVisitor } from '../css-visitor'
 import { addMetaToStylesTemplate } from './addMetaToStylesTemplate'
 import { Logger } from './logger'
-import { polyfillWeb } from './polyfillWeb'
 import { ProcessorBuilder } from './processor'
 import { Platform, Polyfills } from './types'
 import { serializeJSObject } from './utils'
@@ -36,7 +37,11 @@ export const compileVirtual = async ({ css, cssPath, platform, themes, polyfills
     const tailwindCSS = compiler.build(candidates ?? scanner.scan())
 
     if (platform === Platform.Web) {
-        return polyfillWeb(tailwindCSS)
+        return transform({
+            code: Buffer.from(tailwindCSS),
+            filename: 'uniwind.css',
+            visitor: new UniwindCSSVisitor(themes),
+        }).code.toString()
     }
 
     const Processor = new ProcessorBuilder(themes, polyfills)
diff --git a/packages/uniwind/src/metro/polyfillWeb.ts b/packages/uniwind/src/metro/polyfillWeb.ts
deleted file mode 100644
index 82a04271..00000000
--- a/packages/uniwind/src/metro/polyfillWeb.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { transform } from 'lightningcss'
-import { processFunctions } from '../css/processFunctions'
-
-export const polyfillWeb = (css: string) => {
-    const result = transform({
-        code: Buffer.from(css),
-        filename: 'uniwind.css',
-        visitor: {
-            Function: processFunctions,
-        },
-    })
-
-    return result.code.toString()
-}
diff --git a/packages/uniwind/src/vite/vite.ts b/packages/uniwind/src/vite/vite.ts
index f1da16ad..31267b8f 100644
--- a/packages/uniwind/src/vite/vite.ts
+++ b/packages/uniwind/src/vite/vite.ts
@@ -3,7 +3,7 @@ import path from 'path'
 import type { Plugin } from 'vite'
 import { name as UNIWIND_PACKAGE_NAME } from '../../package.json'
 import { buildCSS } from '../css'
-import { processFunctions } from '../css/processFunctions'
+import { UniwindCSSVisitor } from '../css-visitor'
 import { uniq } from '../metro/utils'
 import { buildDtsFile } from '../utils/buildDtsFile'
 import { stringifyThemes } from '../utils/stringifyThemes'
@@ -52,9 +52,7 @@ export const uniwind = ({
             css: {
                 transformer: 'lightningcss',
                 lightningcss: {
-                    visitor: {
-                        Function: processFunctions,
-                    },
+                    visitor: new UniwindCSSVisitor(themes),
                 },
             },
             optimizeDeps: {
diff --git a/packages/uniwind/tests/consts.ts b/packages/uniwind/tests/consts.ts
index 69980a2c..e78fdeb8 100644
--- a/packages/uniwind/tests/consts.ts
+++ b/packages/uniwind/tests/consts.ts
@@ -1,3 +1,5 @@
+import { UniwindContextType } from '../src/core/types'
+
 export const TW_RED_500 = '#fb2c36'
 export const TW_GREEN_500 = '#00c950'
 export const TW_BLUE_500 = '#2b7fff'
@@ -9,3 +11,7 @@ export const SAFE_AREA_INSET_BOTTOM = 42
 
 export const SCREEN_WIDTH = 390
 export const SCREEN_HEIGHT = 844
+
+export const UNIWIND_CONTEXT_MOCK = {
+    scopedTheme: null,
+} satisfies UniwindContextType
diff --git a/packages/uniwind/tests/native/components/scoped-theme.test.tsx b/packages/uniwind/tests/native/components/scoped-theme.test.tsx
new file mode 100644
index 00000000..f3e6004e
--- /dev/null
+++ b/packages/uniwind/tests/native/components/scoped-theme.test.tsx
@@ -0,0 +1,215 @@
+import { act } from '@testing-library/react-native'
+import * as React from 'react'
+import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native'
+import { useUniwind } from '../../../src'
+import Button from '../../../src/components/native/Button'
+import View from '../../../src/components/native/View'
+import { ScopedTheme } from '../../../src/components/ScopedTheme/ScopedTheme.native'
+import { Uniwind } from '../../../src/core'
+import { withUniwind } from '../../../src/hoc/withUniwind.native'
+import { useCSSVariable } from '../../../src/hooks/useCSSVariable'
+import { useResolveClassNames } from '../../../src/hooks/useResolveClassNames.native'
+import { renderUniwind } from '../utils'
+
+describe('ScopedTheme', () => {
+    afterEach(() => {
+        Uniwind.setTheme('light')
+    })
+
+    test('Component styles', () => {
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <View className="bg-background" testID="base" />
+                <ScopedTheme theme="dark">
+                    <View className="bg-background" testID="nested-dark" />
+                    <ScopedTheme theme="light">
+                        <View className="bg-background" testID="nested-light-in-dark" />
+                    </ScopedTheme>
+                </ScopedTheme>
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('base').backgroundColor).toEqual('#ffffff')
+        expect(getStylesFromId('nested-dark').backgroundColor).toEqual('#000000')
+        expect(getStylesFromId('nested-light-in-dark').backgroundColor).toEqual('#ffffff')
+
+        act(() => {
+            Uniwind.setTheme('dark')
+        })
+
+        expect(getStylesFromId('base').backgroundColor).toEqual('#000000')
+        expect(getStylesFromId('nested-dark').backgroundColor).toEqual('#000000')
+        expect(getStylesFromId('nested-light-in-dark').backgroundColor).toEqual('#ffffff')
+    })
+
+    test('Component accents', () => {
+        const { getByText } = renderUniwind(
+            <React.Fragment>
+                <Button colorClassName="accent-background" title="base" />
+                <ScopedTheme theme="dark">
+                    <Button colorClassName="accent-background" title="nested-dark" />
+                    <ScopedTheme theme="light">
+                        <Button colorClassName="accent-background" title="nested-light-in-dark" />
+                    </ScopedTheme>
+                </ScopedTheme>
+            </React.Fragment>,
+        )
+
+        const getColor = (text: string) => StyleSheet.flatten(getByText(text).props.style).color
+
+        expect(getColor('base')).toEqual('#ffffff')
+        expect(getColor('nested-dark')).toEqual('#000000')
+        expect(getColor('nested-light-in-dark')).toEqual('#ffffff')
+
+        act(() => {
+            Uniwind.setTheme('dark')
+        })
+
+        expect(getColor('base')).toEqual('#000000')
+        expect(getColor('nested-dark')).toEqual('#000000')
+        expect(getColor('nested-light-in-dark')).toEqual('#ffffff')
+    })
+
+    test('withUniwind', () => {
+        const Component: React.FC<ActivityIndicatorProps> = (props) => <ActivityIndicator {...props} />
+        const WithUniwind = withUniwind(Component)
+
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <WithUniwind className="bg-background" testID="base" />
+                <ScopedTheme theme="dark">
+                    <WithUniwind className="bg-background" testID="nested-dark" />
+                    <ScopedTheme theme="light">
+                        <WithUniwind className="bg-background" testID="nested-light-in-dark" />
+                    </ScopedTheme>
+                </ScopedTheme>
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('base').backgroundColor).toEqual('#ffffff')
+        expect(getStylesFromId('nested-dark').backgroundColor).toEqual('#000000')
+        expect(getStylesFromId('nested-light-in-dark').backgroundColor).toEqual('#ffffff')
+
+        act(() => {
+            Uniwind.setTheme('dark')
+        })
+
+        expect(getStylesFromId('base').backgroundColor).toEqual('#000000')
+        expect(getStylesFromId('nested-dark').backgroundColor).toEqual('#000000')
+        expect(getStylesFromId('nested-light-in-dark').backgroundColor).toEqual('#ffffff')
+    })
+
+    test('useResolveClassNames', () => {
+        const base = jest.fn()
+        const nestedDark = jest.fn()
+        const nestedLightInDark = jest.fn()
+
+        const Component = (props: { test: jest.Mock }) => {
+            const { backgroundColor } = useResolveClassNames('bg-background')
+
+            props.test(backgroundColor)
+
+            return null
+        }
+
+        renderUniwind(
+            <React.Fragment>
+                <Component test={base} />
+                <ScopedTheme theme="dark">
+                    <Component test={nestedDark} />
+                    <ScopedTheme theme="light">
+                        <Component test={nestedLightInDark} />
+                    </ScopedTheme>
+                </ScopedTheme>
+            </React.Fragment>,
+        )
+
+        expect(base).toHaveBeenCalledWith('#ffffff')
+        expect(nestedDark).toHaveBeenCalledWith('#000000')
+        expect(nestedLightInDark).toHaveBeenCalledWith('#ffffff')
+
+        act(() => {
+            Uniwind.setTheme('dark')
+        })
+
+        expect(base).toHaveBeenLastCalledWith('#000000')
+        expect(nestedDark).toHaveBeenLastCalledWith('#000000')
+        expect(nestedLightInDark).toHaveBeenLastCalledWith('#ffffff')
+    })
+
+    test('useCSSVariable', () => {
+        const base = jest.fn()
+        const nestedDark = jest.fn()
+        const nestedLightInDark = jest.fn()
+
+        const Component = (props: { test: jest.Mock }) => {
+            const backgroundColor = useCSSVariable('--color-background')
+
+            props.test(backgroundColor)
+
+            return null
+        }
+
+        renderUniwind(
+            <React.Fragment>
+                <Component test={base} />
+                <ScopedTheme theme="dark">
+                    <Component test={nestedDark} />
+                    <ScopedTheme theme="light">
+                        <Component test={nestedLightInDark} />
+                    </ScopedTheme>
+                </ScopedTheme>
+            </React.Fragment>,
+        )
+
+        expect(base).toHaveBeenCalledWith('#ffffff')
+        expect(nestedDark).toHaveBeenCalledWith('#000000')
+        expect(nestedLightInDark).toHaveBeenCalledWith('#ffffff')
+
+        act(() => {
+            Uniwind.setTheme('dark')
+        })
+
+        expect(base).toHaveBeenLastCalledWith('#000000')
+        expect(nestedDark).toHaveBeenLastCalledWith('#000000')
+        expect(nestedLightInDark).toHaveBeenLastCalledWith('#ffffff')
+    })
+
+    test('useUniwind', () => {
+        const base = jest.fn()
+        const nestedDark = jest.fn()
+        const nestedLightInDark = jest.fn()
+
+        const Component = (props: { test: jest.Mock }) => {
+            const { theme } = useUniwind()
+
+            props.test(theme)
+
+            return null
+        }
+
+        renderUniwind(
+            <React.Fragment>
+                <Component test={base} />
+                <ScopedTheme theme="dark">
+                    <Component test={nestedDark} />
+                    <ScopedTheme theme="light">
+                        <Component test={nestedLightInDark} />
+                    </ScopedTheme>
+                </ScopedTheme>
+            </React.Fragment>,
+        )
+
+        expect(base).toHaveBeenCalledWith('light')
+        expect(nestedDark).toHaveBeenCalledWith('dark')
+        expect(nestedLightInDark).toHaveBeenCalledWith('light')
+
+        act(() => {
+            Uniwind.setTheme('dark')
+        })
+
+        expect(base).toHaveBeenLastCalledWith('dark')
+        expect(nestedDark).toHaveBeenLastCalledWith('dark')
+        expect(nestedLightInDark).toHaveBeenLastCalledWith('light')
+    })
+})
diff --git a/packages/uniwind/tests/test.css b/packages/uniwind/tests/test.css
index 0dfdd7bb..ca550bca 100644
--- a/packages/uniwind/tests/test.css
+++ b/packages/uniwind/tests/test.css
@@ -10,4 +10,17 @@
   --color-foo: hsl(var(--foo));
   --color-bar: oklch(var(--bar));
   --spacing-test: 123px;
+  --color-background: unset;
+}
+
+@layer theme {
+    :root {
+        @variant dark {
+            --color-background: black;
+        }
+
+        @variant light {
+            --color-background: white;
+        }
+    }
 }
diff --git a/packages/uniwind/tests/web/hoc/withUniwind.test.tsx b/packages/uniwind/tests/web/hoc/withUniwind.test.tsx
index ed41dd52..15f35552 100644
--- a/packages/uniwind/tests/web/hoc/withUniwind.test.tsx
+++ b/packages/uniwind/tests/web/hoc/withUniwind.test.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { ActivityIndicator, ActivityIndicatorProps } from 'react-native'
 import * as webCore from '../../../src/core/web'
 import { withUniwind } from '../../../src/hoc/withUniwind'
-import { TW_BLUE_500, TW_RED_500 } from '../../consts'
+import { TW_BLUE_500, TW_RED_500, UNIWIND_CONTEXT_MOCK } from '../../consts'
 
 const Component: React.FC<ActivityIndicatorProps> = (props) => <ActivityIndicator {...props} />
 
@@ -42,7 +42,7 @@ describe('withUniwind', () => {
 
         render(<AutoWithUniwind colorClassName="accent-red-500" testID="test-component" />)
 
-        expect(mockGetWebStyles).toHaveBeenCalledWith('accent-red-500')
+        expect(mockGetWebStyles).toHaveBeenCalledWith('accent-red-500', UNIWIND_CONTEXT_MOCK)
 
         const receivedProps = ComponentWithSpy.mock.calls[0][0]