I would like to keep the selected theme when refreshing the page as well as across all other pages. I’ve seen other examples but I don’t know how to implement it in the code as I’m quite newbie. I’ve included the code of the functionality so far. Many thanks in advance.

function changeTheme(bgColor, textColor) {
  var styles = document.documentElement.style;
  styles.setProperty('--bg-color', bgColor);
  styles.setProperty('--text-color', textColor);
}

var dark = document.querySelector('#dark');
var light = document.querySelector('#light');
var blue = document.querySelector('#blue');

dark.addEventListener('click', function() {
  changeTheme('#333', 'white');
});

light.addEventListener('click', function() {
  changeTheme('white', 'black');
});

blue.addEventListener('click', function() {
  changeTheme('#2982F5', 'white');
});

:root {
  --bg-color: #333;
  --text-color: white;
}

body {
  font-family: sans-serif;
  background: #c0c0c0;
}

nav {
  color: var(--text-color);
  background: var(--bg-color);
}

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}

li {
  margin-left: 15px;
}

a {
  color: var(--text-color);
}

<nav>
  <ul>
    <p>Select theme:</p>
    <li>
      <a href="#" id="dark">Dark</a>
    </li>
    <li>
      <a href="#" id="light">Light</a>
    </li>
    <li>
      <a href="#" id="blue">Blue</a>
    </li>
  </ul>
</nav>

>Solution :

For that you could use localStorage. Keep your HTML and CSS code as they are. Your JavaScript code could be like so :

// get stored theme on load
let storedTheme = localStorage.getItem("theme");
if(storedTheme){
 storedTheme= JSON.parse(storedTheme);
 changeTheme(storedTheme.bgColor, storedTheme.textColor);
}

function changeTheme(bgColor, textColor) {
  // updtate stored data when there is a click
  localStorage.setItem("theme", JSON.stringify({bgColor:bgColor, textColor:textColor}));
  var styles = document.documentElement.style;
  styles.setProperty('--bg-color', bgColor);
  styles.setProperty('--text-color', textColor);
}

var dark = document.querySelector('#dark');
var light = document.querySelector('#light');
var blue = document.querySelector('#blue');

dark.addEventListener('click', function() {
  changeTheme('#333', 'white');
});

light.addEventListener('click', function() {
  changeTheme('white', 'black');
});

blue.addEventListener('click', function() {
  changeTheme('#2982F5', 'white');
});