micz29

dark mode for website

Dec 7th, 2021
882
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. css
  2.  
  3. .switch {
  4.   position: relative;
  5.   display: inline-block;
  6.   width: 60px;
  7.   height: 34px;
  8. }
  9.  
  10. .switch input {
  11.   opacity: 0;
  12.   width: 0;
  13.   height: 0;
  14. }
  15.  
  16. .slider {
  17.   position: absolute;
  18.   cursor: pointer;
  19.   top: 0;
  20.   left: 0;
  21.   right: 0;
  22.   bottom: 0;
  23.   background-color: #ccc;
  24.   -webkit-transition: .4s;
  25.   transition: .4s;
  26. }
  27.  
  28. .slider:before {
  29.   position: absolute;
  30.   content: "";
  31.   height: 26px;
  32.   width: 26px;
  33.   left: 4px;
  34.   bottom: 4px;
  35.   background-color: white;
  36.   -webkit-transition: .4s;
  37.   transition: .4s;
  38. }
  39.  
  40. input:checked + .slider {
  41.   background-color: #2196F3;
  42. }
  43.  
  44. input:focus + .slider {
  45.   box-shadow: 0 0 1px #2196F3;
  46. }
  47.  
  48. input:checked + .slider:before {
  49.   -webkit-transform: translateX(26px);
  50.   -ms-transform: translateX(26px);
  51.   transform: translateX(26px);
  52. }
  53.  
  54. /* Rounded sliders */
  55. .slider.round {
  56.   border-radius: 34px;
  57. }
  58.  
  59. .slider.round:before {
  60.   border-radius: 50%;
  61. }
  62. body {
  63.   padding: 25px;
  64.   background-color: white;
  65.   color: black;
  66.   font-size: 25px;
  67. }
  68.  
  69. .dark-mode {
  70.   background-color: black;
  71.   color: white;
  72. }
  73. body {
  74.   padding: 25px;
  75.   background-color: white;
  76.   color: black;
  77.   font-size: 25px;
  78. }
  79.  
  80. .dark-mode {
  81.   background-color: black;
  82.   color: white;
  83. }
  84.  
  85. ----------------------------------------------------------------
  86. html
  87.  
  88. <h2>Toggle Switch</h2>
  89.  
  90.  
  91. <label class="switch">
  92.   <input type="checkbox" onchange="myFunction()">
  93.   <span class="slider round"></span>
  94. </label>
  95.  
  96. <script>
  97. function myFunction() {
  98.    var element = document.body;
  99.    element.classList.toggle("dark-mode");
  100. }
  101. </script>
  102.   </script>
RAW Paste Data