139 lines
2.1 KiB
CSS
Executable File
139 lines
2.1 KiB
CSS
Executable File
|
|
|
|
/* Themes(light and dark) */
|
|
|
|
|
|
/* Light theme */
|
|
html {
|
|
--background-color: #383c4a;
|
|
--section-color: #2a2e3a;
|
|
--text-color: #C8C8C8;
|
|
--headings-color: #ffffff;
|
|
--header-color: #2e323e;
|
|
--site-name-color: #ffffff;;
|
|
--site-description-color: #ffffff;
|
|
--nav-link-color: #57cc8a;
|
|
--nav-link-hover-color: #ffffff;
|
|
--link-color: #8bb8df;
|
|
--link-color-hover: 8bb8df;
|
|
--border-color: #808080;
|
|
--footer-color: #2e323e;
|
|
}
|
|
|
|
@media (prefers-color-scheme:light) {
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--headings-color);
|
|
}
|
|
|
|
header {
|
|
background-color: var(--header-color);
|
|
}
|
|
|
|
.menu {
|
|
color: white;
|
|
}
|
|
|
|
a {
|
|
color: #CC99FF;
|
|
}
|
|
|
|
a:hover {
|
|
color: white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.content {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
main p {
|
|
color: black;
|
|
}
|
|
|
|
section {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
footer {
|
|
background-color: #182329;
|
|
color: #C8C8C8;
|
|
}
|
|
}
|
|
|
|
|
|
/* Dark theme */
|
|
html[data-theme='dark'] {
|
|
--background-color: #383c4a;
|
|
--section-color: #2a2e3a;
|
|
--text-color: #C8C8C8;
|
|
--headings-color: #ffffff;
|
|
--header-color: #2e323e;
|
|
--site-name-color: #ffffff;;
|
|
--site-description-color: #ffffff;
|
|
--nav-link-color: #57cc8a;
|
|
--nav-link-hover-color: #ffffff;
|
|
--link-color: #8bb8df;
|
|
--link-color-hover: 8bb8df;
|
|
--border-color: #808080;
|
|
--footer-color: #2e323e;
|
|
}
|
|
|
|
@media (prefers-color-scheme:dark) {
|
|
body {
|
|
background-color: #383c4a;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
color: white;
|
|
}
|
|
|
|
header {
|
|
/* background-color: #182329; */
|
|
background-color: #2e323e;
|
|
}
|
|
|
|
main {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.title {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.menu {
|
|
color: #ffffff;
|
|
}
|
|
|
|
a {
|
|
color: #CC99FF;
|
|
}
|
|
|
|
a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.content {
|
|
background-color: #182329;
|
|
}
|
|
|
|
main p {
|
|
color: #C8C8C8;
|
|
}
|
|
|
|
section {
|
|
background-color: #2a2e3a;
|
|
}
|
|
|
|
footer {
|
|
background-color: #2e323e;
|
|
border-top: 1px solid var(--border-color);
|
|
color: #C8C8C8;
|
|
}
|
|
}
|