<!-- Thanks to Loripsum https://loripsum.net/ for creating the text elements -->
<!-- Thanks to https://picsum.photos/ for providing free images -->

<div class="wrapper">
  <article>
    <button type="button">Toggle dark mode</button>
    <h1>Quae est igitur causa istarum angustiarum?</h1>

    <img alt="" src="https://picsum.photos/1040/300" />

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? <a href="http://loripsum.net/" target="_blank">Illi enim inter se dissentiunt.</a> Ne in odium veniam, si
      amicum destitero tueri. Duo Reges: constructio interrete. Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Atqui, inquam, Cato, si istud optinueris, traducas me ad te totum licebit. </p>

    <p>Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. <mark>Putabam equidem satis, inquit, me dixisse.</mark> <b>Et quod est munus, quod opus sapientiae?</b> Non enim quaero quid verum, sed quid cuique dicendum sit. <i>Cum audissem Antiochum, Brute, ut solebam, cum M.</i>      <i>Cave putes quicquam esse verius.</i> Universa enim illorum ratione cum tota vestra confligendum puto. </p>

    <h2>Non est enim vitium in oratione solum, sed etiam in moribus.</h2>

    <p>Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Aliena dixit in physicis nec ea ipsa, quae tibi probarentur; <b>Quam nemo umquam voluptatem appellavit, appellat;</b> Memini me adesse P. <i>Hoc sic expositum dissimile est superiori.</i>      Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; </p>

    <ul>
      <li>Erillus autem ad scientiam omnia revocans unum quoddam bonum vidit, sed nec optimum nec quo vita gubernari possit.</li>
      <li>Nam illud vehementer repugnat, eundem beatum esse et multis malis oppressum.</li>
      <li>Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P.</li>
      <li>Qui est in parvis malis.</li>
    </ul>

    <p>Tubulo putas dicere? Certe nihil nisi quod possit ipsum propter se iure laudari. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Aliter homines, aliter philosophos loqui putas oportere? Tum Piso: Quoniam igitur aliquid
      omnes, quid Lucius noster? Quae cum dixisset paulumque institisset, Quid est? Negat esse eam, inquit, propter se expetendam. Conferam avum tuum Drusum cum C. Et quidem Arcesilas tuus, etsi fuit in disserendo pertinacior, tamen noster fuit; Iam id
      ipsum absurdum, maximum malum neglegi. <mark>Ita credo.</mark> Sed ne, dum huic obsequor, vobis molestus sim. </p>

  </article>
</div>
body {  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

.wrapper {
  background-color: #f9f9f9;
  color: #222;
  min-height: 100vh;
}

article {
  margin: 0 auto;
  max-width: 65em;
  width: 90%;
}

img {
  max-width: 100%;
}

button {
  background-color: hotpink;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1rem 0;
  padding: 1em 1.5em;
}

.dark-mode {
  -webkit-filter: invert(1);
  filter: invert(1);
}
View Compiled
const button = document.querySelector("button");
button.addEventListener("click", () =>  document.documentElement.classList.toggle("dark-mode"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.