StackOverflow announces dark mode on Twitter ( Large preview)Ī few days before the writing of this article, StackOverflow announced its release of dark mode, giving users the chance to toggle between the two modes.ĭark mode reduces eye strain and helps when you’re working for a long time on a computer or mobile phone.
This tutorial will benefit those who are looking to enhance their web applications by catering to those who love dark mode. While we won’t go in depth into React and styled-components, a basic knowledge of React, CSS, and styled-components would come in handy. Most major companies (such as YouTube, Twitter, and Netflix) have adopted dark mode in their mobile and web apps. From mobile to web apps, dark mode has become vital for companies that want to take care of their users’ eyes.ĭark mode is a supplemental feature that displays mostly dark surfaces in the UI. We see dark mode in the apps that we use every day.
#Dark mode switch icon software
One of the most commonly requested software features is dark mode (or night mode, as others call it). We will also discuss the pros and cons of dark mode and why it should be adopted.
#Dark mode switch icon how to
In this article, we’ll learn how to efficiently implement dark mode in a React app on a simple web page, using the styled-components library and leveraging some React features like hooks. However, in modern development, we have seen how dark mode, which displays light text and interface elements on a dark background, is quickly becoming a user preference. Doing it this way just means that only one of the squares has the colored inner circle.Light mode is a convention in most web and mobile apps. If you do it for just one, the second square just needs to have a transparent radial gradient that has a color stop to change back to the sun icon color at the same point as our first square (in this case, 51%). You can use this background value for both squares or just one. You can certainly have the stops start and stop at the same values, if you prefer that.
I also chose to offset the color stops by 1% so that the change from one color to the next is not quite so harsh on the eyes. To circumvent this, I opt for picking a color and reducing the alpha value. I went with a "hard coded" color with an alpha value of 0 because the transparency color of the transparent value appears as a black transparent in Safari, as opposed to a more white transparency in other browsers. Play with the percentages to get the circles to be the sizes you want. Finally, at 51%, we change back to our #f0f0f0 color for the remainder of the div. This way, we will be able to "see through" the sun icon for 19% of the size of the div. Then at 31%, we change to a transparent color and stay at this color until we hit 50%. Here, we are starting with a color of #f0f0f0 for the first 30% of our div. The colors will start at the center and move outwards. Since we are using the default radial gradient positioning, the circle will start in the middle of our div. Here's what our radial gradient looks like:
But how do we add the circle in the middle? We could just add more divs to create some circles, but then we would have to worry about making sure the color of the larger circle always matches whatever the background color behind the sun icon.Įnter radial gradients! As our background property value, we can create a circle that starts out as the color of our sun icon (in this case, #f0f0f0), has a hard color stop to change to a transparent color, and then a final color stop to change back to our sun icon color.
To make our squares the same size, we want the before element to have a height and width of 100%. Add transform: rotate(45deg)Ī note on the before pseudo-element: Its height and width are relative to its parent container, which in this case is our sun div. In this case, I chose to rotate the before pseudo-element. Just make sure to give the button position: relative so that our squares position themselves within the button.
0 kommentar(er)
