![\"Explaining](\"\/wp-content\/uploads\/2020\/04\/amanda-dalbjorn-UbJMy92p8wk-unsplash-1320x880.jpg\")
<\/figure>\n\n\n\nHuman pupils are sensitive to light. Same as our light sensors on our mobile devices. They increase and decrease screen brightness based on the light in the environment. Our pupils also contract and dilate based on light.
When the pupils are contracted you can see things clearer. As we age, the contracted pupils have less diameter to allow light inside, which affects our ability to read the text.<\/p>\n\n\n\n
As a savior in dark armor and as a sign of growing old, dark mode comes to rescue. It is time to make our websites dark mode compatible and help users access information better.<\/p>\n\n\n\n
Dark mode with CSS media query<\/h2>\n\n\n\n
CSS comes with many amazing features to style our website. One such feature is This works same as responsive media queries. At first you will be writing your CSS styles as usual and overwrite the selector when the condition matches.<\/p>\n\n\n\n In the above code, we have some CSS styling for body, background color as white and text color as black. When the dark mode preferences are detected we are switching the styles, background color as black and text color as white.<\/p>\n\n\n\n This seems straight forward when it comes to monochromatic color. But when it comes brand colors, You have to design your brand accent into it.<\/p>\n\n\n\n Here is another example. In this example, we will have a card with heading and paragraph changing colors as we change our system preferences.<\/p>\n\n\n\n If you notice closely, we have two headings and we are hidding them based on the mode.<\/p>\n\n\n\n Add we have our CSS, here am using CSS variables<\/a> for handling colors.<\/p>\n\n\n\n Now try switching your appearance settings from light to dark mode vice versa.<\/p>\n\n\n\n \n See the Pen \n Dark mode example for W3Layouts article<\/a> by Hidayath (@w3hidayath<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\nprefers-color-scheme<\/a><\/code><\/strong>. it is used to detect user’s system preferences and style the website based on that.<\/p>\n\n\n\n@media (prefers-color-scheme: dark) {\n\n \/* CSS related to dark mode goes here *\/\n\n}<\/code><\/pre>\n\n\n\nbody {\n background-color: white;\n color: black;\n}\n\n\/* Detecting dark mode *\/\n@media (prefers-color-scheme: dark) {\n\n body {\n background-color: black;\n color: white;\n }\n\n}<\/code><\/pre>\n\n\n\n<div class=\"card\">\n <h1 class=\"visible dark\">Dark Mode<\/h1>\n <h1 class=\"visible light\">Light Mode<\/h1>\n <p>Take a look at our article on implementing dark mode with css and why you should add it to improve accessability for your users.<\/p>\n <a href=\"\/articles\/adding-darkmode-to-website\/\">Learn more \u00bb<\/a>\n<\/div><\/code><\/pre>\n\n\n\n\/* Default color variables *\/\n:root {\n --bg: #eee;\n --text-color: rgba(0,0,0,0.9);\n --card-bg: #fff;\n --primary-color: blue;\n}\n\n\/* Some styling for the layout *\/\nbody {\n background-color: var(--bg);\n color: var(--text-color);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\na {\n color: var(--primary-color);\n text-decoration: none;\n}\n.card {\n margin: 40px 40px;\n padding: 40px;\n line-height: 1.5;\n border-radius: 9px;\n background: var(--card-bg);\n text-align: center;\n max-width: 54ch;\n}\n.card h1 {\n margin-top: 0;\n}\n.visible {\n color: var(--primary-color);\n}\n.light { display: block; }\n.dark { display: none; }\n\n\/* Styling for Dark mode *\/\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: #111;\n --text-color: rgba(255,255,255,0.77);\n --card-bg: #222;\n --primary-color: pink;\n }\n .light { display: none; }\n .dark { display: block; }\n}<\/code><\/pre>\n\n\n\n