I just added a new feature to my portfolio: Night Mode. I created it with CSS and session storage in JavaScript. I want you to review my CSS of night files, I feel it's filled with !important and I'm sure this is a bad practice. Can anyone help me make them better?
My second question, the default mode (white mode) runs in the first milliseconds when moving from page to another. I think it's not a good practice. Can anyone help me make it better?
Live: just set the session to night using this JavaScript line sessionStorage.setItem("mode", "night"); and refresh.
CSS files:
body{
background-color: black;
color: white;
}
.indx-contnt p {
color: white !important;
}
.signature span, a {
color: white;
}
h1{
color:#f90 !important;
}
.latest li span{
color: black !important;
}
.latest li a{
color:white !important;
}
.contentlist li:nth-child(2) a{
color:#2CAAE1 !important;
}
.contentlist li:nth-child(3) a{
color:#0177B5 !important;
}
.contentlist li:nth-child(1) a{
color:#717171 !important;
}
#rss{
background-color: black;
}
.signature span, a{
color: white !important;
}
.latest li a:hover {
color: #f90 !important;
}
p, h1, h2,h4,span{
color: white;
}body{
background-color: black;
color: white;
}
.signature span, a{
color: white !important;
}
p, h1, h2, h4, span {
color: white !important;
}
.project span {
color: black !important;
}
.card{
background-color: #ffffff0f !important;
}
.card:hover {
box-shadow: 10px 7px 10px 0px rgb(255, 153, 0) !important;
}
.card a{
background-color: black !important;
}
#rss{
background-color: black !important;
}
.card-title{
color: #f90 !important;
}
.posts a {
color: white !important;
}1 Answer 1
I like the idea you have here and the implementation looks good. You are right though that it is not best practice to use !important frequently.
I'd think you could avoid using !importants simply with either of the following:
- Order: having night mode CSS come later/below day mode CSS
- Specificity: as in
div.nightmodeor.nightmode divwould override justdiv.
Below I used specificity as the order was more to keep it organized. Sorry I didn't revise your code but I wanted to test this out for myself and see if my simple idea would work.
Code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Night Mode Test</title>
<style media="screen">
body, div, h1, p, button{
transition-duration: 0.4s;
}
body{
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 30px;
}
div{
box-shadow: 0 0 10px gray;
text-align: center;
padding: 15px;
}
button{
background: green;
color: white;
padding: 1em 3em;
border-radius: 10px;
margin: 50px;
outline: 0;
border: 0;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
.nightMode button{
background: white;
color: green;
}
.nightMode{
background: black;
}
.nightMode div{
box-shadow: 0 0 10px gold;
}
.nightMode h1, .nightMode p{
color: white;
}
</style>
</head>
<body>
<div class="">
<h1>Some Sample Stuff</h1>
<p>Sample Text...</p>
</div>
<button id="toggleNightMode" type="button" name="button">Toggle</button>
<script type="text/javascript">
const button = document.getElementById('toggleNightMode');
button.addEventListener('click', function(event){
if(document.body.classList.contains('nightMode')) document.body.classList.remove('nightMode');
else document.body.classList.add('nightMode');
});
</script>
</body>
</html>
So I'd recommend doing the following:
- Combine some of your CSS that uses the same color and/or background
- Use specificity to override CSS instead of
!importants. I'd recommend using a class or two (dayMode,nightMode). My small example only needed one: if it lacked thenightModeclass then I knew it was day mode.
p { color: white !important; }when user hasp { background-color: white; color: black; }). \$\endgroup\$