• Last updated: July 31, 2023 (Strapi v4 era)
  • 2 min read

Strapi Dark Mode is live

Strapi v4

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 🌚

tweet selection
dark mode blog post cover.png

    • Get Started

      Simply copy and paste the following command line in your terminal to create your first Strapi project.

      npx create-strapi-app
my-project

      • Strapi Cloud

      Deploy your Strapi project in few minutes.

    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.

    ezgif.com-gif-maker.gif

    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? 

    dark mode home

    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 😁

    tweet selection

      • Strapi Cloud

      Deploy your Strapi project in few minutes.

    Software engineer @strapi