Now that we have a simple button, let’s add some JavaScript to it. Go ahead and create a button like the following and put it wherever you like, preferably at the top of the page for quicker access by the user. What we are going to do now is to create a button to swap that stylesheet with another one. The first step will be to define a default theme stylesheet in the head of our html like so: If you need, you can create a third stylesheet which will contain non-theme related styles. To be able to do that you will need to create two different stylesheets, one for each theme (light and dark). Click the button to toggle between dark and light mode for this page. Let’s now go one step further and implement a toggle for Dark Mode with JavaScript. Doing it this way just means that only one of the squares has the colored inner circle.Learn Now Toggle Dark Mode with JavaScript
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%). The translateY(20) declaration will offset the moon icon down along the Y-axis by 20 of the height of it's parent element. Here, as the opacity of the moon icon is zero, only the sun icon will be visible to us. You can use this background value for both squares or just one. Next, we will set up the initial position of the moon icon and its initial opacity when the webpage is rendered for the first time. 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. It has a black background that makes it easy to read, while the icons. Since we are using the default radial gradient positioning, the circle will start in the middle of our div. This icon is perfect for making dark mode interfaces more clear on light backgrounds. 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. Override the default CSS types when working the webpage within the Dark mode. Create a Bootstrap swap to toggle between Dark Mode and Light Mode.
To create 2 squares, we can utilize the before pseudo-element on our sun div. Since our button dimensions are square, we can just set the height and width to each be 50% of the containing button.All we have to do is create 2 squares, lay them on top of each other, and rotate one of them.
0 kommentar(er)
