DEV Community

Burke Holland
Burke Holland

Posted on • Originally published at burkeholland.github.io on

6

How to switch themes in VS Code based on the time of day

It’s a good idea to switch between dark and light mode depending on what time of day it is. During the day when your body is more awake, it might make more sense to use a light theme where reading comprehension is better. At night, your eyes become more tired and bright screen light can be harder on your tired eyes.

Visual Studio Code doesn’t do this out-of-the-box, but just like Steve Jobs once said, “There’s an extension for that”.

Theme Switcher Extension

The Theme Switcher Extension for VS Code will let you define times of the day at which to apply a different theme.

Open the settings.json file and add in the themeswitcher.mappings property which takes an array of time and theme combinations. The theme will take affect at the designated time (24 hour format). Here’s mine…

"themeswitcher.mappings": [
  {
    "time": "06:00",
    "theme": "GitHub Light"
  },
  {
    "time": "17:00",
    "theme": "GitHub Dark"
  }
]
Enter fullscreen mode Exit fullscreen mode

You can have as many of these “change points” as you like. Change themes every hour if that makes you happy.

Last, make sure you set the “utcOffset” property in settings.json to account for your time zone. The extension doesn’t do that autmoatically. I’m Central Standard Time which is UTC - 6.

"themeswitcher.utcOffset": -6
Enter fullscreen mode Exit fullscreen mode

You can find your UTC offset based on timezone here.

Now VS Code will switch themes automatically based on the time of day. It’s not light theme vs dark theme, it’s enjoying the best of both worlds.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
heymich profile image
Michael Hungbo

Never knew there's an extension for that! Thanks for sharing!

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

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

Okay