Nascar.com - Dark Mode

Dark mode for Nascar.com!

  1. /* ==UserStyle==
  2. @name Nascar.com - Dark Mode
  3. @version 20241114.16.46
  4. @namespace typpi.online
  5. @description Dark mode for Nascar.com!
  6. @homepageURL https://github.com/Nick2bad4u/UserStyles
  7. @supportURL https://github.com/Nick2bad4u/UserStyles/issues
  8. @author Nick2bad4u
  9. @license UnLicense
  10.  
  11. @var color backgroundColor "Background Color" #282a36
  12. @var color linkColor "Link Color" #000
  13. @var color linkHoverColor "Link Hover Color" #ff79c6
  14. @var color cardColor "Card Color" #44475a
  15. @var color footerColor "Footer Color" #282a36
  16. @var color footerTextColor "Footer Text Color" #6272a4
  17. ==/UserStyle== */
  18.  
  19. @-moz-document domain("nascar.com") {
  20. /* Use the variables for colors */
  21. :root {
  22. --backgroundColor: var(backgroundColor);
  23. --linkColor: var(linkColor);
  24. --linkHoverColor: var(linkHoverColor);
  25. --cardColor: var(cardColor);
  26. --footerColor: var(footerColor);
  27. --footerTextColor: var(footerTextColor);
  28. }
  29.  
  30. /* Invert entire page for dark mode effect */
  31. html {
  32. filter: invert(1) hue-rotate(180deg) !important;
  33. background-color: var(--backgroundColor) !important;
  34. }
  35.  
  36. /* Revert inversion on images and videos */
  37. img:not(
  38. li:nth-child(2) > a > img,
  39. #top-nav-rewards-profile-logo > img,
  40. div > a > div > picture > img
  41. ),
  42. video,
  43. svg:not(li.top-nav-button.user-profile-button > a > svg),
  44. .video-container,
  45. picture,
  46. #footerSection,
  47. iframe {
  48. filter: invert(1) hue-rotate(180deg) !important;
  49. }
  50.  
  51. /* Revert inversion on specific elements (logos, ads, etc.) */
  52. .logo,
  53. .sponsor-logo,
  54. .ad-container,
  55. .social-icons,
  56. .team-logo,
  57. .icon {
  58. filter: invert(1) hue-rotate(180deg) !important;
  59. }
  60.  
  61. /* Revert inversion on elements that should keep their original color */
  62. .btn,
  63. button,
  64. .button,
  65. .navbar,
  66. .header,
  67. .footer {
  68. filter: invert(1) hue-rotate(180deg) !important;
  69. }
  70.  
  71. /* Adjust links and header/footer colors for better readability */
  72. a > svg > path,
  73. .nav-link {
  74. color: var(--linkColor) !important;
  75. }
  76.  
  77. a:hover {
  78. color: var(--linkHoverColor) !important;
  79. /* Pink on Hover */
  80. }
  81.  
  82. /* Further tweaks as needed */
  83. /* Example: Re-adjusting specific cards or sections */
  84. .card,
  85. .section,
  86. .news-item {
  87. background-color: var(--cardColor) !important;
  88. color: #f8f8f2 !important;
  89. }
  90.  
  91. /* Footer styling */
  92. footer,
  93. .footer {
  94. background-color: var(--footerColor) !important;
  95. color: var(--footerTextColor) !important;
  96. }
  97. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址