Skip to content

Netlify CMS Dark Mode! A simple CSS file to turn on dark mode for your Netlify CMS.

License

Notifications You must be signed in to change notification settings

Nats-ji/netlify-cms-dark-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Netlify CMS Dark Mode Theme

What is this?

This is a simple CSS file that you can add to your Netlify CMS's HTML file.

It automatically toggles your Netlify cms to dark mode if your system is also set to dark mode.

You can view the demo site here.

image

Who is this for?

This is mainly for people who install the Netlify CMS with javascript from the CDN. Since there are more limitations with customization.

But you can also use this with the npm installation method. However, it's better to write a separate package.

How to use?

Method 1. Use CDN

Pull dark.css from a public cdn, so it will keep up-to-date. https://cdn.jsdelivr.net/gh/Nats-ji/netlify-cms-dark@master/dark.min.css

  • Edit your Netlify CMS's HTML code:

      </body>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nats-ji/netlify-cms-dark-mode@master/dark.min.css">
    </html>

Method 2. Download

This method gives you more flexablity for making customizations.

  1. Download dark.css, and copy it to your site.

  2. Open your Netlify CMS's HTML file.

  3. Link dark.css behind the </body> tag.

      </body>
      <link rel="stylesheet" href="./dark.css">
    </html>

You can check the demo HTML source code here.

Change theme color?

  • Just edit the css vars in dark.css!

    :root {
      --body-bg-color: black;
    }
  • If you want always dark mode instead of following the system's setting. You can remove the following code from dark.css:

    @media (prefers-color-scheme: dark) {
    
    }

Something is wrong?

You are welcome to make a Pull Request to fix any bugs or make any improvements.

Sponsor this project

Languages