What Is Dark Mode?
Dark mode is a trend in technology that is set to make a huge impact in the future. This type of colour scheme typically focuses on making the products and devices more intuitive and accessible for everyone.
This that allows a user to switch between a light and dark theme on their device. When the switch button is clicked, the background of the screen becomes black and text becomes white and vice versa in the light mode.
Why add Dark Mode in website?
When you use a bright and colourful interface, it can be difficult to concentrate and work on a project for hours. As a result, this new design trend that has caught fire in the past few years.
The basic idea is to create an experience that is easier on the eyes. There are many ways to achieve this effect, but one of the most popular methods has been to swap out white backgrounds for black ones.
8 Important Dark Mode Practices
Today, while I was scrolling through Instagram, I found this insightful post of Dark Mode from Dmitriy Bunin (You can follow him for great UI/UX tips)
1) Avoid Pure Dark Colours – Never use pure dark colour like #000. It can add eye strain for your users, making it uncomfortable to read your site content. Better use a dark grey to give the rich look
2) Avoid Highly Saturated Colours – High saturating colours can be distracting and can cause dis-comfort when scrolling through your site. To provide better user experience make every colours soft or with lesser intensity
3) Make Sure Text Colour is Eligible – Text plays a key role for your site, to comply with W3C accessibility, use bright clear text font and colours so that it’s easier for your site readers
4) Brand your Dark Colours – It’s not always important to select grey shades, you can also use colours like dark blue and create your brand’s unique shade to make it special
5) Use Multiple Dark Shades – Using multiple shades of same colour in different opacity to show depth level in your designs
6) Start Designing with Light Mode – It’s always better to design light mode first so that you get your design hint, which you can invert in your dark mode. As said, distant elements should be darker and close should be light.
This Instagram post has shared some immense value, which I thought you would love to know for the perfect dark mode. Now let’s learn, How to add Dark Mode on your Gutenberg site.
To achieve Dark Mode on your site, we will use one of the most powerful Gutenberg Blocks – The Plus Blocks for Gutenberg Block Editor. With more than unique 70+ Customizable blocks, you get Dark Mode block with it.
[bctt tweet=” Adding Dark Mode to Gutenberg sites, give the fantastic premium look and feel. See how I added Dark Mode using The Plus Blocks for Gutenberg.”]
We will need the Pro version to unlock the Dark Mode block, (Get 70+ blocks at just $39) which works with any Theme.
1) Turning on the Dark Mode block from Dashboard
Don’t worry, you don’t have to strain your eyes finding the dark mode blocks in our huge block library, simply type dark mode in search bar. After which you will see the block, and turn the toggle switch on, which will activate the block site wide.
2) Setting the Global Colours for site-wide Dark Mode – Light Mode shades
Now, here, we have to set global colour alternatives for the dark mode. This gives the Dark Mode toggle switch indiction for colour, it will change when either of the light or dark mode is selected.
For this to work, I would always suggest to you to use Global colours site wide for all elements, be it typography colour to background colours. This makes the job easy for creating colour presets for dark mode.
You will find the global colours setting with plus symbol on top-right corner, which is called Plus customizer
Now here you will see Present 1 which is your default colour shade you used on your site. This can also be called light mode theme. This will be selected as your Active with a green check on the bar.
To add your dark mode alternatives for each of these shade, click on add present, and to make it prominent, name this Dark Mode. Now before changing any colour click on the settings gear and click Dark Mode to set this as your switch’s alternative colour.
Let’s proceed with changing the colours, please remember in dark mode we can only change Global colours Global Box shadow, Global typography and spacing doesn’t affect.
Always keep same no of shades in preset 1 and dark mode present so that there’s alternative for each one of them. If you wish to keep them unaffected, keep it the same colour as present 1. Once done, click on Save present, and we are ready to add the Dark Mode block to our site.
To show Dark mode on single page, add that on that individually page, but to show this site wide, we have to keep in header or footer of the site, which will be fixed in one corner of your site.
2) Editing the Dark Mode Block Settings
To begin with just search for the block or type /darkmode to get the block and hit enter.
After this, we will see the layout settings, which shows multiple styles of the dark mode switch button, currently we have 3 unique styles of the button.
On top of which, you can upload custom icons for buttons in style 3 and background image for the complete button.
The next settings, ‘Save in cookies’ stores the user’s selection of the light or night mode and automatically opens the site in the same colour tone whenever he revisits your site. This makes the user experience easier so that they don’t have to change modes everytime they visit your websites.
Similarly, the ‘Auto- Match OS theme‘ does the magic of identify the mode from the user’s mobile or desktop device preference and applies the mode automatically on your website
Then, lastly, the position settings give you controls to set the positioning of the dark mode switcher at any specific position on your website. After all these you can move to the style tab to customize the colours, font type, size, and everything of your switcher to match your brand look and feel.
3) Setting Global Colours for any Section or Text in Dark Mode Colours
After all the above steps, we have to assign the correct global colours to other blocks on your site.In our current example, we will change the background colour of TP Row block to select one of the global colours of Present 1 i.e. Light Mode.
End Note
Today, we learned how to add premium dark theme mode to your WordPress site on its default block editor, Gutenberg. If you wish, do the same thing on Elementor, check this tutorial blog here.
Hope this adds immense value to your site’s look and feel. If you have any questions or suggestions, feel free to share in comments or reach us at messenger on our live site.
