JSFiddle - React, Tailwind, and code Playground

HTML

<div class="elemento">Hello World!</div>

<div class="theme-toggle" data-theme="claro">Tema Claro</div>
<div class="theme-toggle" data-theme="escuro">Tema Escura</div>

CSS

/* tema escuro (original) */
.elemento { background-color: #212121 }
.elemento:after {
  content: '';
  position: absolute;
  border:  10px solid green;
  background-color: red;
}
/* tema claro - observe que o pseudo :after não altera */
.elemento[theme="claro"] { background-color: #CCCCCC }
.elemento:after[theme="claro"] {
  content: '';
  position: absolute;
  border: 20px solid orange;
  background-color: red;
}

JavaScript

(function ($) {
var $temaclaro = $('.elemento');
var loadTheme = function () {
$temaclaro.attr('theme', localStorage.getItem('theme') || 'default');
};
$('.theme-toggle').click(function () {
localStorage.setItem('theme', $(this).data('theme'));
loadTheme();
});
loadTheme();
} (jQuery));