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. }