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:
- Go to – https://account.bdthemes.com/
- First, register using the email you used for the purchase, then log into your account.
- 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.
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 pro 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.
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
To activate the Pro plugin with your license key, just follow the below instructions-
- Go to the license tab section.
- Keep your license key and email inside the license info field.
- Click the activate button.
After doing that, your pro plugin will activate.
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.
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
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.
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.
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-
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.
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
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.
Explore the Premium Features of Dark Reader
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.
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.
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.
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.
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.
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.
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.
Dark Mode Images Replacement Guide
Dark Mode image replacement is available in the Pro version. It allows you to display a different alternative image in dark mode instead of the light mode image. Simply follow the steps below to configure it.
- Go to your WP dashboard > Media.
- Find and select the Light Mode image that you want to replace or show in the Dark Mode.
After selecting the light mode image, just click on the Select Dark Mode Image button to choose the dark mode image.
After click on the Select Dark Mode Image button, Just follow the below steps-
- Choose the replacement image that you want to display instead of the Light Mode image.
- Click on the Select Dark Mode Image button.
After selecting the replacement image, the final image preview will appear as shown in the screenshot below.
Before Replacing the Light Mode Image
After Replacing the Light Mode Image
In the Dark Mode view, the light mode image successfully replaced or changed.
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.
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
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.
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.
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.
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
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
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 .
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.
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-
Video Assist
Please check the video to learn more about the plugin feature. Thanks for staying with us.
