How to remember color scheme once its set by user? (Simple Color Scheme)

Given a simple color scheme, that allows the user to set a desired theme from a predefined set of variables in CSS (Light, Dark, etc).

Is there an easy way to let the browser remember the scheme, once set by user, sothat the user's input is remembered and carried over to the next pages? Thus eliminating the need for setting the color scheme on every new page?

Its okay if the theme is forgotten after a browser restart or on a new browsing session and it may be forgotten after say 48 hours.

jQuery 3.6.0 library is loaded on all pages.

const setTheme = theme => document.documentElement.className = theme;
document.getElementById('scheme').addEventListener('click', ({target}) => {
  setTheme(target.getAttribute('id'));
});

html{margin: 10px}
#scheme p{ /* User Interface */
  display: inline-block;
  text-decoration: underline;
}#scheme p:hover{cursor: pointer}


:root{ /* Default Theme */
  --bgr: #eee;
  --txt: #000;
}
:root.light {
  --bgr: #ddc;
  --txt: #466;
}
:root.dark {
  --bgr: #222;
  --txt: #A75;
}
:root.blue{
  --bgr: #246;
  --txt: #eec;
}


body { /* Have something to test */
  background: var(--bgr);
  color: var(--txt);
}

<div id="scheme">
    <p id="light">Light</p>
    <p id="dark">Dark</p>
    <p id="blue">Blue</p>
    <p id="etc">Etc</p>
</div>

<h1>Click on a theme to change the color scheme!</h1>

from How to remember color scheme once its set by user? (Simple Color Scheme)