SHREEYASH PRATISHTHAN’S

SHREEYASH COLLEGE OF ENGINEERING AND TECHNOLOGY

(POLYTECHNIC), CHH. SAMBHAJINAGAR

MICRO-PROJECT REPORT

NAME OF DEPARTMENT:- COMPUTER ENGINEERING

ACADEMIC YEAR:- 2024-25
SEMESTER:- 5TH
COURSE NAME:- CLIENT SIDE SCRIPTING LAUNGUAGE
COURSE CODE:- 22519
MICRO-PROJECT TITLE:-_ DARK MODE TOGGLE PAGE
PREPARED BY:-
1) SHIVAM POPAT GHADAGE EN. NO. 23511510350

UNDER THE GUIDANCE OF:- Prof. E.A.KHAN

 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI
CERTIFICATE
This is to certify that Mr./ Ms. Shivam Popat Ghadage

of 5th Semester of Diploma in Computer engineering

of Institute Shreeyash College Of Engineering And Techonology

has successfully completed Micro-Project Work in Course of CLIENT SIDE SCRIPTING LAUNGUAGE
for the academic year 2024-25 as prescribed in the I-Scheme Curriculum.

Date:- Enrollment No:- 23511510350

Place:- Chh. Sambhajinagar Exam Seat No.:-

Signature Signature Signature

Guide HOD Principal
E.A.KHAN A.C.NAIK S.S.KHANDAGALE

Seal of Institute
 ACKNOWLEDGEMENT

We wish to express
our profound gratitude
to our guide Mr./Ms.
………………………………
……… who guided us
endlessly in the framing
and completion of the
micro project. He/she
We wish to express our profound gratitude to our guide
Prof. E.A.KHAN who guided us endlessly in framing and completion of Micro-
Project. He / She guided us on all the main points in that Micro-Project. We are
indebted to his / her constant encouragement, cooperation and help. It was his /
her enthusiastic support that helped us in overcoming of various obstacles in the
Micro-Project.
We are also thankful to our Principal, HOD, Faculty Members
and classmates for extending their support and motivation in the completion of
this Micro-Project.

1) Shivam Popat Ghadage EN. NO. 23511510350

 Annexure-1
Micro-Project Proposal
(Format or Micro-Project Proposal about1-2pages)

Title of Micro-Project:- Dark Mode Toggle Page

1.0 Aims/Benefits of the Micro-Project (minimum30-50words)

Implementing a dark mode toggle on a webpage provides several benefits for both users and developers.
These benefits span across user experience, accessibility, performance, and design flexibility.

2.0 Course Outcomes Addressed

a) Improved User Experience (UX)\
b) Accessibility Enhancements
c) Visual and Aesthetic Improvements
d) Increased Engagement and Satisfaction

3.0 Proposed Methodology (Procedure in brief that will be followed to do the micro
project) in about 100 to 200 words).
4.0
1. Define the Initial State (Light or Dark Mode)
 Detect User Preference: Modern browsers support prefers-color-scheme, which can be
used to detect if a user prefers light or dark mode. This is the ideal initial state to
respect, but it can be overridden by a user toggle.
2. Design the Color Themes

 Create two distinct sets of color variables: one for light mode and one for dark mode.

 Customize more elements (buttons, links, etc.) based on the mode (e.g., button
background, border colors, etc.).

3. Add a Toggle Button

 Provide an interactive button or switch for the user to toggle between light and dark
modes.
 You can use a switch or an icon (e.g., a sun for light mode and a moon for dark mode).

4. Implement JavaScript for Mode Switching

 Use JavaScript to detect and store the user’s preference in localStorage or cookies. This
will ensure that the user’s choice persists across page refreshes.

Annexure-1

5.0 Action Plan (Sequence and time required for major activity. The following is for Reference, The
Activities can be Added / reduced / Modified )

Name of
Sr. Planned Planned Responsible
Details of activity
No. Week Start Finish Team Members
date date
1 1 &2 Discussion & Finalization of
Topic
2 3 Preparation of the Abstract
3 4 Literature Review
4 5 Submission of Microproject
Proposal ( Annexure-I)
5 6 Collection of information about
Topic
6 7 Collection of relevant content /
materials for the execution of
Microproject.
7 8 Discussion and submission of
outline of the Microproject.
8 9 Analysis / execution of
Collected data / information and
preparation of Prototypes /
drawings / photos / charts /
graphs / tables / circuits / Models
/ programs etc.
9 10 Completion of Contents of
Project Report
 10 11 Completion of Weekly progress
Report
11 12 Completion of Project Report
( Annexure-II)
12 13 Viva voce / Delivery of
Presentation

6.0 Resources Required (major resources such asraw material, some machining facility,
software etc.)

Sr. Name of Resources / Materials Specificatio Qty Remarks

No. n
1
2
3

Names of Team Members with En. Nos.

1.Shivam Popat Ghadage Enrollment No:-23511510350

(To be approved by the concerned teacher)

Annexure-II

Micro-Project Report
Format for Micro-Project Report (Minimum 4 pages)

Title of Micro-Project:-

1.0 Rationale (Importance of the project, in about 30 to 50words.This is a modified version of

the earlier one written after the work)

2.0 Aims/Benefits of the Micro-Project:- (In about 50 to 150 words)

3.0 Course Outcomes Achieved (Add to the earlier list if more Cos are addressed)
a) ........................................
b) .........................................
 c) ...............................
d) ...............................

4.0 Literature Review:- ( you can include all the resources which you have used to gather the information for
the Micro-project)
Sample:-

5.0 Actual Methodology Followed (Write step wise work done, data collected and its analysis
(if any).The contribution of individual member may also be noted.)

6.0 Actual Resources Used (Mention the actual resources used).

sr.
Name of Resource/material Specifications Qty Remarks
No.

7.0 Outputs of the Micro-Projects

8.0 Skill Developed/Learning outcome of this Micro-Project

9.0 Applications of this Micro-Project:- (In about 30 to 50 words)
Dark Mode Toggle Page
Introduction :-

Websites and applications now typically have two distinct themes: a light theme
for better visibility during the day and a dark theme for less eye strain at night.
To provide the best experience, your website should allow users to easily toggle
between these themes based on their preferences. This article will guide you on
creating a dark mode toggle for your website using HTML, CSS, and JavaScript,
enabling users to switch between light and dark themes with a single click.
In this tutorial, we'll build a sun and moon toggle button to represent light and
dark modes. When a user clicks the button, the website will smoothly transition
between these two modes. We'll also save the user's theme preference in local
storage for future visits.
See the demo or the complete source code on this GitHub repository. You can
learn interactively with this step-by-step guide, or scroll down for a detailed
tutorial.

Prerequisites
Before we begin, make sure you have:
 Basic knowledge of HTML, CSS, and JavaScript

 A text editor or IDE (e.g., Visual Studio Code, Sublime Text)

 A web browser for testing
Setting Up the HTML Structure
First, we'll create the basic HTML structure and add the necessary elements to
build our toggle button and page content.
1. Create a new HTML file.
Open your text editor and create a new index.html file with the basic HTML structure,
including DOCTYPE, HTML, head, and body tags. Add the title tag for the page
and import the external style.css and script.js files.

Code :-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light/Dark Mode Toggle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
2. Add necessary elements to the body. Inside the body tag, we'll add the following
elements:
 A container div to wrap all our content

 An h1 title for the page

 A p paragraph for a brief description
 A toggle-container div that will include our toggle switch
 Sun and moon SVG icons

Code :-
<body>
<div class="container">
<h1>Light/Dark Mode Toggle</h1>
<p>Click the toggle below to switch between dark and light modes.</p>
<div class="toggle-container" id="themeToggle">
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</div>
<script src="script.js"></script>
</body>
This is what our plain index.html file looks like:
Adding CSS Styling for Light and Dark Modes

In this section, we’ll style our HTML elements and create light and dark modes. We’ll also
use transitions for smooth color changes and control the visibility of sun and moon icons
based on the current mode.
3. Define CSS variables for light and dark colors. Open the style.css file in your text
editor. We’ll define CSS variables for dark and light colors using the :root selector. This
allows for easy theme customization later on. If you want to change the dark or light colors,
you only need to update them in one place.
/* Root selector for defining global CSS variables */
:root {
--clr-dark: #333; /* Dark color for text in light mode, background in dark mode */
--clr-light: #fff; /* Light color for background in light mode, text in dark mode */
}
4. Set up basic CSS styles. Add styles for the body, .container, and h1 elements to establish
the layout and typography of your page. You can customize these elements the way you like.
 body Center the content both vertically and horizontally using CSS variables for colors
and a transition for smooth color changes.
 .container Center the content within our container.
 h1 Add some space below the heading.
/* Base styles for the body */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: var(--clr-light);
color: var(--clr-dark);
transition: background-color 0.3s, color 0.3s;
}
/* Container for centering content */
.container {
text-align: center;
}
/* Heading styles */
h1 {
margin-bottom: 20px;
}
5. Add CSS styling for dark mode. Create a CSS class named .dark-mode that swaps the
background and text colors when applied to an element.
/* Styles for dark mode */
.dark-mode {
background-color: var(--clr-dark);
color: var(--clr-light);
}
6. Style the toggle icons. Add styles to the sun and moon SVG icons and control their
visibility based on the current mode.
/* Styles for the toggle container */
.toggle-container {
cursor: pointer;
}
/* Styles for the sun and moon icons */
.sun-icon, .moon-icon {
width: 24px;
height: 24px;
transition: opacity 0.3s;
}
/* Hide moon icon by default (light mode) */
.moon-icon {
display: none;
}
/* Show moon icon and hide sun icon in dark mode */
.dark-mode .sun-icon {
display: none;
}
.dark-mode .moon-icon {
display: inline-block;
}
With these CSS styles, your page will have a default light theme. The cursor:
pointer property makes it clear that the toggle is clickable.
Implementing JavaScript Functionality

Now that we have our HTML structure and CSS styling in place, it's time to add interactivity
to our dark mode toggle with JavaScript and implement local storage to remember the user's
preference.
7. Select DOM elements. Open the script.js file and select the DOM elements we want to
modify, the themeToggle ID, which contains our toggle button.
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
8. Add event listeners to the toggle button. This is the core functionality of the dark mode
toggle. Add an event listener to the themeToggle element to detect when the user clicks on it.
It will add the dark-mode class to the body element if it’s absent, or removes the class if
present.
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});
At this point, the toggle switch is functional, and clicking on it will switch between light and
dark modes. However, if you reload the page while in dark mode, the website will revert to
its default light mode.
9. Save user theme preferences in local storage. To save the user's theme preference even
after the browser is closed, we'll use the localStorage object. Inside the event listener
callback function, it checks if the body element has the dark-mode class.
 If it does, localStorage.setItem() saves the 'dark-mode' value to the 'theme' key.

 If it doesn't, localStorage.setItem() saves an empty string to the 'theme' key.

themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');

// Store user preference in local storage

if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark-mode');
} else {
localStorage.setItem('theme', '');
}
});
10. Check for a saved theme preference. When the page loads, we want to check if there's
a saved theme preference in the local storage. Use localStorage.getItem() to retrieve the
value associated with the 'theme' key. If a 'dark-mode' preference exists in the local storage,
apply the dark mode theme immediately by adding the dark-mode class to the body element.
Note: Make sure to place the getItem() method before the event listener to ensure it runs on
page load.
// Check if user preference exists in local storage
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
body.classList.add(currentTheme);
}
The Dark Mode Toggle in Action

We've implemented all the necessary components for our dark mode toggle, so let's see it in
action. Try clicking the toggle switch to see the smooth transition between light and dark
themes. Refresh the page to verify your theme preference is remembered.
Check out the complete source code on this GitHub repository.

Tips for Dark Mode Implementation

Creating a dark mode toggle is just the beginning. To create a user-friendly dark mode
experience, there are several best practices to keep in mind.

Tip #1: Choose the Right Colors for Dark Mode :-

Selecting colors for dark mode involves more than simply inverting your light theme. The
goal is to create a contrast between text and background colors for readability. Use tools
like color contrast checkers to verify that your chosen colors meet WCAG (Web Content
Accessibility Guidelines) standards. Remember, a well-designed dark mode should be easy
on the eyes and work well across devices.

Tip #2: Create a User-Friendly Toggle Button :-

Create a clear visual distinction between light and dark modes to help users identify each
mode easily. Your toggle switch or button should clearly show the current mode. You can
implement effective approaches such as a sun and moon icon toggle, which is used in this
article and is an easily recognizable choice, a light and dark mode text button, or a sliding
switch with light/dark mode labels. Whichever design you choose, make sure it's consistent
with your user interface and provides clear feedback when the user interacts with it.

Tip #3: Implement Smooth Transitions :-

To create a more polished user experience, use CSS transitions or animations for a
seamless shift between light and dark modes. Make sure that all elements, including
images and icons, smoothly transition to the new color scheme. This can be done by
adjusting opacity, brightness, or swapping out images for dark mode-specific versions.
Conclusion :-

Adding a dark mode toggle to your website greatly improves user experience. This is not just
about aesthetics but also usability and accessibility. It allows users to view content
comfortably based on their preferences and lighting conditions.
Throughout this article, we've walked through the process of creating a simple dark mode
toggle, covering HTML structure, CSS styling for light and dark themes, JavaScript
functionality, and storing user preference. The key is to keep it simple and user-friendly.
Don't forget to test your dark mode thoroughly to ensure all elements remain readable and
functional.
Now it's your turn to create your own dark mode toggle! Share your CodePen or GitHub link
in the comments below.
Reference :-

Check out these resources to learn more about dark mode implementation and advanced
techniques:
 Dark theme - Material Design: Learn about dark mode implementation, anatomy,
properties, and best practices from Material Design guidelines.
 Top 20 CSS Toggle Switches [2024] - LambdaTest: Explore various CSS toggle
switch designs for your website.
 Annexure-IV
MICRO-PROJECT EVOLUTION SHEET

Name Of Student:- Shivam Popat Ghadage En. No._23511510350

Name Of Program:-__Computer Engineering Semester:-_5th
Course Name:- Client Side Scripting Launguage Course Code:-_22519
Title Of The Micro-Project:- Dark Mode Toggle Page
Course Outcomes Achieved:-
a)_______________________________________________________________________
b)_______________________________________________________________________
c)_______________________________________________________________________
d)_______________________________________________________________________
e)_______________________________________________________________________

Sr. Poor Average Good Excellent Sub

Characteristic to be Total
No. assessed (Marks1-3) (Marks4-5) (Marks 6-8) (Marks9-10)
(A) Process and Product Assessment (Convert Below total marks out of 6Marks)
1 Relevance to the course
2 Literature
Review/information
collection
3 Completion of the Target
as Per project proposal
4 Analysis of Data and
representation
5
Quality of Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva(Convert Below total marks out of 4Marks)
7 Presentation
8
Viva

(A) (B)
Process and Product Individual Presentation/ Total Marks
Assessment (6 marks) Viva (4 marks) 10

Comments/Suggestions about team work/leadership/inter-personal communication (if any)

__________________________________________________________________________________________
__________________________________________________________________________________________
_______________________________________________________________________________________

Name of Course Teacher:-_Prof E.A.Khan

Dated Signature:-__