☰

Dwitter Tweaks

Tweak Dwitter with extreme dark theme

  1. // ==UserScript==
  2. // @name         Dwitter Tweaks
  3. // @namespace    https://greasyfork.org/en/users/8615-joeytwiddle
  4. // @version      0.1.4
  5. // @description  Tweak Dwitter with extreme dark theme
  6. // @author       joeytwiddle
  7. // @license      ISC
  8. // @match        https://beta.dwitter.net/*
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.   'use strict';
  14.  
  15.   // In theory I like the dark background.
  16.   // But in practice is causes my retinas to open, which then get overwhelmed by the bright white of the default canvas!
  17.   // So a somewhat lighter dark theme can help to keep my eyes prepared.
  18.  
  19.   const hue = 210;
  20.   const sat = 30;
  21.  
  22.   // 6, 11, 8
  23.   // 9, 13, 11
  24.   // 13, 19, 11
  25.  
  26.   GM_addStyle(`
  27.     /*
  28.     :root {
  29.       --pageBackgroundColor: #0b0b0b;
  30.       --mainBackgroundColor: #1b1b1b;
  31.     }
  32.     */
  33.     .App {
  34.       background: hsl(${hue}, ${sat}%, 11%) !important;
  35.     }
  36.     .App > header, .card {
  37.       background: hsl(${hue}, ${sat}%, 20%);
  38.     }
  39.     /* Code textarea */
  40.     .card .mb-3+div,
  41.     input.form-control, input.form-control[readonly],
  42.     /* "Theme challenge of the month" */
  43.     .card.text-center.mb-3.px-3 > div {
  44.       background: hsl(${hue}, ${sat}%, 15%) !important;
  45.     }
  46.     input.form-control, input.form-control[readonly] {
  47.       border: 0;
  48.     }
  49.     /* Inside the comment box, use a nice dull blue for the button */
  50.     .card > form > div > div > .btn-secondary,
  51.     .card > form > div > div > .btn-secondary.disabled,
  52.     .card > form > div > div > .btn-secondary:disabled,
  53.     .card > form > div > div > .btn-primary,
  54.     .card > form > div > div > .btn-primary.disabled,
  55.     .card > form > div > div > .btn-primary:disabled,
  56.     /* And also for the awesomed Awesome button */
  57.     .btn-primary {
  58.       background-color: hsl(211, 70%, 24%);
  59.       border-color: hsl(211, 70%, 24%);
  60.     }
  61.     .shadow-primary {
  62.       box-shadow: none !important;
  63.     }
  64.   `);
  65. })();