วิธีปรับแต่งธีม Element Web และการสร้างแบรนด์ UI ในปี 2026

Element Web มอบวิธีการที่มีประโยชน์หลายอย่างให้กับผู้ใช้งานที่ต้องการให้ลูกค้าเป็นส่วนหนึ่งขององค์กร แต่เส้นทางที่รองรับได้มีการเปลี่ยนแปลงไปแล้ว การอัปเดตที่สำคัญสำหรับการใช้งานในปัจจุบันคือ Element Web เวอร์ชัน 1.12.30 ซึ่งวางจำหน่ายในช่วงปลายเดือนกันยายน 2026 ได้ลบเส้นทาง API โมดูลและการปรับแต่งแบบเก่าที่คู่มือเก่าๆ อาจยังคงอ้างอิงอยู่ ในขณะเดียวกัน เอกสารการกำหนดค่าและธีมอย่างเป็นทางการยังคงรองรับการสร้างแบรนด์ผ่านconfig.jsonธีมที่กำหนดเอง ทรัพย์สินการตรวจสอบสิทธิ์ที่มีแบรนด์ หน้าเว็บแบบฝัง และ API โมดูลใหม่กว่าสำหรับการเปลี่ยนแปลงพฤติกรรมที่ลึกซึ้งยิ่งขึ้น

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

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

สิ่งที่คุณสามารถปรับแต่งได้โดยไม่ต้องสร้าง Element Web ใหม่

การตั้งค่าที่ Element รองรับนั้นครอบคลุมการสร้างแบรนด์มากกว่าที่ผู้ดูแลระบบหลายคนต้องการ ส่วนควบคุมหลักๆ มีดังนี้:

ก่อนที่จะเปลี่ยนการตั้งค่าแบรนด์ในการใช้งาน โปรดบันทึกภาพลักษณะที่ปรากฏของ Element Web ในปัจจุบัน เพื่อให้คุณสามารถเปรียบเทียบผลลัพธ์หลังจากโหลดการกำหนดค่าใหม่ได้

ขั้นตอนที่ 1: เริ่มจากไฟล์ config.json ของการปรับใช้

Element Web อ่านการกำหนดค่าจากconfig.jsonไฟล์ หรือจากไฟล์เฉพาะโดเมนชื่อconfig.$domain.jsonตามเอกสารอย่างเป็นทางการ ไฟล์เฉพาะโดเมนจะถูกลองใช้ก่อนและจะไม่ถูกรวมเข้ากับไฟล์สำรอง: จะใช้การกำหนดค่าที่สมบูรณ์เพียงไฟล์เดียวหรืออีกไฟล์หนึ่ง

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

เริ่มจากการเปลี่ยนแปลงภาพลักษณ์แบรนด์ให้น้อยที่สุดเท่าที่จะเป็นไปได้:

{
  "brand": "Acme Chat",
  "default_theme": "light"
}

ค่า นี้brandจะแทนที่คำว่า “Element” ในสตริงและตำแหน่งต่างๆ ของแอปพลิเคชัน แต่ไม่ได้ทำให้ Element Web กลายเป็นผลิตภัณฑ์ที่ติดแบรนด์ของตัวเองได้อย่างสมบูรณ์ เอกสารของ Element เองระบุไว้อย่างชัดเจนว่า การเปลี่ยนแบรนด์/การติดแบรนด์ส่วนตัวอย่างสมบูรณ์นั้นไม่ได้รับการสนับสนุนผ่านตัวเลือกการกำหนดค่าเหล่านี้เพียงอย่างเดียว

ขั้นตอนที่ 2: สร้างแบรนด์ให้กับหน้าลงทะเบียนและหน้าต้อนรับ

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

{
  "brand": "Acme Chat",
  "branding": {
    "welcome_background_url": "https://chat.example.com/assets/login-background.jpg",
    "logo_link_url": "https://www.example.com/",
    "auth_header_logo_url": "https://chat.example.com/assets/acme-logo.svg",
    "auth_footer_links": [
      {
        "text": "Privacy",
        "url": "https://www.example.com/privacy"
      },
      {
        "text": "Support",
        "url": "https://www.example.com/support"
      }
    ]
  }
}

ใช้ URL HTTPS ที่เสถียรซึ่งผู้ใช้ Element Web สามารถเข้าถึงได้โดยไม่ต้องยืนยันตัวตน โลโก้หรือภาพพื้นหลังที่โฮสต์อยู่หลังระบบล็อกอินอีกชั้นอาจโหลดไม่สำเร็จก่อนที่ผู้ใช้ Matrix จะลงชื่อเข้าใช้ นอกจากนี้ ควรทำให้โลโก้สามารถอ่านได้ทั้งบนหน้าจอความละเอียดสูงและหน้าจอขนาดเล็ก แทนที่จะอัปโหลดไฟล์ภาพขนาดใหญ่และพึ่งพาเบราว์เซอร์ในการย่อขนาด

หน้ายืนยันตัวตนที่มีตราสินค้าสามารถเปลี่ยนโลโก้ส่วนหัว พื้นหลัง และลิงก์ส่วนท้ายได้ โดยยังคงขั้นตอนการเข้าสู่ระบบของ Element Web ไว้เหมือนเดิม

ขั้นตอนที่ 3: สร้างธีมแบบกำหนดเองที่รองรับ

สำหรับการกำหนดสีและแบบอักษรภายในฝั่งไคลเอ็นต์ ให้ใช้รูปแบบธีมแบบกำหนดเองของ Element แทนการดูแลรักษาชุดตัวเลือก CSS ที่ไม่เสถียร เอกสารเกี่ยวกับการกำหนดธีมรองรับธีมแบบกำหนดเองในขณะรันไทม์ผ่านทาง < setting_defaults.custom_themescustom theme> ธีมแบบกำหนดเองจะได้รับชื่อภายในในรูปแบบ <custom theme> custom-{theme.name}; นั่นคือค่าที่จะใช้ใน <custom theme default_theme>

ตัวอย่างขนาดกะทัดรัดนี้จะเปลี่ยนสีขององค์ประกอบหลัก แถบด้านข้าง รายการห้อง และไทม์ไลน์ โดยใช้คีย์ที่กำหนดไว้ในเอกสารของ Element:

{
  "default_theme": "custom-Acme Light",
  "setting_defaults": {
    "custom_themes": [
      {
        "name": "Acme Light",
        "is_dark": false,
        "colors": {
          "accent-color": "#2563eb",
          "primary-color": "#1d4ed8",
          "warning-color": "#dc2626",
          "sidebar-color": "#0f172a",
          "roomlist-background-color": "#f8fafc",
          "roomlist-text-color": "#172033",
          "roomlist-text-secondary-color": "#64748b",
          "roomlist-highlights-color": "#ffffff",
          "roomlist-separator-color": "#e2e8f0",
          "timeline-background-color": "#ffffff",
          "timeline-text-color": "#172033",
          "timeline-text-secondary-color": "#64748b",
          "timeline-highlights-color": "#f1f5f9"
        }
      }
    ]
  }
}

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

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

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

ขั้นตอนที่ 4: ปรับแต่งเนื้อหาหน้าแรก จากนั้นโหลดหน้าเว็บใหม่และยืนยัน

Element Web ยังสามารถชี้ไปยัง HTML ที่โฮสต์ภายนอกสำหรับหน้าต้อนรับและหน้าหลักได้อีกด้วย อ็อบเจ็กต์ที่ระบุไว้ในembedded_pagesเอกสาร รองรับ welcome_urlและ แฟล็ก home_urlแยกต่างหากlogin_for_welcomeสามารถทำให้ฟอร์มล็อกอินทำหน้าที่เป็นหน้าต้อนรับได้ เมื่อแฟล็กนั้นเป็นจริง เส้นทางปกติwelcome_urlจะถูกปิดใช้งาน

{
  "embedded_pages": {
    "welcome_url": "https://chat.example.com/assets/welcome.html",
    "home_url": "https://chat.example.com/assets/home.html"
  }
}

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

หลังจากทำการเปลี่ยนแปลงแล้วconfig.jsonให้รีโหลด Element Web เอกสารอย่างเป็นทางการระบุว่าการรีเฟรชเบราว์เซอร์ก็เพียงพอสำหรับการใช้งานบนเว็บ ในขณะที่ Element Desktop ต้องปิดอย่างสมบูรณ์ รวมถึงกระบวนการในถาดระบบทั้งหมด แล้วจึงเริ่มต้นใหม่ หากการเปลี่ยนแปลงของคุณแสดงผลไม่สม่ำเสมอ ให้ตรวจสอบแคชก่อนที่จะสรุปว่า JSON ผิดพลาด เอกสาร README สำหรับการใช้งานบนเว็บของ Element ระบุไว้อย่างชัดเจนว่า/config.*.json, /i18n, /version, และ/index.htmlไม่ควรถูกแคช และแนะนำให้ตรวจสอบความถูกต้องของหน้าหลักอีกครั้ง โปรดดู เอกสาร README อย่างเป็นทางการสำหรับการใช้งานบนเว็บของ Element

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

เมื่อไฟล์ config.json ไม่เพียงพอ

คู่มือเก่าๆ อาจแนะนำให้คุณเปลี่ยนโมดูลผ่านcustomisations.jsonหรือพึ่งพาจุดปรับแต่งแบบเดิม แต่ปัจจุบันวิธีการนั้นไม่ปลอดภัยสำหรับการใช้งานใหม่แล้วเอกสารการปรับแต่ง อย่างเป็นทางการ ระบุว่ากลไกนั้นล้าสมัยแล้ว และบันทึกการเผยแพร่เวอร์ชัน 1.12.30 เดือนกันยายน 2026 ก็ระบุถึงการลบ API โมดูลและการปรับแต่งแบบเดิมออกไปด้วย

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

กรณีพิเศษที่เกี่ยวข้องอีกประการหนึ่งคือภาพตัวอย่างลิงก์โซเชียล เอกสารการตั้งค่าอย่างเป็นทางการระบุว่าog:imageค่าดังกล่าวอยู่ในไฟล์คงที่ (static file index.html) ไม่ใช่config.jsonในไฟล์อื่น (runtime file) หากคุณต้องการเปลี่ยนภาพนั้น จะต้องเป็นการปรับแต่งในระหว่างการสร้างหรือไฟล์คงที่ แทนที่จะเป็นการตั้งค่าแบรนด์ในระหว่างการทำงาน

รายการตรวจสอบการยืนยัน

• เปิดหน้าเข้าสู่ระบบในหน้าต่างเบราว์เซอร์แบบส่วนตัว และตรวจสอบว่าโลโก้การยืนยันตัวตน พื้นหลัง และลิงก์ส่วนท้ายโหลดได้อย่างถูกต้องโดยไม่ต้องมีเซสชันอยู่แล้ว
• ตรวจสอบให้แน่ใจว่าแอปแสดงbrandค่าที่ต้องการหลังจากเข้าสู่ระบบแล้ว
• ตรวจสอบว่าธีมเริ่มต้นที่เลือกไว้โหลดสำหรับโปรไฟล์เบราว์เซอร์ใหม่ ไม่ใช่เฉพาะบัญชีที่เคยเปลี่ยนการตั้งค่าลักษณะที่ปรากฏไว้ก่อนหน้านี้เท่านั้น
• ตรวจสอบข้อความในรายการห้องประชุม ห้องที่เลือก ป้ายกำกับรอง ไทม์ไลน์ การควบคุมการเขียนข้อความ คำเตือน และสถานะการโฟกัส เพื่อให้สามารถอ่านได้อย่างชัดเจน
• หากคุณใช้หน้าแรกหรือหน้าต้อนรับที่กำหนดเอง ให้ทดสอบเมื่อหน้าเว็บภายนอกใช้งานไม่ได้ เพื่อให้คุณเข้าใจถึงลักษณะการทำงานผิดพลาด
• ตรวจสอบแผงเครือข่ายของเบราว์เซอร์และยืนยันว่าconfig.jsonมีการดึงข้อมูลที่คาดหวังไว้หลังจากการติดตั้งเสร็จสิ้นแล้ว การแคชของรีเวิร์สพร็อกซีหรือ CDN ที่ล้าสมัยเป็นสาเหตุทั่วไปที่ทำให้การตั้งค่าที่ถูกต้องดูเหมือนจะไม่ทำงาน
• หลังจากอัปเกรด Element Web ทุกครั้ง ให้ทดสอบธีมที่กำหนดเองและการผสานรวม API โมดูลใดๆ กับเวอร์ชันใหม่ก่อนที่จะเผยแพร่ให้กับผู้ใช้ทั้งหมด

สรุปแล้ว

สำหรับการใช้งาน Element Web แบบโฮสต์เองส่วนใหญ่ ให้ใช้เลเยอร์การกำหนดค่าที่รองรับ ได้แก่brand, branding, default_theme, setting_defaults.custom_themes, และembedded_pagesซึ่งจะทำให้การอัปเกรดง่ายกว่าการแก้ไขคอมโพเนนต์ React หรือการพึ่งพา hook การปรับแต่งแบบเก่า ควรเปลี่ยนไปใช้ Module API หรือ fork ที่ได้รับการดูแลรักษาเฉพาะเมื่อความต้องการของคุณเปลี่ยนแปลงพฤติกรรมของแอปพลิเคชันอย่างแท้จริง ไม่ใช่แค่รูปลักษณ์ภายนอก