วิธีใช้โหมดแสงหรือมืดใน CSS

Sep 11, 2025

วิธีการ

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

เสียงทั้งหมดนี้ชอบทำงานมากเกินไปหรือไม่ ทำให้สิ่งต่าง ๆ ง่ายขึ้นด้วย สร้างเว็บไซต์ .

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

 @Media (prefers-color-scheme: แสง | มืด)
{... }

การใช้แบบสอบถามสื่อนี้เราสามารถตรวจจับได้ว่าผู้ใช้กำลังใช้โหมดแสงหรือมืดในระบบปฏิบัติการหรือไม่ ในขณะนี้ได้รับการสนับสนุนเพียงอย่างเดียวโดย Safari Technology Preview 69 ขึ้นไป แต่เบราว์เซอร์อื่น ๆ ไม่ควรอยู่ข้างหลัง

คู่มือนักออกแบบเว็บไซต์สำหรับวิธีการ CSS

ในการทดสอบสิ่งนี้คุณจะต้องได้รับการอัพเกรดเป็น Mojave 10.14 (MacOS) และได้เลือกลักษณะที่มืดในการตั้งค่าระบบ มีบางวิธีที่เราสามารถใช้แบบสอบถามสื่อใหม่นี้เพื่อใช้ธีมที่แตกต่างกัน เราจะสำรวจบางส่วนของพวกเขาในบทช่วยสอนนี้

01. ตั้งค่าหน้า

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

 & lt; div class = "content-container" & gt;
& lt; h1 & gt; หัวเรื่องหนึ่ง & lt; / h1 & gt;
& lt; h2 & gt; หัวเรื่องสอง & lt; / h2 & gt;
& lt; hr & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;

02. องค์ประกอบพื้นฐานสไตล์

ต่อไปเราจะเพิ่มสไตล์พื้นฐานบางอย่างและรวมแบบอักษรบางอย่างจาก Google เพื่อให้หน้าของเราดูดีขึ้นเล็กน้อย เราจะจัดรูปแบบองค์ประกอบพื้นฐานทั้งหมดของเราใช้ขนาดตัวอักษรสีและแบบอักษรใหม่

 ร่างกาย {
ตัวอักษรตระกูล: 'Merriweather', Serif;
พื้นหลังสี: #ededed;
สี: # 212121;
padding: 1.618Rem;
บรรทัดความสูง: 1.618;
ขนาดตัวอักษร: 16px;
}

03. คอนเทนเนอร์สไตล์

CSS light and dark: style container — สร้างภาชนะที่มีความยาวสายที่สะดวกสบาย

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

. ติดต่อตู้คอนเทนเนอร์ {
padding: 1.618Rem 3.236rem;
สูงสุดความกว้าง: 48.54Rem;
ระยะขอบ: 3.236Rem Auto;
พื้นหลังสี: #fff;
Box-Shadow: 0 0 12px 6px RGBA (0,0,0,0.05);
รัศมีชายแดน: .269666667rem;
}

04. เพิ่มสีไฮไลท์

CSS light and dark: highlight colour — เลือกสีไฮไลท์และสร้างสไตล์สำหรับมัน

เว็บไซต์ส่วนใหญ่ใช้สีที่ไหนสักแห่งและในขณะนี้เรามีเพียงคนผิวขาวและสีเทาดังนั้นตอนนี้ให้เลือกสีไฮไลท์และสร้างสไตล์สำหรับการใช้สีนี้ เราจะใช้สีโดยใช้แท็กช่วงและจะใช้เพื่อเน้นบางสิ่งบางอย่างในเนื้อหาของเรา

 & lt; span class = "text - alpha" & gt; lorem ipsum & lt; / span & gt;
.Text - Alpha {
สี: # C3423F;
}

05. ใช้แบบสอบถามสื่อ

ตอนนี้เรามีหน้าเว็บที่มีสไตล์พื้นฐานมาดูวิธีที่เราสามารถใช้แบบสอบถามสื่อได้ มารวมกันและเริ่มแทนที่สไตล์บางอย่างของเรา เราจะเริ่มต้นด้วยสไตล์ร่างกาย

 @Media (prefers-color-scheme: มืด)
{
ร่างกาย {
พื้นหลังสี: # 111;
}
}

06. แทนที่สไตล์ที่เหลืออยู่

CSS light and dark: override styles — ตอนนี้คุณสามารถแทนที่สไตล์ที่เหลือของสไตล์

ตอนนี้เราสามารถเห็นแบบสอบถามสื่อทำงานได้และสีพื้นหลังของร่างกายของเราเปลี่ยนไปเราต้องแทนที่สไตล์ที่เหลือทั้งหมดของเรา

. ติดต่อตู้คอนเทนเนอร์
{
สี: ขาว;
พื้นหลังสี: # 212121;
}
.Text - Alpha {
สี: # 50A8D8;
}

07. การบำรุงรักษา

ในขณะที่สิ่งที่เราเพิ่งทำงานได้ดีอย่างสมบูรณ์แบบสำหรับการสาธิตของเราและสามารถรักษาไว้ในเว็บไซต์ขนาดเล็กวิธีนี้จะเป็นฝันร้ายในการจัดการกับโครงการขนาดใหญ่ที่มีองค์ประกอบที่แตกต่างกันมากมายที่ต้องการการเอาชนะ นอกจากนี้เรายังใช้การใช้งานหนักของน้ำตกในตัวอย่างข้างต้นในขณะที่ระบบขนาดใหญ่อาจต้องการความเฉพาะเจาะจงมากขึ้นเพื่อกำหนดเป้าหมายองค์ประกอบทั้งหมด

08. ใช้วิธีการอื่น

CSS light and dark: another approach — สำหรับโหมดมืดที่รวดเร็วและสกปรกเพียงแค่ใช้ 'Invert' ...

ดังนั้นเราจะแก้ไขปัญหาได้อีกหรือไม่? ลองดูที่ฟิลเตอร์ CSS หนึ่งในค่าที่เราสามารถใช้ได้กับตัวกรอง CSS คือ 'Invert' ดังนั้นเราจึงสามารถใช้สิ่งนี้กับ HTML และกลับสีทั้งหมดให้เรา 'โหมดมืด'

 @Media (prefers-color-scheme: Dark) {
html {
ตัวกรอง: Invert (100%);
}
}

09. เพิ่มรูปภาพ

CSS light and dark: images — ... แน่นอนรูปถ่ายของคุณจะมีลักษณะเช่นนี้

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

10. ใช้คุณสมบัติที่กำหนดเอง

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

11. สร้างคุณสมบัติที่กำหนดเอง

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

: ราก {
- พื้นหลัง - สี: #ededed;
- page-background: #fff;
--Text-Color: # 212121;
--Color-alpha: # C3423F;
}

12. ใช้คุณสมบัติที่กำหนดเองของเรา

ตอนนี้เรามีคุณสมบัติที่กำหนดเองบางอย่างที่กำหนดไว้เราสามารถใช้ใน CSS ของเรา เราจะเริ่มต้นด้วยร่างกายและใช้พื้นหลังและสีข้อความ เพื่อที่จะใช้คุณสมบัติที่กำหนดเองเราใช้ ' Var (- ชื่อคุณสมบัติที่กำหนดเอง) ไวยากรณ์

 ร่างกาย {
พื้นหลังสี: var (- พื้นหลังสี);
สี: var (- ข้อความสี);
}

13. ใช้คุณสมบัติที่เหลืออยู่

การใช้วิธีการเดียวกันเราสามารถอัปเดต 'พื้นหลังสี' ของภาชนะของเราและ 'สี' ของเรา ' ข้อความ - อัลฟ่า คลาสที่ใช้คุณสมบัติที่กำหนดเองของเรา ตอนนี้สีทั้งหมดในหน้าของเราถูกควบคุมโดยใช้คุณสมบัติที่กำหนดเอง

. ติดต่อตู้คอนเทนเนอร์ {
พื้นหลังสี: var (- พื้นหลังหน้า);
}
.Text - Alpha {
สี: var (- color-alpha);
}

14. เพิ่มแบบสอบถามสื่ออีกครั้ง

ตอนนี้เราสามารถเพิ่มคิวรีสื่ออีกครั้ง แต่คราวนี้เราสามารถแทนที่ค่าคุณสมบัติที่กำหนดเองที่อยู่ภายใน เราจะวางสิ่งนี้ทันทีหลังจากคำจำกัดความของรูทดั้งเดิมและภายในแบบสอบถามสื่อเราสามารถเลือกค่าใหม่สำหรับคุณสมบัติที่กำหนดเองสีของเราทั้งหมด

 @Media (prefers-color-scheme: Dark) {
: ราก {
- พื้นหลัง - สี: # 111;
- page-background: # 212121;
--Text-Color: #ededed;
--Color-alpha: # 50A8D8;
}
}

15. ควบคุมเต็มรูปแบบ

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

: ราก {
...
- Page-Shadow: 0 0 12px 6px RGBA
(0,0,0,0.05);
}

16. ใช้เงา

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

 @Media (prefers-color-scheme: Dark) {
: ราก {
...
- page-shadow:
0 0 12px 6px rgba (0,0,0,0.33)
;
}
}
. content-container {
...
Box-Shadow: Var (- หน้า - เงา);
}

17. เพิ่มภาพ

ตอนนี้เรามาเพิ่มรูปภาพกลับเข้าสู่เนื้อหาของเราแล้วเราสามารถเพิ่มสไตล์พื้นฐานบางอย่างเพื่อลอยภาพถัดจากเนื้อหา

 img {
ความกว้าง: 100%;
ความสูง: อัตโนมัติ;
ลอย: ซ้าย;
ความกว้างสูงสุด: 300px;
มาร์จิ้นขวา: 1.618Rem;
ระยะขอบ - ล่าง: 1.618Rem;
}

อย่างที่เราเห็นเนื่องจากเราไม่ได้ใช้ตัวกรองใด ๆ ที่ภาพจะไม่เปลี่ยนแปลงระหว่างสองธีม

18. เพิ่มส่วนประกอบเพิ่มเติม

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

. บุตตัน {
จอแสดงผล: Inline-Flex;
ตัวอักษรตระกูล: สืบทอด;
พื้นหลังสี: var (- สีอัลฟา);
สี: var (- ข้อความสี);
padding: 1.618Rem 3.236rem;
ชายแดน: 0 ไม่มี;
รัศมีชายแดน: 0.25rem;
ข้อความตกแต่ง: ไม่มี;
}

19. สร้างรูปแบบโฮเวอร์ปุ่ม

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

. บุตตัน {
...
การเปลี่ยนแปลง: พื้นหลังสี 150ms,
สี 150ms;
& amp;: โฮเวอร์ {
พื้นหลังสี: var (- สีข้อความ);
สี: var (- color-alpha);
}
}

20. ทำคุณสมบัติที่กำหนดเองปุ่ม

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

. บุตตัน {
--Button-Background: Var (- Color-Alpha);
- Button ข้อความ: Var (- พื้นหลังสี);
พื้นหลังสี: var (- ปุ่มพื้นหลัง);
สี: var (- ข้อความปุ่ม);
...
}

21. ใช้ขอบเขต

CSS light and dark: scope — ใช้ขอบเขตเพื่อสร้างสไตล์ที่แตกต่างและการโต้ตอบสำหรับปุ่มของคุณ

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

. บุตตัน {
...
& amp;: โฮเวอร์ {
- บุตตัน - พื้นหลัง: # AE3937;
@Media (prefers-color-scheme: มืด) {
- บุตตัน - พื้นหลัง: # 2E98D1;
- Button-text: var (- พื้นหลัง -
สี);
}
}
}

ทำงานในการสร้างกับทีม? ทำให้กระบวนการของคุณเหนียวแน่นด้วยที่ดี การจัดเก็บเมฆ .

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 283 ของนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 283 หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

เริ่มต้นด้วยงานศิลปะ CSS
12 ทรัพยากรแอนิเมชั่น CSS ที่ยอดเยี่ยม
คุณควรใช้ Framework CSS ใด

วิธีใช้โหมดแสงหรือมืดใน CSS

01. ตั้งค่าหน้า

02. องค์ประกอบพื้นฐานสไตล์

03. คอนเทนเนอร์สไตล์

04. เพิ่มสีไฮไลท์

05. ใช้แบบสอบถามสื่อ

06. แทนที่สไตล์ที่เหลืออยู่

07. การบำรุงรักษา

08. ใช้วิธีการอื่น

09. เพิ่มรูปภาพ

10. ใช้คุณสมบัติที่กำหนดเอง

11. สร้างคุณสมบัติที่กำหนดเอง

12. ใช้คุณสมบัติที่กำหนดเองของเรา

13. ใช้คุณสมบัติที่เหลืออยู่

14. เพิ่มแบบสอบถามสื่ออีกครั้ง

15. ควบคุมเต็มรูปแบบ

16. ใช้เงา

17. เพิ่มภาพ

18. เพิ่มส่วนประกอบเพิ่มเติม

19. สร้างรูปแบบโฮเวอร์ปุ่ม

20. ทำคุณสมบัติที่กำหนดเองปุ่ม

21. ใช้ขอบเขต

วิธีการ - บทความยอดนิยม

การกวดวิชา Procreate: วิธีการวาดเช่น Masters เก่า

วิธีการเตรียมไฟล์สำหรับพิมพ์

วิธีการสร้างแถบการ์ตูนมังงะแท้ๆ

บทช่วยสอนข้อความ 3D สำหรับนักออกแบบกราฟิก

วิธีการออกแบบปกหนังสือใน InDesign

จำลองกราฟิก AR ด้วย After Effects

แปลงภาพถ่ายเป็นชุด VR

วิธีการออกแบบฮีโร่เคลื่อนไหว

หมวดหมู่