วิธีสลับระหว่างโหมดมืดและโหมดสว่างใน Drupal 8 (หรือ 9) ตามความชอบของผู้ใช้

จะดีแค่ไหนหากให้ผู้ใช้ของคุณมีอิสระในการปรับแต่งอินเทอร์เฟซตามความต้องการของพวกเขา ในขณะที่ผู้ใช้หลายคนชอบอินเทอร์เฟซสีอ่อน (พื้นหลังสีอ่อนพร้อมข้อความสีเข้ม) ผู้ใช้บางคนเลือกอินเทอร์เฟซสีเข้ม (พื้นหลังสีเข้มพร้อมข้อความสีอ่อน) อินเทอร์เฟซที่มืดกว่านั้นดูเท่และทันสมัย ​​ในขณะที่บางคนเชื่อว่ามันช่วยลดความตึงเครียดในสายตาโดยเฉพาะสำหรับนักพัฒนาที่ใช้เวลาอยู่หน้าจอเป็นจำนวนมาก ฉันเชื่อว่าการให้ตัวเลือกแก่ผู้ใช้ของคุณเป็นชัยชนะที่ยิ่งใหญ่ในแง่ของการเข้าถึงและประสบการณ์ของผู้ใช้ มีสองวิธีที่สามารถทำได้ ในบทความนี้ เราจะพูดถึงวิธีสลับระหว่างโหมดการออกแบบเว็บที่มืด/สว่าง และใช้งานสิ่งนี้ใน Drupal 8 หรือ Drupal 9

เราจะมุ่งเน้นไปที่สองวิธีในการดำเนินการนี้ -
1. ใช้ CSS เท่านั้น
2. การใช้สวิตช์สลับ CSS & JS

ใช้ CSS เท่านั้น

เพื่อให้ได้โหมดมืดบนเว็บไซต์ใดๆ ที่มีเพียง CSS หนึ่งต้องคำนึงถึงข้อกำหนดของระบบบางประการ ข้อกำหนดที่สำคัญอย่างหนึ่งดังกล่าวคือ โหมดมืดทั้งระบบ หากผู้ใช้ต้องการใช้โหมดมืดบนพีซี ผู้ใช้จะได้รับบริการด้วยเว็บไซต์ที่แสดงพื้นหลังสีเข้มพร้อมข้อความสีอ่อน ชุดรูปแบบสีที่ต้องการ (แบบสอบถามสื่อ) ใช้เพื่อระบุว่าผู้ใช้ร้องขอให้ระบบใช้ชุดรูปแบบสีอ่อนหรือสีเข้ม

การดำเนินการ:

1. ประกาศตัวแปร CSS
2. ใช้ตัวแปรทุกที่ที่จำเป็น

ผลลัพธ์:

หมายเหตุ: หากต้องการจำลองผลลัพธ์ในอุปกรณ์ที่ไม่รองรับบางประเภท เพียงป้อน DevTool โดยกด F12 ถัดไป กด CTRL+SHIFT+P จากนั้นค้นหา likes-color-scheme: dark แล้วกด Enter

การใช้สวิตช์สลับ CSS และ JS

หากเราจะใช้แนวทางนี้ เราก็ไม่จำเป็นต้องกังวลเกี่ยวกับข้อกำหนดของระบบ เพียงแค่เขียน CSS และ JS สองสามบรรทัด คุณก็พร้อมแล้ว เมื่อเราเริ่มต้นตัวแปรแล้ว เราสามารถอ้างอิงตัวแปรเหล่านี้ในสไตล์ชีตของเราได้ นี่จะเป็นโครงสร้าง HTML เพื่อสลับระหว่างโหมดมืดและสว่าง

และ CSS บางบรรทัดควรส่งผลให้เกิดสวิตช์นี้

ส่วนสุดท้ายคือการเพิ่ม JavaScript เล็กน้อยเพื่อเชื่อมโยงทั้งหมดเข้าด้วยกัน
● จัดเก็บค่ากำหนดของผู้ใช้สำหรับการเยี่ยมชมในอนาคต
● ตรวจสอบการตั้งค่าผู้ใช้ที่บันทึกไว้ (ถ้ามี) ขณะโหลดเว็บไซต์

แค่นั้นแหละ! ตรวจสอบการสาธิตแบบเต็มด้านล่าง

หรือคลิกที่นี่เพื่อชมการสาธิต

การใช้ Dark / Light Toggle ใน Drupal 8 (หรือ Drupal 9)

ในการเริ่มต้นสร้างธีม Drupal 8 แบบกำหนดเอง โปรดดูบทความที่ยอดเยี่ยมที่นี่ ตอนนี้เรามาเริ่มสร้างธีมเพื่อแสดงวิธีใช้ธีมสีเข้ม/ธีมสีอ่อนใน Drupal 8 หรือ Drupal 9

โครงสร้างไฟล์จะมีลักษณะดังนี้:

ตอนนี้ อัปเดตส่วนหัวภายใน page.html.twig ด้วยรหัสต่อไปนี้

 <header aria-label="Site header" role="banner"> <div class="container"> <div class="header"> {{ page.branding }} {{ page.navigation }} <div class="switch-wrapper"> <label class="switch" for="checkbox"> <input type="checkbox"/> <div class="slider round"></div> </label> </div> </div> </div> </header>

โครงสร้าง HTML ที่เหลือจะขึ้นอยู่กับการออกแบบหรือข้อกำหนดของคุณ
เมื่อคุณสร้างโครงสร้าง HTML เสร็จแล้ว ก็ถึงเวลาที่จะทำให้มันดูดีโดยการจัดสไตล์องค์ประกอบใน CSS
ขั้นแรก คุณต้องสร้างตัวแปรเริ่มต้นทั้งหมดซึ่งจะรับผิดชอบสีในโหมดสว่าง/มืด

 style.css :root { --color-background: #f0f0f0; --color-header: rgb(14, 33, 141); --color-header-text: #aecafa; --color-text: #2c0000; --color-card-bg: #fff; --color-link: rgb(255, 0, 0); } /* Variable decleration for dark mode */ [data-theme="dark"] { --color-background: #1a1a1a; --color-header: #aecafa; --color-header-text: 0e218d; --color-text: #d3d3d3; --color-card-bg: #435561; --color-link: #24ce24; }

เมื่อคุณกำหนดตัวแปรเสร็จแล้ว ก็ถึงเวลาเพิ่มสไตล์ให้กับส่วนหัวเพื่อให้ได้ผลลัพธ์ที่ต้องการ

 style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

โปรดทราบว่าการจัดสไตล์อาจแตกต่างกันไปตามความต้องการของคุณ หลังจากจัดสไตล์ทั้งหมดแล้ว ก็ถึงเวลาเขียนฟังก์ชันบางอย่างในโค้ด Jquery รหัส Jquery จะมีลักษณะดังนี้ (script.js ในกรณีของเรา)

 script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);
script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);

และอย่าลืมรวมไฟล์ JS และ CSS ไว้ในไฟล์ theme_name.libraries.yml

 global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal
global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal

ตอนนี้ล้างแคชของไซต์เพื่อดูผลลัพธ์ ผลลัพธ์สุดท้ายของคุณควรมีลักษณะดังนี้: