<div class="content">
  <div class="menu-bar">
    <div class="menu">Home . Travel . Food . Contact</div>
    <div class="switch">Dark mode: <span id="dark-switch">OFF</span></div>
  </div>
  <h1>The Amazon Rainforest in Bolivia</h1>
  <div class="meta">
    <span>By: Mariah Johson /</span>
    <span>February 7, 2020 /</span>
    <span>Nomad</span>
  </div>
  <p>After gathering ourselves and our packs, we headed down to our homestay family’s small dining room for breakfast, where we enjoyed scrambled eggs, toast, mekitsi (fried dough), local jam and peppermint tea.</p>
  <img src="https://cloud.tagdiv.com/wp-content/uploads/2018/04/36.jpg" />
  <p>We wandered the site with busloads of other tourists, yet strangely the place did not seem crowded. I’m not sure if it was the sheer size of the place, or whether the masses congregated in one area and didn’t venture far from the main church, but I didn’t feel overwhelmed by tourists in the monastery.</p>
</div>
// dark mode style
.dark {
  background-color: #222;
  color: #ddd;
  
  .meta {
    border-color: #444;
  }
  
  p {
    color: #aaa;
  }
}


// theme style
.content {
  width: 600px;
  margin: 0 auto;
}
h1 {
  margin: 20px 0 10px 0;
}
.meta {
  border-bottom: 1px solid #eaeaea;
  padding: 0 0 16px 0;
}
.menu-bar div {
  display: inline-block;
}
.switch {
  float: right;
}
#dark-switch {
  cursor: pointer;
}
span {
  font-size: 13px;
}
p {
  color: #666;
}
img {
  max-width: 100%;
}
.menu-bar {
  padding: 10px 20px;
  background-color: #2f9bc1;
  color: #fff;
}
$( '#dark-switch' ).on('click', function(){
  if( $( 'body' ).hasClass( 'dark' )) {
    $( 'body' ).removeClass( 'dark' );
    $( '#dark-switch' ).text( 'OFF' );
  } else {
    $( 'body' ).addClass( 'dark' );
    $( '#dark-switch' ).text( 'ON' );
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js