Bootstrap 4 Dark Mode Switch
5 ก.พ. 2020 , 4,287 Views , หมวดหมู่ WebDesign โค๊ดดิ้ง , ป้ายกำกับ:Bootstrap, Dark Mode, Switch
หากเว็บไซต์ของเราใช้ Bootstrap อยู่แล้ว เพื่อถนอมสายตา เราสามารถทำให้เว็บเรา สลับโหมดระหว่าง Light Mode กับ Dark Mode สำหรับ Bootstrap 4 ได้ครับ
ตัวอย่าง https://coliff.github.io/dark-mode-switch/index.html
เริ่มแรกให้ดาวน์โหลดไฟล์ตามลิ้งค์นี้ครับ https://github.com/coliff/dark-mode-switch
ดาวน์โหลดมาเราจะได้ไฟล์หลักๆอยู่ 2 ไฟล์คือ
dark-mode.css
dark-mode-switch.min.js
แล้วลองโค๊ดตามตัวอย่างด้านล่างครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!doctype html> <html lang="en" class="h-100"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dark Mode Switch</title> <meta name="description" content="Add a dark-mode theme toggle with a Bootstrap Custom Switch"> <meta property="og:site_name" content="GitHub"> <meta property="og:image" content="https://repository-images.githubusercontent.com/194995309/38db8f80-9db7-11e9-998f-43f2a26d9e0b"> <meta property="og:title" content="dark-mode-switch"> <meta property="og:description" content="Add a dark-mode theme toggle with a Bootstrap Custom Switch"> <meta property="og:url" content="https://coliff.github.io/dark-mode-switch/"> <link rel="author" href="https://christianoliff.com/"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="dark-mode.css"> </head> <body class="bg-white text-center d-flex h-100"> <div class="container d-flex p-3 mx-auto flex-column"> <header class="mb-auto"> <h3 class="float-left">Dark Mode Switch</h3> <nav class="nav justify-content-center float-right"> <a class="nav-link active" href="https://coliff.github.io/dark-mode-switch/">Home</a> <a class="nav-link" href="https://github.com/coliff/dark-mode-switch" target="_blank">GitHub</a> <div class="nav-link"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="darkSwitch"> <label class="custom-control-label" for="darkSwitch">Dark Mode</label> </div> <script src="dark-mode-switch.min.js"></script> </div> </nav> </header> <main role="main"> <h1>🌓 Dark Mode Switch</h1> <p class="lead">Add a dark-mode theme switch with a Bootstrap Custom Switch</p> <ul class="list-unstyled"> <li>· Uses local storage to save preference</li> <li>· Only 262 Bytes minified and gzipped!</li> </ul> <p> <a href="https://github.com/coliff/dark-mode-switch" target="_blank" rel="noopener" class="btn btn-lg btn-secondary"> Learn more </a> </p> </main> <footer class="mt-auto"> <p>© 2019</p> </footer> </div> </body> </html> |
