So today, I decided to update the styling for my cat API.
For what I added, It was a dark mode feature.
/* ============================
DARK MODE THEME
============================= */
body.dark-mode {
--bg-main: #0f0f17;
--text-main: #e6e6e6;
--accent: #6d8bff; /* Brighter indigo */
--accent-hover: #4f6aff;
--accent-soft: #3a4b99;
--glow-indigo: #7a8cff;
--glow-light: rgba(122, 140, 255, 0.55);
}
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
padding: 8px 16px;
font-size: 0.9rem;
border-radius: 6px;
background: var(--accent);
color: white;
border: none;
cursor: pointer;
animation: softGlow 3s ease-in-out infinite;
z-index: 1000;
}
.theme-toggle:hover {
background: var(--accent-hover);
transform: scale(1.05);
}
Firstly, I added a button and main body for the dark mode feature to work, so when pressing the button, it would change the background and text color for contrast.
And thats pretty much it, i didn’t want to add anything else, but I plan to add more stuff soon.