MGoBlog Dark Mode

Makes MGoBlog website dark.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Для установки этого скрипта вам необходимо установить расширение, такое как Tampermonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Advertisement:

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

Advertisement:

// ==UserScript==
// @name         MGoBlog Dark Mode
// @namespace    Violentmonkey Scripts
// @version      1.1.0
// @description  Makes MGoBlog website dark.
// @author       Jerry Haagsma
// @match        *://mgoblog.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mgoblog.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
  'use strict';

  const DARK_COLOR = '#00162a';
  const MEDIUM_COLOR = '#989c97';
  const LIGHT_COLOR = '#fafafa';

  const highContrastSelectors = [
    // Body (visible when scrolling down to refresh)
    'body',

    '.page-content',

    // Post content wrapper
    '#block-mgoblog-content .content',
    '.content',

    // Comments section
    '.pager .pager__items',
    '.view-content',
    '.thread-wrapper',
    '#comments > .view-content',

    // Comments text field
    'div.ck > .ck-editor__main > .ck-editor__editable',

    // Homepage feed article
    '.view-primary-articles .views-row',
    '.view-secondary-articles .views-row',

    '.content-wrapper',
    '.block',

    // Search input
    'input.form-search',

    // Tables
    'tr',
    'tr:nth-child(2n)',
    'tr td',

    // Comments heading
    '.comments-filter h1',

    // Comments user data
    '.comment__footer > .comment__user-data',
  ];

  const getHighContrastCssForSelector = (selector) => `${selector} {
    background-color: ${DARK_COLOR};
    color: ${LIGHT_COLOR};
  }`;

  const mediumTextSelectors = [
    // MGoBoard side bar replies count
    '.views-row > .views-field-comment-count',

    // Homepage article author name
    '.view-primary-articles .views-row .views-field-byline a',
    '.view-secondary-articles .views-row .views-field-byline a',

    // Diaries author name
    '.sidebar .view .views-field-uid a',
  ];

  const getMediumTextCssForSelector = (selector) => `${selector} {
    color: ${MEDIUM_COLOR};
  }`;

  const removePageBackgroundImage = `
    .page-content {
      background-size: 0;
    }
  `;

  const enableLogoHeader = `
    #block-frontpagelogoheader > .content {
      background-color: transparent;
    }
  `;

  const css = `
    ${highContrastSelectors.map(getHighContrastCssForSelector).join('\n\n')}

    ${mediumTextSelectors.map(getMediumTextCssForSelector).join('\n\n')}

    a {
      color: ${LIGHT_COLOR};
    }

    ${removePageBackgroundImage}

    ${enableLogoHeader}
  `;

  document
    .head
    .insertAdjacentHTML('beforeend', `<style>${css}</style>`);
})();