<nav>
	<div class="wrapper">
		<a data-color="red" href="#">First</a>
		<a data-color="green" href="#">Second</a>
		<a data-color="purple" href="#">Third</a>
	</div>
</nav>

<main class="wrapper">
	<section>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim velit erat, id <a href="#">molestie</a> mi facilisis quis. Sed eu erat placerat, dapibus mauris vitae, dictum nisl. Sed efficitur turpis sed <a href="#">lorem tristique</a>, ac scelerisque neque bibendum. Aenean fermentum eleifend congue. Quisque vulputate metus quis sapien tempor pellentesque. Curabitur suscipit congue ante, a convallis velit. Integer eu interdum enim, vel tempor orci.</p>

		<p>Etiam nec diam quis magna convallis imperdiet eget vitae mi. Vestibulum imperdiet, turpis in tincidunt blandit, metus ante laoreet augue, at dignissim nisi quam a tellus. <a href="#">Maecenas semper sagittis tellus.</a></p>
		
	</section>
</main>
:root{
	--brand-color: #000;
}

nav{
	background-color: #000; // initiale
}

// Redondance de code...
body.red nav{background-color: red;}
body.green nav{background-color: green;}
body.purple nav{background-color: purple;}

main a{
	color: blue; // initiale
}

// Redondance de code...
body.red main a{color: red;}
body.green main a{color: green;}
body.purple main a{color: purple;}

/* Le reste de notre fichier CSS */

.wrapper{
	max-width: 36em;
	margin: 0 auto;
}
body{
	line-height: 1.6;
	font-size: 14px;
}
nav{
	text-align: center;
	font-weight: bolder;
	.wrapper{
		display: flex;
	}
	a{
		text-transform: uppercase;
		text-decoration: none;
		flex: 1;
		color: #fff;
		padding: .4em .6em;
		&.active{
			opacity: .4;
		}
	}
}

//...
$(function() {	
	$('nav').on('click','a',function(e){
		e.preventDefault;
		$('body').removeClass().addClass($(this).data('color'));
		$('nav a').removeClass('active');
		$(this).addClass('active');
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js