目前 LAPLACE Chat 提供三種範本載入方式：
- 內建範本：由本站作者與第三方作者提供的內建免費範本，可滿足絕大多數的使用情境
- 遠端範本：由第三方作者提供的遠端範本，可滿足主播的客製化需求
- 進階 CSS 編輯器（自訂 CSS 樣式）：由開發者或主播自行撰寫的 CSS 樣式，可滿足任意樣式客製需求
雲端載入（僅限內建範本）
當您開啟本選項時，將會從本站內建的雲端載入範本，此功能具有下列特性：
- 您不需要再於 OBS 中貼上冗長的 CSS 樣式，樣式將始終保持在最新狀態
- 同時支援雲端範本與自訂 CSS 樣式，樣式之間不會衝突，自訂 CSS 樣式將總是覆寫雲端載入的樣式
- 此選項可用來解決部分主播不會設定樣式的問題，以及彈幕機更新導致樣式失效後無法即時更新樣式的問題
- 解決個別第三方推流程式（例如嗶哩嗶哩直播姬）無法載入較長自訂 CSS 的問題
此功能於 Apr 21, 2025 上線
遠端範本
當您開啟本選項時，將會從您提供的 URL 拉取可用的 CSS 樣式。此特性可方便開發者與設計師為 LAPLACE Chat 提供遠端交付的 CSS 樣式
測試範本：https://rsrc.laplace.cn/assets/bubble-alt.css
此功能於 Apr 22, 2025 上線
進階 CSS 編輯器（自訂 CSS 樣式）
最傳統的範本客製方式，您可以在這裡撰寫任意的 CSS 樣式，然後將其複製到 OBS 中即可套用範本，此功能具有下列特性：
- 當您在設定器中載入某個內建範本時，該範本的完整 CSS 程式碼會載入到 CSS 編輯器中，您可以在此編輯此範本並取得即時預覽
- 如果您啟用了「雲端載入」功能，此時 CSS 編輯器中的內容為參考樣式，您可以刪除其中大部分內容，僅保留您需要覆寫的 CSS 樣式，然後將其複製到 OBS 的「自訂 CSS」中，即可覆寫雲端範本的樣式
範本優先順序
LAPLACE Chat 的範本優先順序按照下列順序 從低到高 排列：
@layer template- 雲端載入（內建範本）@layer remote-css- 遠端範本@layer custom-css- 進階 CSS 編輯器（自訂 CSS 樣式）
當開發者依照上述規範撰寫層疊層樣式時，自訂 CSS 將總是覆寫遠端範本的樣式；遠端範本將總是覆寫雲端載入的範本。三種載入方式可以同時存在
因此，利用此特性，您可以達成：
- 透過雲端載入一款您喜歡的內建範本
- 以遠端載入他人基於此範本修改的二創樣式
- 在自訂 CSS 中加入您自訂的樣式
關於層疊層的詳細用法，可參考 MDN 文件
開發者：如何交付遠端範本
身為開發者，如果您需要遠端交付範本，則需要滿足下列幾個條件：
- 您需要提供一個可用的 CSS 檔案，並且可以穩定地透過 HTTPS 存取
- CSS 的內容與您直接在設定器中編輯的自訂 CSS 相同，不需要額外的格式
- 在樣式中使用
@layer remote-css層疊層，可更好地相容範本的優先順序 - CSS 檔案大小小於 1024 KB（圖片素材不計入）
- 放行所有來自 Cloudflare Workers 的 IP。通常來說不需要額外設定，如果您需要以白名單放行，請參考 Cloudflare IP Ranges
- 放行所有來自
LAPLACE-Chat/* CSS-Preprocessor的 User Agent 請求（例如LAPLACE-Chat/1.0.1 CSS-Preprocessor）。通常來說不需要額外設定 - CSS 中的圖片素材需要可透過 HTTPS 存取，並放行來自彈幕機的 CORS 請求
- 建議使用境外的伺服器儲存，檔案放在中國大陸可能反而會很慢
範本中繼資料
遠端範本支援新特性「中繼資料」，您可以在 CSS 檔案的最上方定義中繼資料，為使用者展示範本的詳細資訊，規範：
/*
@title 必填：模版标题
@author 必填：作者
@description 选填：模版描述
@updated 选填（建议填写）：May 10, 2025, 1:39:30 AM PDT
@version 选填：版本，建议使用 semver。例如 1.0.0
@thumbnail 选填：预览图，建议尺寸 240×192px 的倍数。完整的 HTTPS 链接。例如 https://rsrc.laplace.cn/assets/chat-templates/thumbnails/laplace.png
*/完整範例（順序不影響）：
/*
@title 气泡样式（魔改）
@description 用来测试远程 CSS 的样式
@author LAPLACE Chat
@updated May 10, 2025, 7:02:13 AM PDT
@version 1.0.0
@thumbnail https://rsrc.laplace.cn/assets/chat-templates/thumbnails/laplace.png
*/
/* 引入 Google Fonts 字体，理论上国内可以直接访问 */
/* @import 不要嵌套在 @layer 层叠层内 */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,600;1,400;1,600&display=swap');
/* 模版本身样式，建议嵌套在 remote-css 层叠层内，可以更好的兼容模版优先级 */
@layer remote-css {
body { background-color: rgba(0, 0, 0, 0); }
/* 其他样式 */
...
}僅填寫部分欄位的範例：
/*
@title 气泡样式（魔改）
@author LAPLACE Chat
@updated May 10, 2025, 7:02:13 AM PDT
*/
@layer remote-css {
body { background-color: rgba(0, 0, 0, 0); }
/* 其他样式 */
...
}此特性於 May 10, 2025 上線
授權驗證
本站不會參與任何與授權、驗證相關的流程，如果您提供的是付費範本，為了防止交付物遭到未經授權的使用，您可能需要自行實作授權驗證以及存取統計等相關邏輯，可能的方案為：
- 為不同的客戶提供不同的 URL 網址，例如：
https://example.com/templates/12345.csshttps://example.com/templates/67890.css
- 為不同的客戶提供不同的驗證參數，例如：
https://example.com/templates/bubble.css?token=1234567890https://example.com/templates/bubble.css?token=0987654321
- 只放行來自
LAPLACE-Chat/* CSS-Preprocessor的 User Agent 請求 - 只放行來自 Cloudflare Workers 的 IP 的請求
請牢記
所有可以出現在螢幕上的內容，均可透過技術手段複製、擷取。請不要將連結的授權驗證當作唯一的防盜版措施
快取策略
- CSS 預處理器會將範本快取至多 5 分鐘，也就是說，最多每 5 分鐘請求一次站源連結，如果您的範本有大量使用者使用，可以考慮從站源額外增加快取時間，以降低頻寬壓力，通常來說 1 萬使用者以下不需要過多考慮
- 用戶端透過 ETag 來驗證範本是否更新，預設 Cache-Control 標頭為 30 分鐘
動態效果控制 reduced-motion
可以透過 reduced-motion 或 can-motion 條件類別名稱來控制事件的動態效果，當事件速率大於特定值時，事件清單將套用全域的 reduced-motion 類別名稱，否則套用 can-motion 類別名稱。此特性可避免彈幕達到一定速率時，動畫效果永遠無法顯示完成而導致可讀性變差等問題
可查看簡約氣泡（復刻）範本中的用例。控制台模式下為增強可讀性，則總是套用 reduced-motion 類別名稱
用例：
.event--message {
/* 只有当事件出现速率低于弹幕机内置的阈值时，对最后 n+2 条弹幕应用动画 */
.can-motion &:nth-last-child(-n + 2) {
animation: slideInFromBar1 ease-out forwards;
animation-duration: var(--animation-duration);
}
}內建配色
LAPLACE Chat 基於 Kladewind 與 OKLCH 色彩空間，提供了更符合人眼視覺的 Scheme-based Color Auto Switching™（簡稱 SCAS）色盤，可依據目前的系統配色自動微調整體明度（在本頁切換配色方案即可查看效果）
相容性提醒
此配色方案僅支援 Chromium 版本高於 111 的 Google Chrome 瀏覽器，或 OBS 版本高於 31 的推流軟體
所有色盤皆相容 Tailwind CSS 的配色命名方案。您可以使用下方的調色盤快速尋找並複製顏色變數
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
gray
參數
您可以透過下列參數微調 SCAS 色盤在不同情境下的表現：
--mix-base：混合基色，預設值為#fff--mix-factor：混合因子，淺色模式下預設為100%，深色模式下預設為75%（即目前主色與混合基色所佔比例中，主色佔比 100%/75%）
使用範例
@layer remote-css {
[data-theme="dark"] {
--mix-base: #fffdbf;
--mix-factor: 50%;
}
.event {
--event-toast-bg-1: color-mix(
in hsl,
var(--color-red-900) 60%,
transparent
);
--event-toast-bg-2: color-mix(
in hsl,
var(--color-purple-900) 60%,
transparent
);
--event-toast-bg-3: color-mix(
in hsl,
var(--color-blue-900) 60%,
transparent
);
}
}引導範本
身為範本作者，您可以參考下方的範本變數進行設計
請注意
此範本並未積極維護，也並未包含全部變數，僅供參考
最後更新：Sep 20, 2024
/* 引导模版 by LAPLACE Chat */
/*
🛑本模版为引导模版，包含大多数的 CSS 变量定义，您可在当前模版的基础上通过修改 CSS 对样式进行自定义
LAPLACE Chat 的编辑器为 VS Code 同款编辑器，支持颜色可视化取色，快捷键也与 VS Code 一致，可直接在编辑器中设计样式
编辑的内容会自动保存在本地，页面刷新后可自动恢复
被注释掉的属性可按 ctrl - /（Windows）或者 command - /（macOS）取消注释
*/
/* 引入 Google Fonts 字体，理论上国内可以直接访问 */
/* 更多字形可通过访问 https://fonts.google.com/ 进行挑选 */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,600;1,400;1,600&display=swap");
/* 请根据实际的载入场景选择使用 remote-css 或 custom-css 层叠层 */
@layer custom-css {
/* 创建弹幕专用变量 */
.event {
/* 以下为平台内置变量 */
/* 应用全局自定义字体 */
/* --font-sans 为 LAPLACE Chat 内置变量，可调用非衬线字体 */
--event-font-family: "Jost", var(--font-sans);
/* 弹幕文本颜色 */
/* --event-message-text: red; */
/* 也可以套用内置变量，该变量会自动根据深色模式自动调整颜色 */
/* --event-message-color: var(--text-color); */
/* 在这里重新定义普通弹幕、总督、提督、舰长用户名的文本颜色 */
--event-username-text-0: #037456;
--event-username-text-1: rgb(242, 118, 109);
--event-username-text-2: rgb(185, 81, 220);
--event-username-text-3: rgb(67, 114, 255);
/* 弹幕颜色变量 */
--event-danmaku-text: rgb(0, 0, 0);
--event-danmaku-text-0: rgb(30, 101, 58);
--event-danmaku-text-1: rgb(182, 10, 39);
--event-danmaku-text-2: rgb(123, 16, 111);
--event-danmaku-text-3: rgb(23, 70, 158);
--event-danmaku-bg-0: rgba(114, 255, 140, 0.193);
--event-danmaku-bg-1: rgba(254, 60, 96, 0.13);
--event-danmaku-bg-2: rgba(248, 97, 246, 0.138);
--event-danmaku-bg-3: rgba(0, 132, 255, 0.175);
--event-danmaku-current-rank-text: rgb(0, 0, 0);
--event-danmaku-current-rank-text-1: rgb(96, 62, 3);
--event-danmaku-current-rank-text-2: rgb(63, 70, 87);
--event-danmaku-current-rank-text-3: rgb(101, 54, 20);
--event-danmaku-current-rank-bg-1: rgb(255, 207, 50);
--event-danmaku-current-rank-bg-2: rgb(203, 203, 207);
--event-danmaku-current-rank-bg-3: rgb(233, 180, 147);
--event-danmaku-mod-text: rgb(102, 105, 185);
--event-danmaku-streamer-text: rgb(191, 120, 192);
/* 醒目留言颜色变量 */
--event-superchat-top-text: #000000;
--event-superchat-top-text-1: rgb(8, 22, 146);
--event-superchat-top-text-2: rgb(6, 81, 127);
--event-superchat-top-text-3: rgb(154, 111, 19);
--event-superchat-top-text-4: rgb(164, 82, 31);
--event-superchat-top-text-5: rgb(146, 17, 8);
--event-superchat-top-text-6: rgb(127, 9, 46);
--event-superchat-top-bg-1: rgba(16, 67, 255, 0.368);
--event-superchat-top-bg-2: rgba(16, 167, 255, 0.368);
--event-superchat-top-bg-3: rgba(255, 235, 16, 0.368);
--event-superchat-top-bg-4: rgba(255, 124, 16, 0.368);
--event-superchat-top-bg-5: rgba(255, 40, 16, 0.368);
--event-superchat-top-bg-6: rgba(255, 16, 64, 0.368);
--event-superchat-message-text: rgb(255, 255, 255);
--event-superchat-message-text-1: rgb(225, 234, 255);
--event-superchat-message-text-2: rgb(225, 252, 255);
--event-superchat-message-text-3: rgb(255, 251, 225);
--event-superchat-message-text-4: rgb(255, 237, 225);
--event-superchat-message-text-5: rgb(255, 226, 225);
--event-superchat-message-text-6: rgb(255, 221, 229);
--event-superchat-bg: transparent;
--event-superchat-bg-1: rgb(48, 42, 209);
--event-superchat-bg-2: rgb(32, 137, 194);
--event-superchat-bg-3: rgb(221, 159, 36);
--event-superchat-bg-4: rgb(209, 117, 42);
--event-superchat-bg-5: rgb(209, 59, 42);
--event-superchat-bg-6: rgb(167, 16, 16);
/* 礼物颜色变量 */
--event-gift-text: rgb(0, 0, 0);
--event-gift-text-1: rgb(239, 242, 255);
--event-gift-text-2: rgb(220, 255, 233);
--event-gift-text-3: rgb(99, 69, 0);
--event-gift-text-4: rgb(255, 247, 241);
--event-gift-text-5: rgb(255, 243, 243);
--event-gift-text-6: rgb(255, 226, 230);
--event-gift-bg-1: rgb(55, 126, 224);
--event-gift-bg-2: rgb(82, 183, 67);
--event-gift-bg-3: rgb(255, 208, 67);
--event-gift-bg-4: rgb(255, 145, 41);
--event-gift-bg-5: rgb(242, 68, 68);
--event-gift-bg-6: rgb(160, 0, 51);
--event-gift-normal-text-1: rgb(29, 82, 155);
--event-gift-normal-text-2: rgb(44, 141, 29);
--event-gift-normal-text-3: rgb(180, 140, 21);
--event-gift-normal-text-4: rgb(231, 125, 25);
--event-gift-normal-text-5: rgb(181, 34, 34);
--event-gift-normal-text-6: rgb(150, 9, 54);
--event-gift-normal-bg-1: transparent;
--event-gift-normal-bg-2: transparent;
--event-gift-normal-bg-3: transparent;
--event-gift-normal-bg-4: transparent;
--event-gift-normal-bg-5: transparent;
--event-gift-normal-bg-6: transparent;
/* 舰长颜色变量 */
--event-toast-text: rgb(0, 0, 0);
--event-toast-text-1: rgb(140, 0, 0);
--event-toast-text-2: rgb(118, 18, 152);
--event-toast-text-3: rgb(0, 56, 146);
--event-toast-bg-1: rgb(255, 185, 187);
--event-toast-bg-2: rgb(250, 187, 255);
--event-toast-bg-3: rgb(192, 216, 255);
/* MVP（守护圣法师、etc）颜色变量 */
--event-mvp-text: rgb(0, 0, 0);
--event-mvp-text-1: rgb(114, 79, 47);
--event-mvp-text-2: rgb(114, 79, 47);
--event-mvp-text-3: rgb(114, 79, 47);
--event-mvp-text-4: rgb(114, 79, 47);
--event-mvp-text-5: rgb(114, 79, 47);
--event-mvp-text-6: rgb(114, 79, 47);
--event-mvp-bg-1: rgb(229, 211, 183);
--event-mvp-bg-2: rgb(229, 211, 183);
--event-mvp-bg-3: rgb(229, 211, 183);
--event-mvp-bg-4: rgb(229, 211, 183);
--event-mvp-bg-5: rgb(229, 211, 183);
--event-mvp-bg-6: rgb(229, 211, 183);
/* 互动颜色变量 */
--event-interaction-text-enter: rgb(127, 137, 159);
--event-interaction-text-follow: rgb(219, 113, 7);
--event-interaction-text-share: rgb(174, 85, 207);
--event-interaction-text-follow-special: rgb(217, 50, 50);
--event-interaction-text-follow-mutual: rgb(47, 142, 219);
/* 系统颜色变量 */
--event-system-text: rgba(35, 34, 37, 0.553);
/* 禁言颜色变量 */
--event-user-block-text: #fff;
--event-user-block-bg: rgb(255, 0, 0);
}
/* 弹幕类型变量 */
.event--message {
/* --avatar-size: 18px; */
}
/* 总督变量 */
.event.guard-level--1 {
}
/* 提督变量 */
.event.guard-level--2 {
}
/* 舰长变量 */
.event.guard-level--3 {
}
/* 弹幕事件样式 */
.event--message {
}
/* 弹幕事件中的消息样式 */
.event--message .message {
}
/* 粉丝勋章样式 */
.event--message .fans-medal {
}
/* 粉丝勋章名称样式 */
.event--message .fans-medal-content {
}
/* 粉丝勋章等级样式 */
.event--message .fans-medal-level {
}
/* 修改「榜1」图标 */
/* 变量定义可从 https://master--60f5c0ae4a7e3f003ba05641.chromatic.com/ 查看 */
.event--message .current-rank {
}
/* 修改房管图标 */
.event--message .mod-badge {
}
/* 舰长事件样式 */
/*
.event-show-as--normal 将排除置顶礼物条
.event-show-as--sticky 用于置顶礼物条
*/
.event--toast.event-show-as--normal {
}
/* 礼物事件样式 */
/*
.event-size--highlight 将排除非高亮礼物事件
.event-size--normal 用于非高亮事件
*/
.event--gift.event-show-as--normal.event-size--highlight {
}
/* SC 样式 */
/* SC 颜色分为上下两个部分，因此需要单独定义背景 */
.event--superchat.event-show-as--normal {
}
/* SC 上方样式 */
.event--superchat.event-show-as--normal .top {
}
/* SC 下方正文样式 */
.event--superchat.event-show-as--normal .message {
}
/* 礼物/SC文本颜色变量 */
/*
此处可使用 .event-superchat-rank--[n] 和 .event-gift-rank--[n] 分别定义样式，
也可以像我这样使用 .event-price-rank--[n] 统一定义样式
*/
.event.event-price-rank--1 {
}
.event.event-price-rank--2 {
}
.event.event-price-rank--3 {
}
.event.event-price-rank--4 {
}
.event.event-price-rank--5 {
}
.event.event-price-rank--6 {
}
}最後更新於 2026年9月19日