Light and Dark SVG Layer Styling with Nativewind #732
tyrauber
started this conversation in
Show and tell
Replies: 1 comment
-
Ok. Let's take this concept a step further. How about a single SVG for both light and dark mode using the dark variant to control rendering:
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Just stumbled upon something really cool with Nativewind V4 SVG styling.
Let's say you've have an .svg with multiple layers - circle, rect, path - and you want to style the layers differently for light and dark mode (or any other class variants for that matter). SVG Layers accept a class property, so you can edit the SVG with some classes, for example:
Add some styling to your
global.css
:In your layout you can globally apply
cssInterop
to the SVG layers:And then in your View, import the SVG.
BAM! Custom css styling of an SVG on a layer by layer basis, with light and dark mode.
Note: This requires
react-native-svg
andreact-native-svg-transformer
with some modifications to metro.config.jsPretty damn convenient.
Edit: Sorry, missed one step. You need to add
svg
to the tailwind.config content path.Beta Was this translation helpful? Give feedback.
All reactions