- Last updated: July 31, 2023 (Strapi v4 era)
- 2 min read
Strapi Dark Mode is live
Come to the dark side: Strapi Dark Mode is now available for all users. Change the light and dark modes in one click, at any moment. Have a look at the darker side of Strapi 🌚
Why go darker?
The Dark Mode is one of the most requested features by the Strapi Community. You can now choose what mode you want to use - the light one, or the dark one, and easily switch it in user-level settings.
Why is the new Dark Mode worth a try? First of all, it looks cool, no doubt of that 😎 But there are other reasons why our team decided to deliver it:
Readability: using a dark mode may reduce eye fatigue and has a soothing effect. The Dark Mode can be used for longer reading periods or in a poorly lit environment.
Sustainability: Dark Mode saves energy consumption on devices with certain types of displays.
We made a lot of efforts to make it more accessible for people with special needs by providing high color contrasts. More improvements are coming soon to make the user experience even better.
The mode defaults to your browser settings, meaning that at first, it will be the same as your browser mode. You can instantly switch between Dark and Light in the user-level application settings (User Profile tab) and choose another mode anytime. Life is great when you have choices, isn't it?
The Dark Mode is also a part of the Strapi Design System. We needed a dark mode that could work for any application made with Strapi and every plugin that you could imagine.
It is also a foundation for mode advanced and custom themes that we'll work on in the future (by the way, if you have any ideas, let us know!)
How to get the Dark mode?
The Dark Mode is available in the latest v4.1.6 version of Strapi. If you're using an older Strapi v4 version, upgrade to the latest one to get the feature. If you're using Strapi v3, follow this migration guide to update your project to v4.
Follow the Dark Mode documentation and user guide to learn how it works.
If you're new to Strapi, just run the following command in a terminal:
npx create-strapi-app my-project --quickstart
To get started with Strapi, follow the Quick Start Guide for detailed step-by-step instructions or have a look at a video instruction:
Our team hopes that you enjoy this upgrade! Let us know what you think about it on Twitter and on the Strapi forum 😁