☰

GitIngest Dark Mode (GitHub Dark Inspired)

Applies a GitHub dark mode–like theme to GitIngest.

  1. /* ==UserStyle==
  2. @name           GitIngest Dark Mode (GitHub Dark Inspired)
  3. @namespace      github.com/openstyles/stylus
  4. @version        1.0.0
  5. @description    Applies a GitHub dark mode–like theme to GitIngest.
  6. @author         Nighthawk
  7. // @license MIT
  8. ==/UserStyle== */
  9. @-moz-document domain("gitingest.com") {
  10.     /* Base background and text */
  11.     body {
  12.         background-color: #0d1117 !important;
  13.         color: #c9d1d9 !important;
  14.     }
  15.  
  16.     /* Container backgrounds */
  17.     .main,
  18.     main,
  19.     .container,
  20.     .max-w-4xl,
  21.     .mx-auto {
  22.         background-color: transparent !important;
  23.     }
  24.  
  25.     /* Cards, panels, and borders */
  26.     .rounded-xl,
  27.     .border-\[3px\],
  28.     .border-gray-900 {
  29.         background-color: #161b22 !important;
  30.         border-color: #30363d !important;
  31.     }
  32.  
  33.     /* Form elements: inputs, textareas, and select */
  34.     input,
  35.     textarea,
  36.     select {
  37.         background-color: #0d1117 !important;
  38.         border: 1px solid #30363d !important;
  39.         color: #c9d1d9 !important;
  40.     }
  41.  
  42.     input::placeholder,
  43.     textarea::placeholder {
  44.         color: #8b949e !important;
  45.     }
  46.  
  47.     /* Buttons styling */
  48.     button,
  49.     a.button,
  50.     a[role="button"] {
  51.         background-color: #238636 !important;
  52.         border-color: #238636 !important;
  53.         color: #ffffff !important;
  54.         transition: background-color 0.2s, border-color 0.2s;
  55.     }
  56.  
  57.     button:hover,
  58.     a.button:hover,
  59.     a[role="button"]:hover {
  60.         background-color: #2ea043 !important;
  61.         border-color: #2ea043 !important;
  62.     }
  63.  
  64.     /* Hyperlinks */
  65.     a {
  66.         color: #58a6ff !important;
  67.     }
  68.  
  69.     a:hover {
  70.         text-decoration: underline !important;
  71.     }
  72.  
  73.     /* Header and Navigation */
  74.     header,
  75.     .navbar {
  76.         background-color: #161b22 !important;
  77.         border-bottom: 1px solid #30363d !important;
  78.     }
  79.  
  80.     /* Footer */
  81.     footer {
  82.         background-color: #161b22 !important;
  83.         border-top: 1px solid #30363d !important;
  84.         color: #c9d1d9 !important;
  85.     }
  86.  
  87.     /* Copy and similar UI buttons */
  88.     button,
  89.     .group button {
  90.         box-shadow: none !important;
  91.     }
  92.  
  93.     /* Range slider */
  94.     input[type="range"] {
  95.         background: #30363d !important;
  96.     }
  97.  
  98.     /* SVG icons: force to use currentColor for fill and stroke */
  99.     svg {
  100.         fill: currentColor !important;
  101.         stroke: currentColor !important;
  102.     }
  103.  
  104.     /* Code blocks and monospaced text */
  105.     .font-mono,
  106.     pre,
  107.     code {
  108.         background-color: #161b22 !important;
  109.         color: #c9d1d9 !important;
  110.         border: 1px solid #30363d !important;
  111.     }
  112.  
  113.     /* Inline background overrides for Tailwind classes (using attribute escapes) */
  114.     .bg-\[\#fff4da\],
  115.     .bg-\[\#FAFAFA\],
  116.     .bg-\[\#fafafa\] {
  117.         background-color: #161b22 !important;
  118.     }
  119.  
  120.     .bg-\[\#ffc480\] {
  121.         background-color: #238636 !important;
  122.     }
  123.  
  124.     .bg-gray-900 {
  125.         background-color: #161b22 !important;
  126.     }
  127.  
  128.     /* Adjust pseudo-shadow offsets (Tailwind translate classes) */
  129.     .translate-y-2,
  130.     .translate-x-2 {
  131.         background-color: #0d1117 !important;
  132.     }
  133.  
  134.     /* Prose content (for documentation pages) */
  135.     .prose {
  136.         color: #c9d1d9 !important;
  137.     }
  138.  
  139.     .prose a {
  140.         color: #58a6ff !important;
  141.     }
  142.  
  143.     .prose blockquote {
  144.         border-left: 4px solid #30363d !important;
  145.         color: #8b949e !important;
  146.     }
  147.  
  148.     /* Loader spinners */
  149.     .animate-spin {
  150.         color: #ffffff !important;
  151.     }
  152.  
  153.     /* Override text color utilities if needed */
  154.     .text-gray-900 {
  155.         color: #c9d1d9 !important;
  156.     }
  157.  
  158.     .text-gray-600 {
  159.         color: #8b949e !important;
  160.     }
  161.  
  162.     /* Override any additional light backgrounds */
  163.     .bg-\[\#e6e8eb\],
  164.     .bg-white {
  165.         background-color: #161b22 !important;
  166.     }
  167. }