Here is a basic HTML page flavored with dark mode
You can download this on GitHub here
You can see a demo here
Here is the HTML code
<!DOCTYPE html>
<html>
<head>
<title>Your Title
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link href="https://sophia.wtf/favicon.ico?v1" rel="icon" type="image/png" />
<meta name="description" content="Your Description">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="Your Twitter">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your Description">
<meta property="og:url" content="Your URL">
<meta property="og:type" content="website">
<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your Description"">
<meta property="og:image" content="https://cdn.statically.io/og/theme=dark/Darkmode.jpg">
<meta name="twitter:image" content="https://cdn.statically.io/og/theme=dark/Darkmode.jpg">
<link rel="stylesheet" href="main.css">
</head>
<h1>H1
</h1>
<h2>H2
</h2>
<h3>H3
</h3>
<h4>H4
</h4>
<h5>H5
</h5>
<h6>H6
</h6>
<p>P
</p>
<pre>PRE
</pre>
<strong>Strong
</strong>
<div>
<em>EM
</em>
<div>
<a href="https://sophia.wtf">href
</a>
<div>
<sub>SUB
</sub>
<hr>
</body>
</html>
Here is the CSS Code
body {
background: #121212;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: #fff;
text-decoration: none;
}
h1 {
color: #fff;
font-family: monospace, monospace;
font-size: 2em;
line-height: 1.5em;
}
h2 {
color: #fff;
font-family: monospace, monospace;
font-size: 1.5em;
line-height: 1.5em;
}
h3 {
color: #fff;
font-family: monospace, monospace;
font-size: 1.25em;
line-height: 1.5em;
}
h4 {
color: #fff;
font-family: monospace, monospace;
font-size: 1.1em;
line-height: 1.5em;
}
h5 {
color: #fff;
font-family: monospace, monospace;
font-size: 0.9em;
line-height: 1.5em;
}
h6 {
color: #fff;
font-family: monospace, monospace;
font-size: 0.7em;
line-height: 1.5em;
}
sub {
color: #fff;
font-family: monospace, monospace;
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
color: #fff;
font-family: monospace, monospace;
font-size: 0.8em;
position: relative;
top: -0.5em;
}
hr {
border: 0;
border-bottom: solid 2px #fff;
margin: 2em 0;
}
hr.major {
margin: 3em 0;
}
blockquote {
border-left: solid 6px #121212;
font-style: italic;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 1.5em;
}
code {
background: #fff;
border-radius: 0.35em;
border: solid 2px #121212;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
color: #fff;
-webkit-overflow-scrolling: touch;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0 2em 0;
}
pre code {
color: #fff;
display: block;
line-height: 1.75em;
padding: 1em 1.5em;
overflow-x: auto;
}
p {
color: #fff;
font-family: monospace, monospace;
font-size: 1em
}
a {
-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
border-bottom: solid 1px;
color: #fff;
text-decoration: none;
}
a:hover {
border-bottom-color: transparent;
color: #fff !important;
text-decoration: none;
}
strong, b {
color: #fff;
font-weight: 400;
}
em, i {
color: #fff;
font-style: italic;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
