Bringing Dark Theme to Medium in Chrome

GaNeShKuMaRm — Fri, 29 Jan 2021 14:40:23 +0000

I remember myself running the same script in my Chrome Console. Thanks to Chrome Dev Tool Snippets, now you can save and run your favorite and frequently used code snippets on any site in Chrome. The good thing is that these snippets are aware of the Javascript Context of the page.

For this article, I wrote a script that will bring Dark Theme to Medium web.

First, we add the above snippet in Chrome and see if it is working.

Open Chrome Dev Tool by pressing Ctrl + Shift + Ins or Right-click and select Inspect.
Click on the Sources Tab. You can see a list of options on the left like Page, Filesystem, Overrides, etc.
Click the » button and select Snippets.
Now click New snippet to add a snippet. Give a meaningful name to the snippet. I am giving mine darkTheme.
Now copy the below code from the gist and paste it in the editor. Now press Ctrl + S to save the changes
Open any medium article and open the snippet by following the above steps.
Right-click on the snippet and select Run
Voila, Now you can read Medium articles with Dark Theme.
My article with and without Dark Theme

Conclusion

And there you have it, your Medium in Dark Theme. Currently, Chrome doesn't have an option to run the script automatically but I hope we get the option in the future. Thank you for reading, I hope you found this article helpful!

Linkedin | Github

Minimal Switch in Flutter

GaNeShKuMaRm — Fri, 29 Jan 2021 14:29:42 +0000

In this article, we are going to create a minimal custom Switch Widget in Flutter. Flutter provides a built-in Switch Widget which looks simple. We are going to create our own Flat Style switch widget.

The switch has two parts:

The base
The knob

We will start writing code for the base and the knob separately.

Base

The base is nothing but the background of the switch which is in a rounded rectangle shape.

AnimatedContainervis used instead of the container because we are going to add animations when the switch is turned ON and OFF.
widget.value holds either true or false which represents whether a switch is ON or OFF respectively

The Knob

The knob is the circular button inside the base that we use to toggle the state of the switch.

AnimatedAlign is used to animate the movement of the switch when the user clicks it.

The final output looks as follows:

Take a look at the below Gist to view the full code with functionality:

Wrapping Up

Well, that’s everything! It’s a short and sweet tutorial but I hope you found it helpful.