DEV Community

Cover image for I created a universal theme switcher widget compatible with my SASS framework
Jaden Concord
Jaden Concord

Posted on

1

I created a universal theme switcher widget compatible with my SASS framework

<script src="path/to/themewidget.js" charset="utf-8"></script>
Enter fullscreen mode Exit fullscreen mode

That's all the code it now takes for me to add a theme switcher widget on any of my projects using my custom SASS Theme Frameworks.

You can demo it on my personal page which is a work in progress. The widget is on the bottom-right edge of the page.

It supports a couple of different theme options which I will later add more of. It also has 4 different theme varients to choose from which effect the dark or light theme type.

It works by fetching SCSS resources and SCSS.js to compile to a CSS file. It is far from optimized but it works with only a couple of seconds of delay to update the theme. It also uses the local storage API to store the theme and update it on page load. I eventually want to store the theme across every domain using the widget so it will be like a universal theme.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay