How can I target dark and light themes in CSS?
Unanswered
Sporting Lucas Terrier posted this in #help-forum
Sporting Lucas TerrierOP
I'm using nextra docs and I want to create separate styles for dark and light themes in CSS, but its not working!
css:
css:
.root {
flex: 1;
font-size: 14px;
color: rgb(107, 114, 128);
}
.dark {
color: rgb(163, 163, 163);
}
.root a {
color: rgb(107, 114, 128);
text-decoration: none;
}
.dark a {
color: rgb(163, 163, 163);
}
.root a:hover {
color: rgb(17, 24, 39);
}
.dark a:hover {
color: rgb(249, 250, 251) !important;
}
.columns {
margin-bottom: 2rem;
display: grid;
gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.columns h3 {
margin-bottom: 20px;
color: rgb(17, 24, 39);
font-weight: 500;
line-height: 20px;
}
.dark .columns h3 {
color: rgb(243, 244, 246);
}
.columns li {
line-height: 21px;
margin-bottom: 12px;
}