Dark Mode Variable Mapper
Dark Mode Variable Mapper
Dark Mode Variable Mapper
This started as a real bottleneck on our team. We were rolling out dark mode for the Nextwave learning portal, and while our newer designs used Figma variables properly, we had a backlog of older screens hardcoded with light mode hex values. Retrofitting each one manually — opening the screen, finding the right variable, reassigning it — would have eaten weeks of developer time.
This started as a real bottleneck on our team. We were rolling out dark mode for the Nextwave learning portal, and while our newer designs used Figma variables properly, we had a backlog of older screens hardcoded with light mode hex values. Retrofitting each one manually — opening the screen, finding the right variable, reassigning it — would have eaten weeks of developer time.
This started as a real bottleneck on our team. We were rolling out dark mode for the Nextwave learning portal, and while our newer designs used Figma variables properly, we had a backlog of older screens hardcoded with light mode hex values. Retrofitting each one manually — opening the screen, finding the right variable, reassigning it — would have eaten weeks of developer time.
To solve this, I used Claude Code to build a lightweight HTML tool. I shared our complete color token JSON with Claude, explained the property-level variable structure we'd set up in Figma (text, background, border, icon, action), and described the developer workflow we needed. Claude generated the full tool in one shot, which I then hosted on GitHub and shared internally.
To solve this, I used Claude Code to build a lightweight HTML tool. I shared our complete color token JSON with Claude, explained the property-level variable structure we'd set up in Figma (text, background, border, icon, action), and described the developer workflow we needed. Claude generated the full tool in one shot, which I then hosted on GitHub and shared internally.
To solve this, I used Claude Code to build a lightweight HTML tool. I shared our complete color token JSON with Claude, explained the property-level variable structure we'd set up in Figma (text, background, border, icon, action), and described the developer workflow we needed. Claude generated the full tool in one shot, which I then hosted on GitHub and shared internally.
The tool itself is simple but useful: a developer enters a hex code, picks the property type, and immediately sees the corresponding light mode variable and the dark mode variable they need to apply. It's a small thing, but it cut a tedious manual task down to seconds — and it's a nice example of using AI to build internal tooling around real, specific design system constraints.
The tool itself is simple but useful: a developer enters a hex code, picks the property type, and immediately sees the corresponding light mode variable and the dark mode variable they need to apply. It's a small thing, but it cut a tedious manual task down to seconds — and it's a nice example of using AI to build internal tooling around real, specific design system constraints.
The tool itself is simple but useful: a developer enters a hex code, picks the property type, and immediately sees the corresponding light mode variable and the dark mode variable they need to apply. It's a small thing, but it cut a tedious manual task down to seconds — and it's a nice example of using AI to build internal tooling around real, specific design system constraints.
Live Website
https://guruprakash43.github.io/Token-Identification-Tool
Connect with me for a speaking engagement?
Connect with me for a speaking engagement?
Reach out to me for collaborations, inquiries, or just to say hello.
Reach out to me for collaborations, inquiries, or just to say hello.
Connect with me for a speaking engagement?
Reach out to me for collaborations, inquiries, or just to say hello.
Join My Newsletter
Join My Newsletter
Join My Newsletter
Get exclusive content and become a part of the Design Community!
Get exclusive content and become a part of the Design Community!
Get exclusive content and become a part of the Design Community!
I would be really excited to have you on board!
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer, All Rights Reserved © 2025 Guruprakash.
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer, All Rights Reserved © 2025 Guruprakash.
Let's Be Friends
Feel Free to Hit Me Up!
I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.
Crafted with ❤️ on Framer
All Rights Reserved © 2025 Guruprakash.