ธีมสีที่มีฟีเจอร์ CSS พื้นฐาน

David A. Herron

เผยแพร่: 11 ธันวาคม 2025

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

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

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

สร้างฐานด้วยสีที่สัมพันธ์กัน

หากคุณมีไอเดียสำหรับสีหลักของธีม เมื่อใช้ทฤษฎีสีพื้นฐานและไวยากรณ์สีสัมพัทธ์ของ CSS คุณจะเริ่มสร้างชุดสีเพื่อใช้ในธีมได้อย่างรวดเร็ว

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

html {
  --base-color: oklch(43.7% 0.075 224);
}

พร็อพเพอร์ตี้ที่กำหนดเอง --base-color สร้างขึ้นโดยใช้ฟังก์ชันสี oklch() OkLCh เป็นรูปแบบทรงกระบอกของพื้นที่สี Oklab และกำหนดค่าสำหรับ 3 แชแนล ได้แก่ L (ความสว่าง) C (ความอิ่มสี) H (เฉดสี) รวมถึงแชแนลอัลฟ่าที่ไม่บังคับเพื่อควบคุมความโปร่งใส

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

การคงความสว่างและโครมาเดิมจาก --base-color คุณสามารถปรับเฉดสีได้ 120 องศาในทั้ง 2 ทิศทางสำหรับจานสีแบบไตรแอด

html {
  /* ... */
  --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  --triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}

ดังที่แสดงที่นี่ ไวยากรณ์สีสัมพัทธ์ใช้ฟังก์ชันสีที่อ้างอิงสีต้นทาง (--base-color ในตัวอย่างนี้) ด้วยคีย์เวิร์ด from และปรับช่องที่เกี่ยวข้องของพื้นที่สีตามสีเอาต์พุตที่เลือก ซึ่งในกรณีนี้จะเป็น OkLCh ด้วย

เอาต์พุตที่ได้จะให้สีชมพูเข้มสำหรับ --accent-color และเฉดสีทองสำหรับใช้กับ --highlight-color โดยทั้ง 2 สีจะมีความสว่างและโครมาเหมือนกับ --base-color ต้นฉบับ

html {
  /* ... */
  --accent-color: var(--triadic-color-primary);
  --highlight-color: var(--triadic-color-secondary);
}

  html {
    /* Input color in the rgb color space*/
    --base-color: teal;

     /* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
     --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  }

สีเสริมจะเพิ่ม 180 องศาให้กับมุมเฉดสี

html {
  /* ... */
  --complement-color: oklch(from var(--base-color) l c calc(h + 180));
  --border-highlight: var(--complement-color);
}

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

html {
  /* Darken the --base-color by 15% */
  --base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
  /* Assign this color a meaningful variable name */
  --action-color: var(--base-color-darkened);
  /* Lighten the --action-color by 15% */
  --action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
  /* Darken the --action-color by 10% */
  --action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}

ในที่นี้ เราจะดึง --action-color จาก --base-color และใช้กับปุ่มและลิงก์ --action-color มี 2 รูปแบบ ได้แก่ แบบสว่างและแบบมืด ซึ่งจะยังมีผลแม้ว่า --action-color จะเปลี่ยนให้สัมพันธ์กับสีอื่นที่แตกต่างจาก --base-color

คุณปรับแชแนลได้โดยใช้ฟังก์ชันทางคณิตศาสตร์ เช่น calc() หรือแทนที่แชแนลทั้งหมดด้วยค่าใหม่ ช่องที่ไม่มีการเปลี่ยนแปลงจะแสดงด้วยตัวอักษรที่เกี่ยวข้อง (เช่น l สำหรับค่าความสว่างที่ไม่มีการเปลี่ยนแปลง)

ผสมสีด้วย color-mix()

สำหรับสีอื่นๆ คุณสามารถใช้วิธีที่คล้ายกันและปรับช่องอื่นๆ ของพร็อพเพอร์ตี้ที่กำหนดเอง --base-color หรือใช้ color-mix() เพื่อเพิ่มสีพื้นฐานลงในองค์ประกอบอื่นๆ ของการออกแบบ

--border-color คือการผสมสีพื้นฐานกับสีที่ระบุ grey ซึ่งมีการประมาณค่าในพื้นที่สี oklab เมื่อใช้เป็นวิธีการประมาณค่าสี วิธีนี้จะให้ผลลัพธ์ที่สม่ำเสมอตามการรับรู้

html {
  --base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
  --border-color: var(--base-mix-grey-50);
}

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

html {
  --background-mix-base-80: color-mix(in oklab,
    var(--background-color) 80%,
    var(--base-color));
  --surface-light: var(--background-mix-base-80);
}

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

[data-input*="text"] {
  --focus-ring: transparent;
  /* ... */
  &:focus {
    --focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
  }
}

เลือกใช้โหมดสว่างและโหมดมืด

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

การรองรับธีมสว่างและธีมมืดของ Signal ด้วยพร็อพเพอร์ตี้ color-scheme

คุณสามารถบอกเบราว์เซอร์ได้ทันทีว่าเว็บไซต์ของคุณดูได้ในโหมด "สว่าง" "มืด" หรือทั้ง 2 โหมดด้วยพร็อพเพอร์ตี้ color-scheme พร็อพเพอร์ตี้นี้จะบอกเบราว์เซอร์ว่าองค์ประกอบใดที่แสดงผลได้อย่างสะดวกในรูปแบบชุดสีใด

 html {
   color-scheme: light dark;
}

การตั้งค่า color-scheme: light dark ในองค์ประกอบเสมือน :root หรือองค์ประกอบ html

• บอกเบราว์เซอร์ว่าหน้าเว็บรองรับการดูในโหมดสว่างหรือโหมดมืด
• เปลี่ยนสีเริ่มต้นของอินเทอร์เฟซผู้ใช้ของเบราว์เซอร์ให้ตรงกับการตั้งค่าระบบปฏิบัติการที่เกี่ยวข้อง

หากต้องการแจ้ง User Agent ก่อนหน้านี้ว่าหน้าเว็บรองรับโหมดสว่างและโหมดมืด คุณยังส่งสัญญาณการรองรับการสลับรูปแบบสีได้ด้วยการเพิ่มองค์ประกอบ <meta> ใน <head> ของเอกสาร

<head>
  <!-- ... -->
   <meta name="color-scheme" content="light dark">
</head>

ตั้งค่าตัวแปร "สว่าง" และ "มืด" ด้วยฟังก์ชัน light-dark()

ในฐานะผู้เขียน คุณอาจคุ้นเคยกับการตั้งค่าสีของหน้าเว็บด้วยคำค้นหา prefers-color-scheme @media

@media (prefers-color-scheme: light) {
  html {
    --background-color: oklch(95.5% 0 162);
    --text-color: black;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --background-color: oklch(22.635% 0.01351 291.83);
    --text-color: white;
  }
}

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

การเปลี่ยนสีของหน้าเว็บด้วยการค้นหา prefers-color-scheme ยังหมายถึงการทำโค้ดซ้ำบางส่วนด้วย เนื่องจากคุณต้องกำหนดสีสำหรับแต่ละโหมดแยกกัน

แต่เมื่อcolor-schemeตั้งค่าในหน้าโดยรวม (หรือองค์ประกอบที่เฉพาะเจาะจง) คุณจะใช้ฟังก์ชัน light-dark() เพื่อตั้งค่าสีสำหรับแต่ละโหมดในโค้ดบรรทัดเดียวได้

ฟังก์ชันนี้รับสี 2 สี โดยจะใช้สีแรกเมื่อตั้งค่ารูปแบบสีเป็น "สว่าง" และใช้สีที่ 2 เมื่อตั้งค่ารูปแบบสีเป็น "มืด"

html {
  color-scheme: light dark;
  /* Color custom property values for both light and dark modes */
  --base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
  --background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
  --accent-color: oklch(from var(--base-color) l c calc(h + 120));
  --active-color: light-dark(var(--action-color-light), var(--action-color-dark));
  /* ... */
}

เช่นเดียวกับพร็อพเพอร์ตี้ที่กำหนดเองอื่นๆ คุณสามารถตั้งค่าlight-dark()สีได้ทั่วโลกหรือภายในคอมโพเนนต์ที่เฉพาะเจาะจง แล้วนำไปใช้ที่อื่นตามต้องการ

/* custom property usage */
body {
  background-color: var(--background-color);
  /* ... */
}

:any-link {
  /* ... */
  text-decoration-color: var(--accent-color);
}

ให้ผู้ใช้ควบคุมด้วยตัวสลับธีมในตัว

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

หากสร้างปุ่มเปิด/ปิดธีมซึ่งอัปเดตแอตทริบิวต์ data-scheme ในองค์ประกอบ <html> คุณจะใช้แอตทริบิวต์เดียวกันเพื่อเปลี่ยน color-scheme ด้วย CSS ได้

html {
  color-scheme: light dark;

  &[data-scheme="light"] {
    color-scheme: light;
  }

  &[data-scheme="dark"] {
    color-scheme: dark;
  }

  &[data-scheme="green"] {
      --base-color-light: oklch(48.052% 0.11875 151.945);
      --base-color-dark: oklch(92.124% 0.13356 151.558);
      color-scheme: light dark;
   }
}

data-scheme="light" และ data-scheme="dark" จะแสดงหน้าเว็บในโหมดสีของตนเองเท่านั้น data-scheme="green" สามารถดูได้ในทั้ง 2 โหมด และยังเปลี่ยน --base-color เป็นเฉดสีเขียว ซึ่งจะทำให้คุณมีจานสีใหม่ทั้งหมดเนื่องจากสีอื่นๆ ส่วนใหญ่จะอิงตาม --base-color

ลงทะเบียนพร็อพเพอร์ตี้ที่กำหนดเองกับ @property

ที่ผ่านมา เราได้ตั้งค่าสีในการสาธิตเป็นพร็อพเพอร์ตี้ที่กำหนดเองมาตรฐาน นอกจากนี้ คุณยังลงทะเบียนพร็อพเพอร์ตี้ด้วยกฎ @property เพื่อรับสิทธิประโยชน์ที่มาพร้อมกับการตรวจสอบประเภทได้ด้วย

เนื่องจากใช้ --base-color เป็นฐานของสีอื่นๆ อีกมากมายในอินเทอร์เฟซ จึงควรตรวจสอบว่าค่านี้เป็นสีเสมอและมีค่าสำรอง

@property --base-color-light {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(43.7% 0.075 224);
}

@property --base-color-dark {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(89.2% 0.069 224);
}

html {
  --base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}

ด้วยวิธีนี้ หากมีการเปลี่ยน --base-color เป็นค่าที่ไม่ถูกต้องโดยไม่ตั้งใจ ระบบจะกลับไปใช้ initial-value ที่ตั้งค่าไว้กับกฎ @property เสมอ

การลงทะเบียนพร็อพเพอร์ตี้บางอย่างด้วยวิธีนี้ยังช่วยให้คุณเปลี่ยนสีใน linear-gradient() ได้อย่างราบรื่น

.main-heading {
  background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
  background-clip: text;
  color: transparent;
  animation: header-hue-switch 5s ease-in-out infinite alternate;
}

.main-heading มีพื้นหลัง linear-gradient() ที่แสดงผ่านข้อความโปร่งใสด้วยพร็อพเพอร์ตี้ background-clip

ข้อความบางส่วนแสดง hue ซึ่งใช้ไวยากรณ์สีที่เกี่ยวข้องเพื่อเคลื่อนไหวจากค่าช่อง 26.67 ไปยัง 277

@keyframes header-hue-switch {
  from {
    --header-hue: 26.67;
  }

  to {
    --header-hue: 277;
  }
}

เมื่อใช้พร็อพเพอร์ตี้ที่กำหนดเอง --header-hue ที่ลงทะเบียนไว้ ภาพเคลื่อนไหวนี้จะเกิดขึ้นได้อย่างราบรื่นเนื่องจากเบราว์เซอร์ทราบว่าพร็อพเพอร์ตี้ที่กำหนดเองนี้เป็นตัวเลข

@property --header-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}

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

สรุป

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

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

เครดิต

ตรรกะของเครื่องมือสลับธีมดัดแปลงจากคอมโพเนนต์สวิตช์ธีมของ Adam Argyle