Dark mode in react

Dark mode design: Implementing dark themes in your React web projects

Welcome to codewithrandom! So my active developers if you’re looking for dark themes in your webpage then you are at the correct place, whether you’re a curious beginner or a coding expert, embark on this learning journey. Let’s code together!!!!

Dark mode design: Implementing dark themes in your React web projects

Let’s understand a dark theme-based webpage through an example :

First, let’s understand HTML code

<div class="toggle">
	<div class="sun"></div>
	<div class="moon"></div>
	<div class="toggle-overlay"></div>
</div>

<h1 class="click">Click Sun or Moon</h1>

<footer>
	Made  by <a href="https://codepen.io/JamesCZ" target="_blank">Jakub Pradeniak</a>
	&bull;
	<a href="https://www.linkedin.com/in/jakub-pradeniak/" target="_blank"><i class="fab fa-linkedin"></i></a>
	<a href="https://www.facebook.com/jakub.pradeniak" target="_blank"><i class="fab fa-facebook-square"></i></a>
</footer>

Let us understand it briefly :

1. Toggle Div: This div element with the class toggle contains three child div elements. These represent a sun, a moon, and an overlay. The idea is likely to create a toggle switch between light and dark modes.

  • .Sun : Represents the sun icon for light mode.
  • .moon : Represents the moon icon for dark mode.
  • .toggle-overlay : Possibly an overlay that visually indicates the active mode.

2. Heading: An h1 element with the class click displays the text “Click Sun or Moon”. This serves as an instruction for users to interact with the sun and moon icons.

3. Footer: The footer element contains information about the creator and their social media links.

  • Made by : A text indicating the creator.
  • ” a “elements with href attributes pointing to the creator’s CodePen, LinkedIn, and Facebook profiles. The icons for LinkedIn and Facebook are represented using Font Awesome icons (<i> elements with classes like fab fa-linkedin).

Summary: The provided code seems to be the HTML structure of a web page that demonstrates a light-dark mode toggle using sun and moon icons. When users click on the icons, it’s possible that JavaScript or CSS interactions might be used to change the appearance of the toggle and the overall theme of the page. Additionally, the footer includes information about the creator and links to their social media profiles.

Dark mode design: Implementing dark themes in your React web projects

Now let us see the CSS structure

// Day/Night mode toggle
.toggle
	position: fixed
	top: -75px
	left: -75px
	width: 150px
	height: 150px
	border: none
	border-radius: 50%	
	z-index: 498
	// overlay for onclick event
	.toggle-overlay
		position: absolute
		top: 0
		left: 0
		width: 150px
		height: 150px
		border: none
		border-radius: 50%
		z-index: 500
		cursor: pointer
		transition: .3s linear
		&:hover
			box-shadow: 0 0 10px
	.sun, .moon
		width: 40px
		height:	40px
		border-radius: 50%
		z-index: 499
	.sun
		background: radial-gradient(#f9ca24, #f6e58d)
		box-shadow: 0 0 10px 2px #fbc531
		position: absolute
		top: 85px
		left: 85px
	.moon
		background: #dedede
		box-shadow: 0 0 10px 2px #eeeeee
		position: absolute
		top: 25px
		left: 25px
		transform: rotate(160deg)
		&::before
			content: ""
			display: block
			position: absolute
			top: 1px
			left: 1px
			width: 30px
			height:	30px
			border-radius: 50%
			background: rgba(32,32,64,.9)

.toggle.day
	animation: rotateDay .45s linear 0s 1 forwards
	
.toggle.night	
	animation: rotateNight .45s linear 0s 1 forwards
	.toggle-overlay
		&:hover
			box-shadow: 0 0 10px #d4d7dd

// Body Day/Night mode
body
	width: 100%
	transition: all .35s linear
	margin: 0
	padding: 0
	position: static
	// day	
	&::before
		opacity: 1
		background: linear-gradient(to top, #6bc5d2, #cbf1f5 35%)
	// night
	&::after
		opacity: 0
		background: linear-gradient(to top, #202060, #0f0f21 35%)
	&::before,	&::after
		content: ""
		display: block
		position: absolute
		top: 0
		left: 0
		bottom: 0
		right: 0
		z-index: -1

body.day
	&::after
		animation: opacityOff .35s linear 0s 1 forwards
	
body.night
	color: #f7f7f7
	&::after
		animation: opacityOn .35s linear 0s 1 forwards

// animations
@keyframes rotateNight
	0%
		transform: rotate(0deg)
	100%		
		transform: rotate(180deg)

@keyframes rotateDay
	0%		
		transform: rotate(180deg)
	100%
		transform: rotate(360deg)

@keyframes opacityOn
	0%		
		opacity: 0
	100%
		opacity: 1

@keyframes opacityOff
	0%		
		opacity: 1
	100%
		opacity: 0

// Header
h1
	text-align: center

// Basic styling
html
	font-family: arial
	font-size: 15px
	line-height: 1.15
	color: #0C0C0C
	box-sizing: border-box

*
	font-family: inherit
	font-size: inherit
	color: inherit
	box-sizing: inherit

// Footer
footer
	position: fixed
	bottom: 0
	width: 100%
	text-align: center
	padding: .5rem 0 .7rem 0
	color: #F9F9F9
	background: #2D303A
	z-index: 999

Let us understand it briefly

Certainly! The provided code is a snippet of CSS code that’s used to create a day/night mode toggle with corresponding animations and styling. Let’s break it down:

Day/Night Mode Toggle:

  • .toggle: Represents the main toggle element for switching between day and night modes. Positioned fixed, it’s centered with a circular shape and contains the sun and moon icons.
  • .toggle-overlay: An overlay that appears when the toggle is clicked. It provides visual feedback for interaction, including a hover effect.
  • .sun and .moon: Styles for the sun and moon icons within the toggle. They’re positioned within the toggle circle and have gradient backgrounds and shadows.
  • .toggle-day: and .toggle-night: Classes to apply animations when switching between day and night modes. The overlay’s shadow changes on hover.

Body Day/Night Mode:

  • body::before and body::after: These pseudo-elements create gradient backgrounds that simulate day and night. The “:: before” element has an opacity of 1 for daytime and the”:: after ” element has an opacity of 0 for nighttime.
  • body. day and body.night: Classes to apply animations and styling when switching between day and night modes. Text color and opacity animations are adjusted accordingly.

Animations:
Various animations are defined using keyframes to create the rotation and opacity transitions for the toggle and background.

Header and Basic Styling:
Styling for the h1 element, basic styling for the entire HTML structure, and a consistent font and color scheme are defined.

Footer:
Styling for the footer, which includes positioning, background color, text color, and padding.

Overall, this code snippet provides the CSS styling required to implement a visually appealing day/night mode toggle with animations and responsive background changes. It demonstrates the visual transition between different modes and sets up a unified and engaging user interface.

Dark mode design: Implementing dark themes in your React web projects

Now let us see the javascript structure

$('.toggle-overlay').on('click', function () {	
	let $t = $('.toggle');
	let $b = $('body');
	if($t.hasClass('night')) {
		$t.removeClass('night');
		$t.addClass('day');
		$b.removeClass('night');
		$b.addClass('day');
	} else {
		$t.addClass('night');
		$t.removeClass('day');
		$b.addClass('night');
		$b.removeClass('day');
	}
});

Let us understand it briefly

Certainly! The offered code is a snippet of JavaScript code that handles the click event on a toggle-overlay element. It switches between day and night modes by adding and removing appropriate classes from the. toggle element (which represents the mode switch) and the body element (which represents the full page). The code is broken down as follows:

$(‘.toggle-overlay’).on(‘click,’ function ()…);: This code adds a click event handler to elements with the toggle-overlay class. When any element with this class is clicked, the supplied function is called.

Let $t equal $(‘.toggle’); This line chooses the toggle element and stores it in the variable $t.

Let $b equal $(‘body’); This line chooses and stores the body element in the variable $b.

Let $b equal $(‘body’); This line chooses and stores the body element in the variable $b.

ADVERTISEMENT

Using the.hasClass() function, the following conditional statements determine the current state of the. toggle element:

ADVERTISEMENT

The class night on the. toggle element indicates that the page is presently in night mode. The code shifts to day mode in this scenario by removing the night class and adding the day class to both. toggle element and the body element.

ADVERTISEMENT

If the. toggle element lacks the class night, the page is now in day mode. In this scenario, the code shifts to night mode by adding the night class to the. toggle element and delete the day class from the body element.

ADVERTISEMENT

Overall This JavaScript code handles the click event on the. toggle-overlay element, switching between day and night modes by modifying the classes on the. toggle and body elements. It provides an easy way to transition between multiple modes on a web page.

ADVERTISEMENT

Dark mode design: Implementing dark themes in your React web projects

Here is the video demonstration of the final output

 

In conclusion, a good knowledge of dark theme style gives many ways of creating amazing web experiences. It reduces eye strain, enhances readability, and provides energy-efficient options. Let your websites not only shine in the light but also captivate in the shadows. Happy coding!

 



Leave a Reply