• Products
  • Resources
  • Blog
  • Contact

How to use the Dark Reader Pro Plugin On Your Site

  • BdThemes
  • How to use the Dark Reader Pro Plugin On Your Site

Table Of Contents

How to use the Dark Reader Pro Plugin On Your Site

In this documentation, we will show you how to install and activate the Dark Reader pro plugin and how to customize the plugin to achieve 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 Pro Plugin?

You can easily find and download the Pro plugin from your Bdthemes account. Don’t worry about it. just follow the instructions below to download the Pro version of the plugin.

If you already have a Bdthemes account, simply log in and download the latest version of the plugin. Or, if you don’t have a Bdthemes account yet, follow these steps:

  1. Go to – https://account.bdthemes.com/
  2. First, register using the email you used for the purchase, then log into your account.
  3. You will find your Pro plugin in the Products section. Inside that section, click on Dark Reader > click Download Files > and download the Pro plugin.

How to Install and Activate the Pro Plugin?

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

Dark Reader pro

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

image 1 - BdThemes

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

image 2 - BdThemes

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

image 3 - BdThemes

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

Note: The Dark Reader Pro plugin required the Dark Reader Free version and that’s why you need to install the free version in the same procedure.

Activate the Pro Plugin With License Key

license - BdThemes

To activate the Pro plugin with your license key, just follow the below instructions-

  1. Go to the license tab section.
  2. Keep your license key and email inside the license info field.
  3. Click the activate button.

After doing that, your pro plugin will activate.

Let’s Start to Customize the 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.

Lets Explore the General Settings Section

Come to the General Settings section, you will get four tabs ( Like- Appearance, Toggle Button, Advanced, and Colors) section to customize the appearence of the plugin.

General Settings - BdThemes

Apperence Tab Section

Apperence Tab Section

1. 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.

2. 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

Toggle Button Tab Section

1. Toggle Button 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.

Toggle Button2 - BdThemes

2. Toggle Button Style: Come to the Toogle button style section, you will get some ready made free 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.

Toggle Button style - BdThemes

Pro Styles: Here you get some Pro styles like – Modern Slider, Text Toggle, FlipFlop Toggle, iOS Toggle, and iOS Toggle Icon. Here we select the iOS Toggle Icon. Please take a look the below screenshot-

Toggle Button style2 - BdThemes

Advanced Tab Section

Advanced Tab Section

1. Advanced Tab: Come to the Advanced tab section, you will get the below customization options-

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

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

Apply Immediately: Apply dark mode to dynamic content immediately.

Advanced 2 - BdThemes

2. Advanced Filters: Come to the Advanced Filters section, you will get the below customization options-

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

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

Colors - BdThemes

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.

image 5 - BdThemes

Explore the Premium Features of Dark Reader

Custom CSS Tab Section

Custom CSS Tab Section

1. Enable Custom CSS: Enable this to apply your custom CSS when dark mode is active. Add custom CSS that will be applied only when dark mode is active. Perfect for fine-tuning specific elements or adding your own dark mode styles.

Custom Css2 - BdThemes

2. CSS Templates: Here we added some css templates for examples. If you want then you can choose one of them. After selecting the templates, just click over the insert template button to input it inside the input box.

Custom Css3 - BdThemes

3. Beautify CSS: The “Beautify CSS” button automatically formats and organizes your inputted CSS code, making it cleaner, more readable, and easier to manage.

Exclusions Tab Section

Exclude specific elements from dark mode transformation. This is especially useful for logos, images, or any elements that need to maintain their original colors and appearance regardless of the theme.

Exclusions Tab Section

1. CSS Selectors: You can exclude elements from dark mode by targeting them with specific CSS selectors, as shown in the examples below. This allows you to precisely control which parts of your site remain unaffected by dark mode styles.

Exclude2 - BdThemes

2. Image Exclusions: By enabling the Image Exclusions switch, you can exclude all images from dark mode transformations, ensuring they retain their original appearance.

3. Logo Images: You can also exclude logo images by using CSS selectors. For multiple logo selectors, separate them with commas.

Exclude3 - BdThemes

4. CSS Filters for Images: By enabling the CSS Filters for Images option, custom CSS filters will be applied to all images. Below is a short description of each available filter:

  • Enable CSS filters for images: Toggle to activate or deactivate CSS filters on images.
  • Brightness: Adjust the brightness level of images (0% to 100%+).
  • Contrast: Modify the contrast intensity of images.
  • Saturation: Control the color saturation of images.
  • Hue Rotate: Rotate the hue to change the overall color tone.
  • Blur: Apply blur effect to images.
  • Grayscale: Convert images to grayscale by reducing color information.
  • Sepia: Add a warm, brownish tone for a vintage look.
  • Invert: Invert the colors of images.
  • Opacity: Adjust the transparency level of images.
  • Reset All Filters: Restore all filter settings to their default values.

5. Live Preview: You can check the changes of CSS filters in real-time by using the Live Preview option.

Exclude5 1 - BdThemes

6. Video Exclusions: By enabling the Video Exclusions switch, you can exclude all videos from dark mode transformations, ensuring they retain their original appearance.

7. CSS Filters for Videos: By enabling the CSS Filters for Videos option, custom CSS filters will be applied to all Videos. Below is a short description of each available filter:

  • Enable CSS filters for Videos: Toggle to activate or deactivate CSS filters on Videos.
  • Brightness: Adjust the brightness level of videos (0% to 100%+).
  • Contrast: Modify the contrast intensity of videos.
  • Saturation: Control the color saturation of videos.
  • Hue Rotate: Rotate the hue to change the overall color tone.
  • Blur: Apply blur effect to videos.
  • Grayscale: Convert videos to grayscale by reducing color information.
  • Sepia: Add a warm, brownish tone for a vintage look.
  • Invert: Invert the colors of videos.
  • Opacity: Adjust the transparency level of videos.
  • Reset All Filters: Restore all filter settings to their default values.

8. Live Preview: You can check the changes of CSS filters in real-time by using the Live Preview option.

Schedule Section

Schedule Section

After Enabling the Schedule switcher button, You will get some option to schedule the dark mode. Lets explore the options-

1. Schedule Type: This option lets you select the schedule type for the dark mode. Here you will get this type scheduling option- Time Based, System Preference, and Sunset/Sunrise.
Here we select the Time Based Scheduling option.

Start Time: This option lets you set the start time of scheduling.

End time: This option lets you set the end time of scheduling.

Scedule2 - BdThemes

2. System Preference: Dark mode will automatically follow your operating system’s dark mode setting.

3. Sunset/Sunrise: Dark mode will automatically activate based on real sunset and sunrise times for your location.

Page Visibility Controls Section

Page Visibility Controls Section

Visibility Mode: This option lets you select the visibility mode for the dark mode reader. Here you will get this selecting options – Show on all pages, Show only on selected pages, Hide on selected pages, Hide on all pages.

1. Show on all pages: If you select the visibility mode show on all pages then the Dark Mode will be applied across all pages of your site.

Page visibility 2 - BdThemes

2. Show only on selected pages: By selecting the Show only on selected pages option, you can show the dark mode only selected pages as like the above screenshot.

Page visibility 3 - BdThemes

3. Hide on selected pages: By selecting the hide on selected pages option, you can hide the dark mode only selected pages as like the above screenshot.

Page visibility 4 - BdThemes

4. Hide on all pages: If you select the visibility mode hide on all pages then the Dark Mode will be disappear across all pages of your site.

Admin Dark Mode Section

Admin Dark Mode - BdThemes

1. Enable Admin Dark Mode: If you enable the admin dark mode swicther button then it apply dark mode to WordPress admin dashboard. Just follow the above screenshot.

2. Admin Brightness: Adjust admin interface brightness (50% – 150%) from here.

3. Admin Contrast: Adjust admin interface contrast (50% – 150%) from here.

4. Auto detect user preference: If you enable the switcher button then Automatically enable admin dark mode based on user’s system preference.

Help & Support Tab section

Help and Support1 - BdThemes

1. 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 

.

image 6 - BdThemes

2. 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 above screenshot.

Help and Support2 - BdThemes

3. Common Issues: From here you will get some knowledge about common issues. Like – Toggle button not showing, Caching issue, Image looks strange etc.

4. Need Help?: A highlighted box with a Contact Support button so you can reach the support 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. Just take a final look below-

final look - BdThemes

Video Assist

Please check the video to learn more about the plugin feature. Thanks for staying with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge