☰

W3Schools real darkmode

Making W3School's darkmode button, a real darkmode button.

  1. // ==UserScript==
  2. // @name         W3Schools real darkmode
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Making W3School's darkmode button, a real darkmode button.
  6. // @author       Alex_Joo
  7. // @match        https://www.w3schools.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.     var stylesheet = `
  14. /*Logo and login button*/
  15. .darktheme .top{background-color:#282c34!important;color:#f1f1f1!important;}
  16. .darktheme .w3schools-logo{color:#fff!important;}
  17. .darktheme .w3schools-logo:hover{color:#46a049!important;}
  18. .darktheme .login{color:#282c34!important;}
  19. /*NavBar and dropdown*/
  20. .darktheme .w3-bar{color:#282c34!important;}
  21. .darktheme .w3-hover-white:hover{background-color:#282c34!important;color:#fff!important;}
  22. .darktheme nav.w3-light-grey{background-color:#282c34!important;color:#f1f1f1!important;}
  23. .darktheme nav.w3-light-grey h3{color:#fff!important;}
  24. .darktheme nav.w3-light-grey .w3-button:hover{background-color:#333239!important;color:#fff!important;}
  25. /*sidebar*/
  26. .darktheme .w3-sidebar{background-color:#282c34!important;color:#f1f1f1!important;}
  27. .darktheme .w3-sidebar h4{color:#fff!important;}
  28. .darktheme .w3-sidebar .w3-button:hover{background-color:#333239!important;color:#fff!important;}
  29. /*main*/
  30. .darktheme #main{background-color:#282c34!important;color:#f1f1f1!important;}
  31. .darktheme #main .w3-row, .darktheme #main .w3-row .w3-text-dark-grey,{color:#f1f1f1!important;}
  32. .darktheme #main .w3-row h1,.darktheme #main .w3-row h2,.darktheme #main .w3-row h3,.darktheme #main .w3-row h4,.darktheme #main .w3-row h5,.darktheme #main .w3-row h6{color:#fff!important;}
  33. .darktheme #main .w3-row p{color:#f1f1f1!important;}
  34. .darktheme #main div.w3-light-grey{background-color:#333239!important;color:#f1f1f1!important;}
  35. .darktheme #main .w3-button:not(.w3-theme){background-color:#111!important;color:#f1f1f1!important;}
  36. .darktheme #main .w3-button:not(.w3-theme):hover{background-color:#000!important;color:#fff!important;}
  37. .darktheme #main .w3-dark-grey{background-color:#282c34!important;}
  38. .darktheme #main .w3-dark-grey .w3-white{background-color:#333239!important;}
  39. .darktheme #main .w3-white{background-color:#333239!important;}
  40. .darktheme #main .w3-btn.w3-green{color:#282c34!important;}
  41. .darktheme .w3-button.w3-theme{color:#333239!important;}
  42. .darktheme #main .w3-text-dark-grey{color:#f1f1f1!important;}
  43. /*topnav*/
  44. .darktheme .topnav .w3-bar-item{background-color:#333239!important;color:#f1f1f1!important;}
  45. .darktheme .topnav .w3-bar-item:hover{background-color:#282c34!important;color:#fff!important;}
  46. .darktheme .topnav .w3-bar-item:focus{background-color:#282c34!important;color:#fff!important;}
  47. .darktheme .topnav .w3-bar{background-color:#333239!important;}
  48. /*topnav dropdown*/
  49. .darktheme .topnav{background-color:#282c34!important;}
  50. .darktheme .topnav .w3-row-padding .w3-bar-item{background-color:#282c34!important;color:#f1f1f1!important;}
  51. .darktheme .topnav .w3-row-padding .w3-bar-item:hover{background-color:#333239!important;color:#fff!important;}
  52. .darktheme .topnav .w3-row-padding .w3-bar-item:focus{background-color:#333239!important;color:#fff!important;}
  53. /*Info panel*/
  54. .darktheme .w3-info{background-color:#373d48!important;}
  55.  
  56. /*Other*/
  57. .darktheme .w3-btn{color:#282c34!important;}
  58. .darktheme .w3-example{background-color:#333239!important;color:#f1f1f1!important;}
  59. .darktheme #w3-exerciseform{background-color:#333239!important;}
  60. .darktheme .exercisewindow{background-color:#282c34!important; color:#f1f1f1!important;}
  61. .darktheme .exerciseprecontainer{background-color:#333239!important;color:#f1f1f1!important;}
  62. .darktheme input{background-color:#282c34!important;color:#f1f1f1!important;}
  63. .darktheme .bigbtn{background-color:#111!important;color:#f1f1f1!important;border-width:0px!important;}
  64. .darktheme .bigbtn:hover{background-color:#000!important;color:#fff!important;}
  65. .darktheme #leftmenuinnerinner{background-color:#282c34!important; color:#f1f1f1!important;}
  66. .darktheme #leftmenuinnerinner h2{color:#fff!important;}
  67. .darktheme #leftmenuinnerinner a:hover{background-color:#333239; color:#fff;}
  68. .darktheme #sidenav a.active {background-color:#4CAF50!important;color: #fff!important;}
  69. .darktheme .w3-main > .w3-white{background-color:#282c34!important;}
  70. .darktheme .sidesection{background-color:#333239!important;color:#f1f1f1!important;}
  71. .darktheme .w3-border .w3-button{background-color:#333239!important;color:#f1f1f1!important;border-width:0px}
  72. .darktheme .w3-border .w3-button:hover{background-color:#111!important;color:#fff!important;border-width:0px}
  73. .darktheme .w3-border {border:0px!important;}
  74. .darktheme #footer{color:#f1f1f1!important;}
  75. .darktheme .w3-button.w3-light-grey{background-color:#222!important;color:#f1f1f1!important;}
  76. .darktheme .w3-button.w3-light-grey:hover{background-color:#111!important;color:#fff!important;}
  77.  
  78. /*hr and borders*/
  79. .darktheme *{border-color:#333239!important;}
  80.  
  81. /*tables*/
  82. .darktheme table{background-color:#282c34!important;color:#f1f1f1!important;}
  83. .darktheme tr{background-color:#282c34!important;color:#f1f1f1!important;}
  84.  
  85. .darktheme .w3-codespan{background-color:#333239!important;color:#f2998c!important;}
  86. .darktheme .w3-note{background-color:#333239!important;}
  87. .darktheme .tut_overview{background-color:#333239!important;}
  88. .darktheme .active_overview{background-color:#333239!important;color:#f1f1f1!important;}
  89.  
  90.  
  91. /*scrollbar*/
  92. .darktheme ::-webkit-scrollbar{background-color:#282c34;}
  93. .darktheme ::-webkit-scrollbar-button{background-color:#333239;}
  94. .darktheme ::-webkit-scrollbar-thumb{background-color:#46a049}
  95. `
  96.  
  97. /*
  98. green: #46a049
  99. dark: #282c34
  100. darkdark: #333239
  101. lightdark: #373d48
  102. lightlight: #fff
  103. lightlightgrey: #f1f1f1
  104. grey: #616161
  105. red: #f2998c
  106. */
  107.  
  108. function changepagetheme(){
  109.     var cc = document.body.className;
  110.     if (cc.indexOf("darktheme") > -1) {
  111.         document.body.className = cc.replace("darktheme", "");
  112.         localStorage.setItem("preferredmode", "light");
  113.     } else {
  114.         document.body.className += " darktheme";
  115.         localStorage.setItem("preferredmode", "dark");
  116.     }
  117. }
  118.  
  119.     var styleelement = document.createElement("style");
  120.     styleelement.type = "text/css";
  121.     styleelement.innerHTML = stylesheet;
  122.     document.body.appendChild(styleelement);
  123. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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