☰

Themes for Mangalib

This script will add new topics to Mangalib. Five whole new themes!

  1. // ==UserScript==
  2.  
  3. // @name         Themes for Mangalib
  4. // @name:ru      Темы для Mangalib
  5. // @namespace    http://tampermonkey.net/
  6.  
  7. // @version      2.0
  8.  
  9. // @description      This script will add new topics to Mangalib. Five whole new themes!
  10. // @description:ru   Этот скрипт добавит новые темы на Mangalib. Целых 5 новых тем!
  11.  
  12. // @author       TheTime
  13.  
  14. // @match        https://mangalib.me/*
  15.  
  16. // @icon         https://www.google.com/s2/favicons?sz=64&domain=mangalib.me
  17. // @grant           GM_info
  18. // @grant           GM_addStyle
  19. // @grant           GM_xmlhttpRequest
  20. // @run-at          document-body
  21. // @license         MIT
  22.  
  23. // ==/UserScript==
  24.  
  25. (function() {
  26.     'use strict';
  27.  
  28. GM_addStyle(`
  29.  
  30. .theme-switcher {
  31.   position: fixed;
  32.   top: 5px;
  33.   right: 535px;
  34.   z-index: 1000;
  35. }
  36.  
  37. #theme-selector {
  38.   padding: 10px;
  39.   border: 1px solid #fff;
  40.   border-radius: 5px;
  41.   background-color: var(--background-header);
  42.   cursor: pointer;
  43.   color: #fff;
  44. }
  45.  
  46. #theme-selector option {
  47.   background-color: var(--background-header);
  48.   color: #fff;
  49. }
  50.  
  51.  
  52. `)
  53.  
  54. const themeSelectorContainer = document.createElement("div");
  55. themeSelectorContainer.classList.add("theme-switcher");
  56.  
  57. const themeSelector = document.createElement("select");
  58. themeSelector.id = "theme-selector";
  59.  
  60. themeSelector.innerHTML = `
  61.   <option value="standart">Стандартная тема</option>
  62.   <option value="fiol">Фиолетовая Тема</option>
  63.   <option value="red">Красная тема</option>
  64.   <option value="blue">Синяя тема</option>
  65.   <option value="green">Зеленая тема</option>
  66.   <option value="pink">Розовая тема</option>
  67. `;
  68.  
  69. themeSelectorContainer.appendChild(themeSelector);
  70.  
  71. const headerMenu = document.querySelector('.header__menu'); // Находим элемент с классом "header__menu"
  72. headerMenu.appendChild(themeSelectorContainer);
  73.  
  74. const savedTheme = localStorage.getItem("selectedTheme");
  75.  
  76. if (savedTheme) {
  77.     themeSelector.value = savedTheme;
  78.     applyTheme(savedTheme);
  79. }
  80.  
  81. themeSelector.addEventListener("change", function() {
  82.     const selectedTheme = themeSelector.value;
  83.     applyTheme(selectedTheme);
  84.     localStorage.setItem("selectedTheme", selectedTheme);
  85. });
  86.  
  87. function applyTheme(theme) {
  88.   if (document.documentElement.getAttribute('data-mode') === 'dark') {
  89.     if (theme === "standart") {
  90.         document.body.style.setProperty('--button-primary-bg', '#ffa332');
  91.         document.body.style.setProperty('--button-primary-bg-hover', '#ff8c00');
  92.         document.body.style.setProperty('--button-primary-bg-active', '#f28500');
  93.         document.body.style.setProperty('--text-link', '#f29766');
  94.         document.body.style.setProperty('--primary', '#ff8c00');
  95.         document.body.style.setProperty('--primary-lighten', '#ffa332');
  96.         document.body.style.setProperty('--primary-darken', '#ffa332');
  97.         document.body.style.setProperty('--background-header', '#1c1c1e');
  98.     } else if (theme === "fiol") {
  99.         document.body.style.setProperty('--button-primary-bg', '#7a506f');
  100.         document.body.style.setProperty('--button-primary-bg-hover', '#a87ca0');
  101.         document.body.style.setProperty('--button-primary-bg-active', '#1c1c1e');
  102.         document.body.style.setProperty('--text-link', '#a87ca0');
  103.         document.body.style.setProperty('--primary', '#7a506f');
  104.         document.body.style.setProperty('--primary-lighten', '#7a506f');
  105.         document.body.style.setProperty('--primary-darken', '#7a506f');
  106.         document.body.style.setProperty('--background-header', '#1c1c1e');
  107.     } else if (theme === "red") {
  108.         document.body.style.setProperty('--button-primary-bg', '#d9534f');
  109.         document.body.style.setProperty('--button-primary-bg-hover', '#ec6965');
  110.         document.body.style.setProperty('--button-primary-bg-active', '#d9534f');
  111.         document.body.style.setProperty('--text-link', '#ec6965');
  112.         document.body.style.setProperty('--primary', '#d9534f');
  113.         document.body.style.setProperty('--primary-lighten', '#d9534f');
  114.         document.body.style.setProperty('--primary-darken', '#d9534f');
  115.         document.body.style.setProperty('--background-header', '#1c1c1e');
  116.     } else if (theme === "blue") {
  117.         document.body.style.setProperty('--button-primary-bg', '#5bc0de');
  118.         document.body.style.setProperty('--button-primary-bg-hover', '#87d3f2');
  119.         document.body.style.setProperty('--button-primary-bg-active', '#5bc0de');
  120.         document.body.style.setProperty('--text-link', '#87d3f2');
  121.         document.body.style.setProperty('--primary', '#5bc0de');
  122.         document.body.style.setProperty('--primary-lighten', '#5bc0de');
  123.         document.body.style.setProperty('--primary-darken', '#5bc0de');
  124.         document.body.style.setProperty('--background-header', '#1c1c1e');
  125.     } else if (theme === "pink") {
  126.         document.body.style.setProperty('--button-primary-bg', '#ff69b4');
  127.         document.body.style.setProperty('--button-primary-bg-hover', '#ff8eb1');
  128.         document.body.style.setProperty('--button-primary-bg-active', '#ff69b4');
  129.         document.body.style.setProperty('--text-link', '#ff8eb1');
  130.         document.body.style.setProperty('--primary', '#ff69b4');
  131.         document.body.style.setProperty('--primary-lighten', '#ff69b4');
  132.         document.body.style.setProperty('--primary-darken', '#ff69b4');
  133.         document.body.style.setProperty('--background-header', '#1c1c1e');
  134.     } else if (theme === "green") {
  135.         document.body.style.setProperty('--button-primary-bg', '#00ff00');
  136.         document.body.style.setProperty('--button-primary-bg-hover', '#00cc00');
  137.         document.body.style.setProperty('--button-primary-bg-active', '#009900');
  138.         document.body.style.setProperty('--text-link', '#00cc00');
  139.         document.body.style.setProperty('--primary', '#00ff00');
  140.         document.body.style.setProperty('--primary-lighten', '#33ff33');
  141.         document.body.style.setProperty('--primary-darken', '#009900');
  142.         document.body.style.setProperty('--background-header', '#1c1c1e');
  143.     }
  144.   } else if (document.documentElement.getAttribute('data-mode') === 'light'){
  145.     if (theme === "standart") {
  146.         document.body.style.setProperty('--button-primary-bg', '#ffa332');
  147.         document.body.style.setProperty('--button-primary-bg-hover', '#ff8c00');
  148.         document.body.style.setProperty('--button-primary-bg-active', '#f28500');
  149.         document.body.style.setProperty('--text-link', '#f29766');
  150.         document.body.style.setProperty('--primary', '#ff8c00');
  151.         document.body.style.setProperty('--primary-lighten', '#ffa332');
  152.         document.body.style.setProperty('--primary-darken', '#ffa332');
  153.         document.body.style.setProperty('--background-header', '#e48f13');
  154.     } else if (theme === "fiol") {
  155.         document.body.style.setProperty('--button-primary-bg', '#7a506f');
  156.         document.body.style.setProperty('--button-primary-bg-hover', '#a87ca0');
  157.         document.body.style.setProperty('--button-primary-bg-active', '#7a506f');
  158.         document.body.style.setProperty('--text-link', '#a87ca0');
  159.         document.body.style.setProperty('--primary', '#7a506f');
  160.         document.body.style.setProperty('--primary-lighten', '#7a506f');
  161.         document.body.style.setProperty('--primary-darken', '#7a506f');
  162.         document.body.style.setProperty('--background-header', '#7a506f');
  163.     } else if (theme === "red") {
  164.         document.body.style.setProperty('--button-primary-bg', '#d9534f');
  165.         document.body.style.setProperty('--button-primary-bg-hover', '#ec6965');
  166.         document.body.style.setProperty('--button-primary-bg-active', '#d9534f');
  167.         document.body.style.setProperty('--text-link', '#ec6965');
  168.         document.body.style.setProperty('--primary', '#d9534f');
  169.         document.body.style.setProperty('--primary-lighten', '#d9534f');
  170.         document.body.style.setProperty('--primary-darken', '#d9534f');
  171.         document.body.style.setProperty('--background-header', '#d9534f');
  172.     } else if (theme === "blue") {
  173.         document.body.style.setProperty('--button-primary-bg', '#5bc0de');
  174.         document.body.style.setProperty('--button-primary-bg-hover', '#87d3f2');
  175.         document.body.style.setProperty('--button-primary-bg-active', '#5bc0de');
  176.         document.body.style.setProperty('--text-link', '#87d3f2');
  177.         document.body.style.setProperty('--primary', '#5bc0de');
  178.         document.body.style.setProperty('--primary-lighten', '#5bc0de');
  179.         document.body.style.setProperty('--primary-darken', '#5bc0de');
  180.         document.body.style.setProperty('--background-header', '#5bc0de');
  181.     } else if (theme === "pink") {
  182.         document.body.style.setProperty('--button-primary-bg', '#ff69b4');
  183.         document.body.style.setProperty('--button-primary-bg-hover', '#ff8eb1');
  184.         document.body.style.setProperty('--button-primary-bg-active', '#ff69b4');
  185.         document.body.style.setProperty('--text-link', '#ff8eb1');
  186.         document.body.style.setProperty('--primary', '#ff69b4');
  187.         document.body.style.setProperty('--primary-lighten', '#ff69b4');
  188.         document.body.style.setProperty('--primary-darken', '#ff69b4');
  189.         document.body.style.setProperty('--background-header', '#ff69b4');
  190.     } else if (theme === "green") {
  191.         document.body.style.setProperty('--button-primary-bg', '#00ff00');
  192.         document.body.style.setProperty('--button-primary-bg-hover', '#00cc00');
  193.         document.body.style.setProperty('--button-primary-bg-active', '#009900');
  194.         document.body.style.setProperty('--text-link', '#00cc00');
  195.         document.body.style.setProperty('--primary', '#00ff00');
  196.         document.body.style.setProperty('--primary-lighten', '#33ff33');
  197.         document.body.style.setProperty('--primary-darken', '#009900');
  198.         document.body.style.setProperty('--background-header', '#005700');
  199.     }
  200.   }
  201. }
  202.  
  203. })();