☰

qnaHabrDark

Темная тема для QNA Habr

  1. // ==UserScript==
  2. // @name         qnaHabrDark
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Темная тема для QNA Habr
  6. // @author       DiceMasters
  7. // @match        https://qna.habr.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     const DARK_THEME_BUTTON = document.createElement('li')
  15.           DARK_THEME_BUTTON.classList.add('main-menu__item')
  16.           DARK_THEME_BUTTON.setAttribute('id', 'dm-dark-theme')
  17.           DARK_THEME_BUTTON.innerHTML = '<a class="main-menu__link" href="#"><svg id="Capa_1" class="icon_svg icon_menu_notification" width="18px" height="18px" viewBox="0 0 483.48 483.48" style="enable-background:new 0 0 483.48 483.48; color: #a7b3cb;"	 xml:space="preserve"><g>	<g>		<path d="M361.08,0H122.4C54.799,0,0,54.798,0,122.4v238.68c0,67.602,54.799,122.4,122.4,122.4h238.68			c67.602,0,122.4-54.799,122.4-122.4V122.4C483.48,54.798,428.682,0,361.08,0z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>Темная тема</a>'
  18.  
  19.     if (localStorage.getItem('toster-dm-dt') && localStorage.getItem('toster-dm-dt') === 'on') {
  20.         document.querySelector('.layout__body').classList.add('dm_dark_theme-page')
  21.     }
  22.  
  23.     DARK_THEME_BUTTON.addEventListener('click', function(e) {
  24.         e.preventDefault()
  25.         let el = document.querySelector('.layout__body')
  26.         if (el.classList.contains('dm_dark_theme-page')) {
  27.             document.querySelector('.layout__body').classList.remove('dm_dark_theme-page')
  28.             localStorage.setItem('toster-dm-dt', 'off')
  29.         } else {
  30.             document.querySelector('.layout__body').classList.add('dm_dark_theme-page')
  31.             localStorage.setItem('toster-dm-dt', 'on')
  32.         }
  33.     })
  34.  
  35.     document.getElementsByClassName('main-menu')[1].append(DARK_THEME_BUTTON)
  36.  
  37.     const CSS = '.dm_dark_theme-page .page__header,.dm_dark_theme-page .page__tabs,.dm_dark_theme-page .page__filters,.dm_dark_theme-page, .dm_dark_theme-page:before, .dm_dark_theme-page .page__body{background-color:#303b44}.dm_dark_theme-page .user-summary__name{color:white}.dm_dark_theme-page .tags-list__item>a{color:white !important}.dm_dark_theme-page .question__title,.dm_dark_theme-page .question__title>*,.dm_dark_theme-page .question__body,.dm_dark_theme-page .question__body>*:not(time){color:white}.dm_dark_theme-page .section-header{border-bottom:2px solid white}.dm_dark_theme-page .section-header>.section-header__title,.dm_dark_theme-page .answer__text{color:white}.dm_dark_theme-page .column_sidebar .panel-heading_inner{background-color:#303b44}.dm_dark_theme-page .column_sidebar .panel-heading__title,.dm_dark_theme-page .column_sidebar .question__title-link,.dm_dark_theme-page .inline-list_meta-attrs .inline-list__item span{color:white}.dm_dark_theme-page .page__header-title{color:#fff;}.dm_dark_theme-page .filters-menu{background-color:#303b44}.dm_dark_theme-page .filters-menu .filters-menu__link:not(.filters-menu__link_active){color:white !important;}'
  38.     let head = document.head || document.getElementsByTagName('head')[0],
  39.         style = document.createElement('style')
  40.  
  41.     head.appendChild(style)
  42.  
  43.     style.type = 'text/css'
  44.     if (style.styleSheet){
  45.         // This is required for IE8 and below.
  46.         style.styleSheet.cssText = CSS
  47.     } else {
  48.         style.appendChild(document.createTextNode(CSS))
  49.     }
  50. })();