286 lines
4.2 KiB
SCSS
286 lines
4.2 KiB
SCSS
@mixin dark-mode {
|
|
body {
|
|
color: $dark-text-base-color;
|
|
background-color: $dark-black;
|
|
}
|
|
|
|
// Headings
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: $dark-white;
|
|
}
|
|
|
|
// Table
|
|
table {
|
|
thead {
|
|
color: $dark-white;
|
|
border-color: $dark-light;
|
|
}
|
|
|
|
th,
|
|
td,
|
|
tr {
|
|
border-color: $dark-light;
|
|
}
|
|
}
|
|
|
|
// Post
|
|
.page-content {
|
|
a {
|
|
color: $dark-text-link-blue;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: $dark-text-link-blue-active;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
border-color: $dark-light;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
.anchor-head {
|
|
color: $dark-text-link-blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ToC
|
|
.toc {
|
|
background-color: $dark-toc-bg;
|
|
}
|
|
|
|
// Go to top
|
|
#totop {
|
|
color: $dark-text-base-color;
|
|
background-color: $dark-go-top-bg;
|
|
|
|
&:hover {
|
|
background-color: $dark-go-top-bg-hover;
|
|
}
|
|
}
|
|
|
|
// Inline code
|
|
li>code,
|
|
p>code {
|
|
font-size: 0.9em;
|
|
padding: 1px 3px;
|
|
position: relative;
|
|
top: -1px;
|
|
color: $dark-inline-code-text;
|
|
background-color: $dark-inline-code-bg;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(128, 128, 128, 0.1);
|
|
}
|
|
|
|
// kbd tag
|
|
kbd {
|
|
color: $dark-inline-code-text;
|
|
background-color: $dark-inline-code-bg;
|
|
}
|
|
|
|
// horizontal rule
|
|
hr {
|
|
border-color: $dark-light;
|
|
}
|
|
|
|
// Post Meta
|
|
.post-meta {
|
|
color: $dark-gray;
|
|
|
|
time {
|
|
&::after {
|
|
background-color: $dark-light;
|
|
}
|
|
}
|
|
|
|
span[itemprop="author"] {
|
|
border-color: $dark-light;
|
|
}
|
|
}
|
|
|
|
// Link
|
|
a {
|
|
color: inherit;
|
|
text-decoration-color: $dark-smoke;
|
|
|
|
&:hover {
|
|
color: $dark-text-link-blue;
|
|
}
|
|
|
|
&:focus {
|
|
outline-color: rgba(44, 118, 246, 0.6);
|
|
}
|
|
}
|
|
|
|
// List
|
|
li {
|
|
&:before {
|
|
color: $dark-white;
|
|
}
|
|
}
|
|
|
|
// Blockquote
|
|
blockquote {
|
|
color: $dark-blockquote-text;
|
|
border-color: $dark-bloquote-border;
|
|
}
|
|
|
|
// Strong, Bold
|
|
strong,
|
|
b {
|
|
color: $dark-white;
|
|
}
|
|
|
|
// Navbar
|
|
.navbar {
|
|
border-color: $dark-light;
|
|
|
|
.menu {
|
|
a#mode {
|
|
.mode-sunny {
|
|
display: block;
|
|
}
|
|
|
|
.mode-moon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.menu-link {
|
|
color: $dark-white;
|
|
}
|
|
|
|
@include media-query($on-mobile) {
|
|
background-color: $dark-black;
|
|
border-color: $dark-light;
|
|
|
|
input[type="checkbox"]:checked~.trigger {
|
|
background: $dark-black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Post Item
|
|
.post-item {
|
|
&:not(:first-child) {
|
|
border-color: $dark-light;
|
|
}
|
|
|
|
.post-item-date {
|
|
color: $dark-white;
|
|
}
|
|
|
|
.post-item-title {
|
|
a {
|
|
color: $dark-text-base-color;
|
|
|
|
&:hover,
|
|
&focus {
|
|
color: $dark-white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Post Navigation
|
|
.post-nav {
|
|
border-color: $dark-light;
|
|
|
|
.post-nav-item {
|
|
font-weight: $bold-weight;
|
|
|
|
.post-title {
|
|
color: $dark-white;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
.post-title {
|
|
color: $dark-text-link-blue-active;
|
|
}
|
|
}
|
|
|
|
.nav-arrow {
|
|
color: $dark-gray;
|
|
}
|
|
}
|
|
|
|
@include media-query($on-mobile) {
|
|
.post-nav-item:nth-child(even) {
|
|
border-color: $dark-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Footer
|
|
.footer {
|
|
span.footer_item {
|
|
color: $dark-white;
|
|
}
|
|
|
|
a.footer_item:not(:last-child) {
|
|
color: $dark-white;
|
|
}
|
|
|
|
.footer_copyright {
|
|
color: $dark-gray;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// 404 Page
|
|
.not-found {
|
|
.title {
|
|
color: $dark-white;
|
|
text-shadow: 1px 0px 0px $dark-text-link-blue;
|
|
}
|
|
|
|
.phrase {
|
|
color: $dark-text-base-color;
|
|
}
|
|
|
|
.solution {
|
|
color: $dark-text-link-blue;
|
|
}
|
|
|
|
.solution:hover {
|
|
color: $dark-text-link-blue-active;
|
|
}
|
|
}
|
|
|
|
.search-article {
|
|
input[type="search"] {
|
|
color: $dark-text-base-color;
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: rgba(128, 128, 128, 0.8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// support JS disabled environment with media query
|
|
@media (prefers-color-scheme: dark) {
|
|
// use "light" class to avoid style conflicts in js enabled environment
|
|
html:not(.light) {
|
|
@include dark-mode()
|
|
}
|
|
}
|
|
|
|
html.dark {
|
|
@include dark-mode()
|
|
}
|