☰

Greasy Fork is available in English.

Dwitter Tweaks

Tweak Dwitter with extreme dark theme

// ==UserScript==
// @name         Dwitter Tweaks
// @namespace    https://greasyfork.org/en/users/8615-joeytwiddle
// @version      0.1.4
// @description  Tweak Dwitter with extreme dark theme
// @author       joeytwiddle
// @license      ISC
// @match        https://beta.dwitter.net/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
  'use strict';

  // In theory I like the dark background.
  // But in practice is causes my retinas to open, which then get overwhelmed by the bright white of the default canvas!
  // So a somewhat lighter dark theme can help to keep my eyes prepared.

  const hue = 210;
  const sat = 30;

  // 6, 11, 8
  // 9, 13, 11
  // 13, 19, 11

  GM_addStyle(`
    /*
    :root {
      --pageBackgroundColor: #0b0b0b;
      --mainBackgroundColor: #1b1b1b;
    }
    */
    .App {
      background: hsl(${hue}, ${sat}%, 11%) !important;
    }
    .App > header, .card {
      background: hsl(${hue}, ${sat}%, 20%);
    }
    /* Code textarea */
    .card .mb-3+div,
    input.form-control, input.form-control[readonly],
    /* "Theme challenge of the month" */
    .card.text-center.mb-3.px-3 > div {
      background: hsl(${hue}, ${sat}%, 15%) !important;
    }
    input.form-control, input.form-control[readonly] {
      border: 0;
    }
    /* Inside the comment box, use a nice dull blue for the button */
    .card > form > div > div > .btn-secondary,
    .card > form > div > div > .btn-secondary.disabled,
    .card > form > div > div > .btn-secondary:disabled,
    .card > form > div > div > .btn-primary,
    .card > form > div > div > .btn-primary.disabled,
    .card > form > div > div > .btn-primary:disabled,
    /* And also for the awesomed Awesome button */
    .btn-primary {
      background-color: hsl(211, 70%, 24%);
      border-color: hsl(211, 70%, 24%);
    }
    .shadow-primary {
      box-shadow: none !important;
    }
  `);
})();