In this documentation, we will show you how to install and activate the Dark Reader plugin and how to customize the plugin to acheive your goals.

Why use the Dark Reader Plugin?

The Dark Reader transforms your WordPress site with a beautiful, customizable dark mode experience. Give your visitors the option to browse your content in a comfortable dark theme that reduces eye strain and saves battery life on mobile devices.

Where You Can Find the Dark Reader Plugin?

You easily find and download the plugin from WordPress.org site. Don’t worry about it. We attached the download link here. Just visit and download the plugin from here.

How to Install and Activate the Plugin?

To use the Dark Reader plugin, you need to install and activate it first. Just follow the below steps properly to install and activate the plugin.

Go to your WP dashboard > Plugins > Click over the Add Plugin option.

After that, you will get the plugin upload option and click the Upload plugin button.

From here, just choose the plugin zip file and click the install now button. After that the plugin installtion processing.

After installation, you will get the plugin active option. Just click the Activate plugin button to activate your plugin.

Let’s Start to Customize the Plugin

After activating the plugin, you will get the plugin customization option (Dark Reader) under the WP settings option. When you click over the Dark Reader button then the customization widzard will appear.

Come to the Dark Reader plugin dashboard, you will get the 5 tabs section to customize the appearence of the plugin as like in the below screenshot.

Appearance Tab Section

Come to the Appearance Tab section, you will get the below customization options-

1. Short Code: The short code feature allows you to set the Dark Reader toggle button any where on your page. Just copy the short code and paste inside the Elementor shortcode widget where you want to see the dark reader toggle button. As like the below screenshot.

Dark Mode

2. Dark Mode: If you enable the Dark Mode switcher button then your fontend page/website shows dark theme by default for your all visitors when they visit your website.

3. Brightness and Contrast: You can set the brightness and contrast to your working demand.

• Brightness – fine‑tune overall luminance in dark mode (50 % – 150 %).
• Contrast – sharpen or soften element edges by adjusting contrast (50 % – 150 %).
• Sepia – Apply sepia filter (0% – 100%).
• Grayscale – Add grayscale effect (0% – 100%).

Toggle Button Tab Section

1. Position: You can set the Toggle button position – Top Left, Top Right, Bottom Left, and Bottom Right. Here we set the Toggle button position – Bottom Right.

2. Toggle Button Style: Come to the Toogle button style section, you will get some ready made icon styles. As like – Default, Round, Switch, Toggle, and Minimal. Just select any one of them and go to your fontpage to check the changes. As like in the below screenshot.

Advanced Tab Section

Come to the Advanced tab section, you will get the below customization options-

1. Use System Color Scheme: Enable the switcher button to use the system color scheme.

2. Enable for PDFs: Apply dark mode to embedded PDF files/documents.

3. Apply Immediately: Apply dark mode to dynamic content immediately.

4. Filter Mode: You can set the Filter mode type- Dimmed Mode and Dark Mode. Here we select the Dark Mode.

5. Text Stroke: You can set the Text Stroke from here for the website contents when you visit the website in dark mode.

Colors Tab Section

1. Background Color: This option lets you set the background color for the dark mode from here.

2. Text Color: This option lets you set the Text color for the dark mode from here.

Help and Support Tab section

This section gathers everything you need to troubleshoot or learn the plugin in one place:

• Documentation:
  • How to Use the Shortcode: From here you will get a knowledge about the shortcode feature and how can you use it on your page by using the shortcode [dark_reader_toggle].
• Common Issues: From here you will get some knowledge about common issues. Like – Toggle button not showing, Caching issue, Image looks strange etc.
• Need Help?
  A highlighted box with a Contact Support button so you can reach the team directly.
• Save Settings:Click the Save Settings action button at the bottom to keep any changes you make.

All done! You have successfully customized the Dark Reader Plugin on your website.

Video Assist

The demo come soon and i hope the video will help you to learn more about it. Thanks for staying with us.