Dark mode with CSS & HTML

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;
	}

Leave a Reply

Your email address will not be published.

Back To Top
Sophia Atkinson