<button class="switch-btn">Switch Thema</button>
<section>
  <article class="post">
    <h1>FASCINATING FACTS ABOUT THE TAJ MAHAL</h1>
    <p class="post-meta">Circa 2014 <span>by</span> Ian Daniel Stewart</p>

    <p>It was a time period of 1632-1653 when Taj Mahal was built. Shah Jahan spent nearly 32 million rupees on the construction of what we now recognize as the epitome of love. Wondering what would be the value of money at present? Well, today the amount would be close to $1 Billion.</p>

    <p>If observed carefully, the four pillars or minarets are tilted outwards rather than standing straight. The reason why it was constructed in such a way was to protect the main tomb (gumbad) from being damaged with the falling of minarets on it in case of any natural calamity like an earthquake.</p>

    <p>The foundation of Taj Mahal would have collapsed if it wasn’t on the Yamuna Bank. Yes, Taj’s foundation is made of timber which is not supposed to be long-lasting. So you can picturise well that the wood must have weaken over the period of time but it is because of the Yamuna River that the wood is kept strong and moist till date.</p>
    <a href="#">Read More</a>
    <div class="image"></div>
  </article>
</section>
@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One);

:root {
  --primary-color: #9A97F3;
  --secondary-color: #818cab;
  --font-color: #e1e1ff;
  --bg-color: #161625;
  --title-color: #818cab;
  --src: url("https://i.ibb.co/GCWccpH/77.jpg");  
}

.light {
  --primary-color: #744267;
  --secondary-color: #536390;
  --font-color: #323232;
  --bg-color: #fff;
  --title-color: #292922;
  --src: url("https://i.ibb.co/4j03dX3/76.jpg");
}

body {
  font-family: "Roboto", sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 90%;
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}

h1 {
  color: var(--title-color);
  font-family: "Sansita One", serif;
  font-size: 32px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

a {
  display: block;
  color: var(--primary-color);
  text-decoration: none;
  margin-bottom: 20px;
  font-weight: bold;

  &:hover,
  &:focus {
    color: var(--secondary-color);
  }
}

section {
  max-width: 70%;
  margin: 0 auto;
}

.post-meta {
  font-size: 16px;
  font-style: italic;
  display: block;
  margin-bottom: 20px;
  color: var(--secondary-color);
}

.switch-btn {
  display: block;
  margin: 20px 0 20px auto;
  padding: 12px 25px;
  border-radius: 35px;
  background-color: var(--primary-color);
  color: #fff;
  border: 0;
  transition: .3s;
  cursor: pointer;
}

.switch-btn:hover {
  background-color: var(--secondary-color);
}

.image {
  width: min(100%, 660px);
  aspect-ratio: 2 / 3;
  margin: auto;
  background-image: var(--src);
  background-size: contain;
  background-repeat: no-repeat;
}
View Compiled 
const switchBtn = document.querySelector('.switch-btn');

function switchTheme() {
  document.body.classList.toggle("light");
}
switchBtn.addEventListener('click', switchTheme);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.