How to Monitor Source Code Changes After a Forced Dark Mode Implementation?
Browser's Source Code Changes That Take Place on Activating Dark Mode, for Example, Chrome
Although such a dark mode might be imposed in some areas, it can lead to a great shift in how any website or application is likely to be perceived and used. This paper explains a manner in which changes in the source code are watched and, hence, leads to the successful conversion of a website into dark mode.
What is Forced Dark Mode?
In other words, this is how applications and site states are converted into some sort of dark theme that may not be natively supported at all. This is frequently done through the manipulation of CSS, JavaScript, or just with standalone libraries and frameworks.
How to Add Dark Mode to Any Site
A website can support Dark Mode in just a few easy steps. Below, we have compiled the process step by step.
Step 1: Identify Elements to Change
Discover which of the properties you would replace for your dark mode. Most likely, those would be:
- Base Colours
- Text colors
- Borders and Outlines
- Icons and Illustrations
Example Components:
- Background Color: Add in a dark background color. Replace easily the background color and use dark colors like #121212.
- Text Colors: Text colors should contrast with a dark background — for example, #ffffff.
Step 2: Create a Dark Mode CSS File
Now go ahead and create another CSS file for Dark Mode styles only, e.g.:
/* Dark mode styles */
body {
background-color: #121212;
color: #ffffff;
}
a {
color: #bb86fc;
}
CSS File Setup:
- Body Types: Background and text colors set globally.
- Link Styles: Color for interactive elements only.
Step 3: Toggling Dark Mode Using Javascript
Code Snippet: Light or Dark Mode in JavaScript. For instance:
function toggleDarkMode() {
const darkModeStylesheet = document.getElementById('dark-mode-stylesheet');
if (darkModeStylesheet.disabled) {
darkModeStylesheet.disabled = false;
localStorage.setItem('darkMode', 'enabled');
} else {
darkModeStylesheet.disabled = true;
localStorage.setItem('darkMode', 'disabled');
}
}
// Check if user preference is persisted
document.addEventListener('DOMContentLoaded', e => {
if (localStorage.getItem('darkMode') === 'enabled') {
document.getElementById('dark-mode-stylesheet').disabled = false;
}
});
JavaScript Key Takeaways:
- Functionality: Allows enabling or disabling the dark mode stylesheet to fit the user's preference.
- Local Storage: It stores the preference to turn on Dark Mode.
Step 4: Add a Switch
Add a toggle button for switching between the modes.
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>
<link id="dark-mode-stylesheet" rel="stylesheet" href="dark-mode.css" >
Button Implementation:
- Button Definition: On click, it would invoke
toggleDarkMode(). - Stylesheet link: Provided direct link to the dark mode CSS file.
Step 5: Validate and Refine
Check your dark mode on every browser and each device to make sure it looks good to you.
Why Tracking Source Code Changes Is Important
Tracking changes helps to:
- Find the mistakes from the following dark mode implementation new code and rectify it.
- Ensure there is no regression from the new changes introduced to maintain a high quality of the code.
- Collaborate with other team members, as changes in the code are easily trackable.
How Can You Keep Track of Changes in Source Code?
1. Version Control Systems
These enable versioning of changes in the code base, such as Git. The ability:
- Changes to be Committed: The following changes have been staged and described, for instance:
# Create a new branch dark mode
git checkout -b dark-mode-feature
# Commit with a message
Commit message: Forced Dark Mode Implementation
- Branching and Merging: In detail, there is branching, then there is merging. Branching is where the feature for dark mode is worked upon separately. Merging combines the branches after review and testing.
2. Code Reviews
Essentially, code reviews ensure the following:
- Code Quality: Ensure coding is up to the standard of project requirements.
- Would detect bugs which may still be at a very nascent stage in the process.
- Easily understandable and simple to grasp by everyone in the team without any hassle, effort, or trouble in understanding.
3. Continuous Integration System
This allows your code to be automatically tested and deployed continuously. The major advantages of CI are:
- Automated Testing: Run all tests if changes break the application.
Additional Comments: Verify that an application can be successfully built after changes have been made to it.
Popular Tools For CI:
- Travis CI
4. Proper Documentation
Well-documented changes with in-depth documentation, for example:
- Change Logs: Changes and reasons thereof shall be tracked.
- Inline Comments: Add comments where the logic is complex.
- Doc Updates: Update user-facing documentation on Dark Mode features.
5. Implement Visual Regression Testing
Testing where, before doing any changes, a screenshot was taken and after the changes, a screenshot was captured and compared.
The following are visual regression testing tools:
- Backstop
Vision-Based Process of Effectively Tracking Changes
Step 1: Planning Change and Project Scope
Determine now which part of the application will get this dark mode and then scope that out.
Step 2: Creating A New Branch
Make a new branch in Git for dark mode-related changes.
Step 3: Make Gradual Adjustments
Make incremental changes slowly, committed along with descriptive messages.
Step 4: Review the Testing of the Changes
Run the code check one more time after the changes with the CI tools that give assurance to make sure they are correct and do not add new bugs.
Step 5: Combine and Report
Update the main code only after the reviewed and tested version is ready. Add the necessary updates to related documentation.
These alterations could therefore only be read into the inactivated source code after this and the inactivation of the forced Dark Mode. In so doing, the quality of work done is very well ensured and even the application can work just fine.
Some of the tools that will hopefully ease this transition are: Version Control Systems, Code Reviews, Continuous Integration, documentation, and Visual Regression Testing.
The secret about good implementation would be that, after all, many plans and little movement, with all testing done for the sake of navigability. That involves identifying elements, creating a dark mode CSS file, toggling with JavaScript, adding a toggle button, and more.
