Код:

<!-- theme selector with mobile/desktop switcher by g.vatueil START-->
<style>
  @media (min-device-width: 768px) { /* скрывать кнопки переключения версий на десктопе */
    #vtlThemeSelector .gv-viewport-toggler {
      display: none;
    }
  }
</style>
<script type="text/javascript">
  
  if (window.gscript == null) window.gscript = {};
  window.gscript.themes = [
    {
      name: "light",
      color: "#9d9a96"
    },
    {
      name: "dark",
      color: "#383738"
    },
  ];
  
  window.gscript.defaultTheme = "light"; // тема по умолчанию
  window.gscript.darkTheme = "dark"; // темная тема
  window.gscript.fullVerText = "Полная версия"; // текст на кнопке для перехода на полную версию
  window.gscript.mobVerText = "Мобильная версия"; // текст на кнопке для перехода на мобильную версию
// дополнительно
  window.gscript.useDataAttr = false; // использовать атрибут вместо класса
  window.gscript.scaleDesktop = "0.4" // коэффициент масштабирования для десктопной версии
  window.gscript.appendTo="body"; // куда добавить переключатель

</script> 
<script src="https://forumstatic.ru/files/001c/56/64/31866.js"></script>
<!-- theme selector with mobile/desktop switcher by g.vatueil END -->

window.gscript.fullVerText значение по умолчанию: full version	текст, который будет отображаться на кнопке перехода на полную версию.
window.gscript.mobVerText значение по умолчанию: mobile version	текст, который будет отображаться на кнопке перехода в мобильную версию
window.gscript.appendTo значение по умолчанию: body	CSS-селектор элемента, в самый конец которого который добавится панель выбора темы (например, "#html-header"). Если на странице уже есть элемент с id vtlThemeSelector, параметр игнорируется.
window.gscript.scaleDesktop значение по умолчанию: 0.36	коэфициент для десктопного вида -- дробное число c точкой в качестве десятичного разделителя. Как его рассчитать Поделить ширину мобильного устройства на ширину желательной области просмотра и округлить до двух знаков после запятой. При просмотре форума на устройстве с шириной экрана 375px коэффициент 0.36 примерно соответствует ширине области просмотра в 1040px и т.д.
window.gscript.useDataAttr значение по умолчанию: false	Указывает скрипту, что нужно добавлять не класс к body, а атрибут вида data-theme="themeName" к html. Как использовать в CSS :root {   --color: black; } :root[data-theme="red"] {   --color: red; } Миграция с класса на атрибут: .dark  -->  [data-theme="dark"] body.dark  -->  [data-theme="dark"] body

Код:

<!-- theme selector with mobile/desktop switcher by g.vatueil START-->
<style>
  @media (min-device-width: 768px) { /* скрывать кнопки переключения версий на десктопе */
    #vtlThemeSelector .gv-viewport-toggler {
      display: none;
    }
  }
</style>
<script type="text/javascript">
  if (window.gscript == null) window.gscript = {};
  window.gscript.themes = [
    {
      name: "red",
      color: "#f44336"
    },
    {
      name: "blue",
      color: "#4F5597"
    },
    {
      name: "black",
      color: "#383738"
    },
  ];
  
  window.gscript.darkTheme = "black";
  window.gscript.defaultTheme = "blue";
  window.gscript.fullVerText = "Полная версия";
  window.gscript.mobVerText = "Мобильная версия";
</script> 
<script src="https://forumstatic.ru/files/001c/56/64/31866.js"></script>
<!-- theme selector with mobile/desktop switcher by g.vatueil END -->

вставляется в первое окно стилей или в html-верх в теги <style>

Код:

.blue {
  background: #8c90a7;
}

.black {
  background: #28292f;
}

#vtlThemeSelector {
  width: 200px;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  --button-border: 1px solid rgba(0,0,0, 0.4);
}

.black #vtlThemeSelector {
    --button-border: 1px solid rgba(179,179,179, 0.4);
}

#vtlThemeSelector button {
  cursor: pointer;
  border-radius: 3px;
  border: var(--button-border);
  padding: .2rem .4rem;
}

#vtlThemeSelector .vtl-theme-toggler {
  color: transparent;
  opacity: 0.7;
}

#vtlThemeSelector .vtl-theme-toggler:hover {
  opacity: 0.85;
}

#vtlThemeSelector .vtl-theme-toggler.active {
  opacity: 1;
  outline: var(--button-border);
  outline-offset: 1px;
}

#vtlThemeSelector .vtl-viewport-toggler {
  grid-column: 3 span;
}

Код:

<!-- theme selector with mobile/desktop switcher by g.vatueil START-->
<style>
  @media (min-device-width: 768px) { /* скрывать кнопки переключения версий на десктопе */
    #vtlThemeSelector .gv-viewport-toggler {
      display: none;
    }
  }
</style>
<script type="text/javascript">
if (window.gscript == null) window.gscript = {};
window.gscript.themes = [
  {
    name: "light",
    color: "#f1ecde"
  },
  {
    name: "dark",
    color: "#5d3434"
  },
];

window.gscript.darkTheme = "dark";
window.gscript.defaultTheme = "light";
window.gscript.useDataAttr = true;
window.gscript.scaleDesktop = "0.36"
window.gscript.appendTo = ".theme-example";
</script>
<script src="https://forumstatic.ru/files/001c/56/64/31866.js"></script>
<!-- theme selector with mobile/desktop switcher by g.vatueil END -->

Код:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
:root {
  --background: #f1ecde;
  --button-border: 1px solid rgba(93,52,52, 0.2);
  --button-color: #5d3434;
  --button-background: #f1ecde;
}

:root[data-theme="dark"] {
  --background: #312222;
  --button-border: 1px solid rgba(93,52,52, 0.2);
  --button-color: #5d3434;
  --button-background: #f1ecde;  
}

.theme-example {
  background-color: var(--background);
  padding: 50px;
}

#vtlThemeSelector {
  width: 200px;
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
}

#vtlThemeSelector button {
  cursor: pointer;
  border-radius: 3px;
  color: transparent;
  border: var(--button-border);
  padding: .2rem .4rem;
  text-align: center;
  font-size: 0;
  background-color: var(--button-background);
  opacity: 0.7;
}

#vtlThemeSelector button:hover {
  opacity: 0.85;
}

#vtlThemeSelector button::before { /* font awesome styles */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  font-size: 1rem;
  line-height: 1;
  text-rendering: auto;
  font-family: "Font Awesome 6 Free";
  color: var(--button-color);
}

#vtlThemeSelector .vtl-theme-toggler.active {
  opacity: 1;  
}

#vtlThemeSelector .vtl-theme-toggler[data-theme="light"]::before {
  content: "\f185"; /* fa-sun */
  font-weight: 900;
}

#vtlThemeSelector .vtl-theme-toggler[data-theme="dark"]::before {
  content: "\f186"; /* fa-moon */
  font-weight: 900;
  color: #f1ecde;
}

#vtlThemeSelector .vtl-viewport-toggler::before {
  content: "\f390"; /* fa-desktop */
  font-weight: 900;
}

#vtlThemeSelector .vtl-viewport-toggler.mobile::before {
  content: "\f3cd"; /* fa-mobile-screen-button */
  font-weight: 900;
}