---
title: 'Onecomme Theme - EN 5 Year Anniversary'
disqus: soma
---

目錄
===
[TOC]

主題安裝
===
>OneComme主題安裝可通過手動以及設定裡的主題模板導入[color=#3b75c6]
---

## 手動導入：

1. 客製主題一般存放在 %appData%\onecomme\templates\custom，可通過複製文件途徑到文件管理路徑直接訪問。<br/>

2. 也可以通過模板所在的文件所在路勁 OneComme -> 右菜單 -> 模板 -> 任何模板 -> 打開文件所在<br/>

3. 解壓文件主題的.zip壓縮至templates\custom
4. 注意：文件夾結構需保持 templates\custom\ ==主題名字==
5. 重啟OneComme程序即可生效。

---

## 主題模板導入：

1. 通過OneComme -> 右菜單 -> 模板 導入主題.zip 即可

---

OBS上使用onecomme主題
===
>OBS設置彈幕機和選用主題[color=#3b75c6]
---

1. 獲取onecomme 的URL鏈接：通過點模板預覽獲取鏈接。

2. 此時彈幕會彈跳到瀏覽器並獲得如一下的IP鏈接http://192.168.0.244:11180/templates/custom/mycomme/

3. 避免下次開機因動態IP更換而導致彈幕機失效，可以將IP調整成如以下url
http://==192.168.0.244==:11180/templates/custom/mycomme/
http://==localhost==:11180/templates/custom/mycomme/

4. 在OBS添加一個Browser的資源


5. 填入url，設置寬度需在600px或以上

6. 完成！

---

主題文件結構
===
>文件夾結構[color=#3b75c6]
---

├ 主題文件夾<br/>
&emsp;├demo_chat\ &emsp;&emsp;&emsp;&emsp;==【預覽數據】==<br/>
&emsp;├fonts\ &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;==【字體文件】==<br/>
&emsp;├images\ &emsp;&emsp;&emsp;&emsp;&emsp;&ensp;==【圖像】==<br/>
&emsp;├presets\ &emsp;&emsp;&emsp;&emsp;&emsp;&ensp;==【主題預設】==<br/>
&emsp;├animations.css &emsp;&emsp;&ensp;==【css動畫】==<br/>
&emsp;├config.css &emsp;&emsp;&emsp;&emsp;&ensp;==【主題參數設定】==<br/>
&emsp;├fonts.css &emsp;&emsp;&emsp;&emsp;&emsp;&ensp;==【字體載入文件】==<br/>
&emsp;├index.html &emsp;&emsp;&emsp;&emsp;&ensp;==【主題結構】==<br/>
&emsp;├Readme.txt &emsp;&emsp;&emsp;&emsp;&ensp;==【操作手冊】==<br/>
&emsp;├script.js &emsp;&emsp;&emsp;&emsp;&ensp;==【js數據類處理】==<br/>
&emsp;├script-Demo.js &emsp;&emsp;&ensp;==【js預覽數據類處理】==<br/>
&emsp;├script-Normal.js &emsp;&ensp;==【js正常數據類處理】==<br/>
&emsp;├sensitiveWords.json &emsp;&ensp;==【敏感詞庫】==<br/>
&emsp;├style.css &emsp;&emsp;&emsp;&emsp;&emsp;&ensp;==【主題樣式主文件】==<br/>
&emsp;└thumb.png &emsp;&emsp;&ensp;==【OneComme主題預覽圖】==<br/>

---

主題預覽和正常模式
===
>主題script.js控制彈幕數據。在預覽模式下用戶可預覽主題元素，在調試過程更加便捷。[color=#EFA92A]
---
1. script.js 默認是正常對接各大平台的數據，而script-Demo.js則是用來預覽主題使用。
2. 預覽數據.json存放在**demo_chat**文件夾。

:::danger
#### **切換預覽模式 操作方法**

1. 刪除原有的script.js
2. 複製script-Demo.js
3. 更名複製的js文件為script.js
4. 刷新瀏覽器 或 清楚OBS緩存即可生效。
5. 更換json數據，同等以上概念切換demo_chat裡的文件。
6. 默認文件夾名是 chats.json
7. 可根據想要預覽的彈幕進行更名切換chats.json。
8. 刷新！

:::

:::success
#### **恢復正常模式 操作方法**

1. 刪除原有的script.js
2. 複製script-Normal.js
3. 更名複製的js文件為script.js
4. 刷新！
:::

主題 設定
===
>config.css 本主題所有細節全局性調整文件。可根據自身需要進行調整。[color=#00687C]
---

## **常規 字體設定**
:::warning
字體設定
:::

/* General Font Setting 常規 字體 樣式 */
    --general-font-size: 24px;    /* 全局 字體 大小 24px = 1em */
    --general-line-height: 1.5;   /* 全局 字行 默認 高度 24px x 1.5 */
    --general-font-normal: MiSans-Normal;       /* 一般 字體 */
    --general-font-bold: MiSans-Bold;           /* 粗體 字體 */
    --general-font-semi-bold: MiSans-Semibold;  /* 半粗體 字體 */

| 變量 | 參數 | 說明 |
| -------- | -------- | -------- |
| general-font-size | 24px | 全局字體em單位參考，表示1em=24px |
| general-line-height | 1.5 | 一行字默認高度 1.5x24px= 36px |
| general-font-normal | MiSans-Normal | 一般Font 樣式 |
| general-font-bold | MiSans-Bold | 粗體Font 樣式 |
| general-font-semi-bold| MiSans-Semibold | 半粗體Font 樣式 |

:::info
備註①：==general-font-size== 指定1em的字體單位佔用多少個px，默認情況是16px = 1em,大解析度則 24px = 1em,超大解析度可達到36px = 1em
:::

:::info
備註②：==general-line-height== 指定一行字的高度，當留言變成兩行時，上一行和下一行的間距。
:::

:::info
備註③：==general-font== 採用的字體Front，默認採用主題自帶的自定義字體，也可以套用操作系統上的字體，但名字需準確。例如："Times New Roman"
:::

---

## **常規 字體大小**
:::warning
字體大小
:::

    --username-font-size: 0.9em;    /* 暱稱 字體 大小 */
    
    --comment-font-size: 0.9em;     /* 留言 字體 大小 */
    --comment-font-weight:600;      /* 留言 字體 重量 */
    --comment-gift-size: 2em;       /* 留言 禮物圖 大小 */
    --comment-emoji-size: 1em;      /* 留言 表情圖 大小 */
    --comment-emoji-margin: 0.2em;  /* 留言 表情圖 外邊距 */
    
    --member-title-font-size: 1em;          /* 會員 字體 標題 大小 */
    --member-subtitle-font-size: 0.7em;     /* 會員 字體 副標題 大小 */
    
    --gift-text-size: 0.9em;    /* 禮物 行 字體 大小 0.1-1.5em */
    
    --sc-paidTextOnly-font-size: 1.2em;     /* SC框 價格 字體 大小 0.1-1.5em*/
    --sc-paidText-font-size: 0.6em;         /* SC框 價格小框 字體 大小 0.1-1.5em*/

    --sc-membername-font-size: 0.6em;       /* SC 里程碑 粉絲牌 字體 大小 */
    --sc-mile-duration-font-size: 0.6em;    /* SC 里程碑 訂閱年齡 字體 大小 */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | username-font-size | 0.9em | 暱稱 字體 大小 em單位|
| 2 | comment-font-size | 0.9em | 留言 字體 大小 em單位|
| 3 | comment-font-weight | 600 | 留言 字體 重量：輕100,200,300,400，一般500，600以上為粗體 |
| 4 | comment-gift-size | 2em | 留言 禮物圖 大小 em單位|
| 5 | comment-emoji-size | 1em | 留言 表情圖 大小 em單位|
| 6 | comment-emoji-margin | 0.2em | 留言 表情圖 外邊距 em單位 |
| 7 | member-title-font-size | 1em | 會員 字體 標題 大小 |
| 8 | member-subtitle-font-size | 0.7em | 會員 字體 副標題 大小 |
| 9 | gift-text-size | 0.9em | 禮物 行 字體 大小 0.1-1.5em |
| 10 | sc-paidTextOnly-font-size | 1.2em | SC框 價格 字體 大小 0.1-1.5em |
| 11 | sc-paidText-font-size | 0.6em | SC框 價格小框 字體 大小 0.1-1.5em |
| 12 | sc-membername-font-size | 0.6em | SC 里程碑 粉絲牌 字體 大小 |
| 13 | sc-mile-duration-font-size | 0.6em | SC 里程碑 訂閱年齡 字體 大小 |

---


--comment-supersticker-size: 80px;      /* 留言 YT 超級貼圖 大小 */

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | --comment-supersticker-size | 80px | YT 超級貼圖 大小 px|

---

## **常規 圖源**
:::warning
圖源 路徑
:::

/* 圖源 */
    --img-listener-left-url: url('images/listener2.gif');       /* 圖源 */
    --img-listener-right-url: url('images/listener.gif');       /* 圖源 */
    --img-icon-youtube-url: url('images/yt.png');               /* YT 圖源 */
    --img-icon-twitch-url: url('images/twitch.png');            /* twitch 圖源 */
    --img-icon-bilibili-url: url('images/bilibili.png');        /* Bilibili 圖源 */
    --img-icon-other-url: url('images/other.png');              /* 其他 圖源 */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | img-listener-left-url | url() | 飾品 左邊 文件路徑|
| 2 | img-listener-right-url | url() | 飾品 右邊 文件路徑|
| 3 | img-icon-youtube-url | url() | 平台Logo Youtube 文件路徑|
| 4 | img-icon-twitch-url | url() | 平台Logo Twitch 文件路徑|
| 5 | img-icon-bilibili-url | url() | 平台Logo Bilibili 文件路徑|
| 6 | img-icon-other-url | url() | 平台Logo 其他 文件路徑|

---

## **常規 文字內容**
:::warning
文字內容
:::


/* 文字 禮物&脫換&SC */
    --text-yt-act-sponsor: "贈送了";            /* 文字 動作 贈送 YT */
    --text-yt-unit-sponsor: "件會籍";           /* 文字 動作 單位 YT */
    --text-yt-act-getGift: "獲得贈送會籍";      /* 文字 動作 獲得 YT */
    --text-tw-act-sponsor: "投了";             /* 文字 動作 贈送 Twitch */
    --text-tw-act-reward: "脫換了";            /* 文字 動作 脫換 Twitch */
    --text-tw-act-getMember: "獲得會籍";       /* 文字 動作 獲得會員 Twitch */
    --text-tw-cheer-unitName: "小奇點";        /* 文字 SC 貨幣單位 Twitch */

    --text-act-congrate: "恭喜";            /* 文字 動作 祝賀 */
    
    --text-tw-name-memberName: "會籍";      /* 文字 會員顯示名稱 Twitch */

    --text-bi-currency-unitName: "￥";      /* 文字 SC 貨幣單位 Bilibili */

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | text-yt-act-sponsor | 文字 | YT 投禮物 動作|
| 2 | text-yt-unit-sponsor | 文字 | YT 禮物 名稱|
| 3 | text-yt-act-getGift | 文字 | YT 獲得禮物 動作|
| 4 | text-tw-act-sponsor | 文字 | Twitch 投禮物 動作|
| 5 | text-tw-act-reward | 文字 | Twitch 兌換東西 動作|
| 6 | text-tw-act-getMember | 文字 | Twitch 獲得禮物 動作|
| 7 | text-tw-cheer-unitName | 文字 | Twitch 小奇點 單位|
| 8 | text-act-congrate | 文字 | 全局 祝賀詞|
| 9 | text-tw-name-memberName | 文字 | Twitch 會員 名稱|
| 10 | text-bi-currency-unitName| 文字 | Bilibili SC 單位|

---
## **常規 文字 會員內容**
:::warning
文字 會員 內容
:::

/* 文字 會員 */

    --text-yt-act-member: "加入會員";       /* 文字 動作 成為會員 YT */
    --text-tw-act-member: "加入會員";       /* 文字 動作 成為會員 Twitch */
    --text-tw-sub1-member: "歡迎訂閱了";    /* 文字 副標題1 成為會員 Twitch */
    --text-tw-sub2-member: "個月會籍";      /* 文字 副標題2 成為會員 Twitch */

    --text-bi-member-title1: "舰长";        /* 文字 會員 艦長 Bilibili */
    --text-bi-member-title2: "提督";        /* 文字 會員 提督 Bilibili */
    --text-bi-member-title3: "总督";        /* 文字 會員 總督 Bilibili */
    --text-bi-member-sub: "WELCOME!";       /* 文字 會員 副標題 Bilibili */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | text-yt-act-member | 文字 | YT 加入會員 動作|
| 2 | text-tw-act-member | 文字 | TW 加入會員 動作|
| 3 | text-tw-sub1-member | 文字 | TW 歡迎 動作|
| 4 | text-tw-sub2-member | 文字 | TW 會籍 單位名稱|
| 5 | text-bi-member-title1 | 文字 | B站 會員 舰长 名稱|
| 6 | text-bi-member-title1 | 文字 | B站 會員 提督 名稱|
| 7 | text-bi-member-title1 | 文字 | B站 會員 总督 名稱|
| 8 | text-bi-member-sub | 文字 | B站 會員 副標題|

---

## **常規 大小設定 用戶相關**
:::warning
大小設定 暱稱 徽章
:::

    --name-max-width: 225px;            /* 暱稱框 最大 長度 */
    --name-min-width: 100px;            /* 暱稱框 最小 長度 */
    --username-border-size: 4px;        /* 暱稱框 邊框 0-6px */
    --username-block-top-margin: 0px;   /* 暱稱框 上外邊距 -10-10px */
    --username-block-left-margin: 85px;   /* 暱稱框 上外邊距 0-100px */
    --badges-border-size: 3px;          /* 徽章 邊框 0-3px */
    --badges-block-height: 38px;        /* 徽章 上外邊距 30-46px */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | name-max-width | 225px | 暱稱框 最大 長度 px|
| 2 | name-min-width | 100px | 暱稱框 最小 長度 px|
| 3 | username-border-size | 4px | 暱稱框 邊框 大小 0-6px|
| 4 | username-block-top-margin | 0px | 暱稱框 上外邊距 -10-10px|
| 5 | username-block-left-margin | 85px | 暱稱框 上外邊距 0-100px|
| 6 | badges-border-size | 3px | 徽章 邊框 0-3px|
| 7 | badges-block-height | 38px | 徽章 上外邊距 30-46px|

---

## **常規 大小設定 頭像**
:::warning
大小設定 頭像
:::

    --img-avatar-size: 30px;            /* 頭像 大小 */
    --img-avatar-border: 3px;           /* 頭像 邊框 大小 0-5px */
    --img-avatar-right-margin: 1px;     /* 頭像 暱稱右邊外邊距 0-10px */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | img-avatar-size | 30px | 頭像 大小 px|
| 2 | img-avatar-border | 3px | 頭像 邊框 大小 0-5px|
| 3 | img-avatar-right-margin | 1px | 頭像 暱稱右邊外邊距 0-10px|

---

## **常規 大小設定 對話框**
:::warning
大小設定 對話框
:::

    --content-border-size: 5px;         /* 對話框 邊框 0-8px */
    --content-top-margin: 42px;         /* 對話框 上外邊距 30-60px */
    --content-left-margin: 55px;        /* 對話框 左外邊距 10-120px */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | content-border-size | 5px | 對話框 邊框 0-8px|
| 2 | content-top-margin | 42px | 對話框 上外邊距 30-60px|
| 3 | content-left-margin | 55px | 對話框 左外邊距 10-120px|

---

## **常規 大小設定 對話框 內邊距**
:::warning
大小設定 對話框 內邊距
:::

/* 對話框 內邊距 參數順序：Top（上）、Right（右）、Bottom（下）、Left（左） */
    --nor-content-padding: 20px 10px 5px 35px;      /* 一般 對話框 內邊距 */
    --mem-content-padding: 10px 10px 10px 29px;     /* 會員 對話框 內邊距 */
    --sct-content-padding: 6px 10px 5px 29px;       /* SC 對話框 內邊距 */
    --oth-content-padding: 6px 10px 5px 29px;       /* 其他 對話框 內邊距 */


:::info
定義元素邊框與元素內容之間的空間，即上右下左的內邊距。<br/>
參數順序：Top（上）、Right（右）、Bottom（下）、Left（左）
:::
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | nor-content-padding | 20px 10px 5px 35px | 一般 對話框 內邊距 |
| 2 | mem-content-padding | 10px 10px 10px 29px | 會員 對話框 內邊距 |
| 3 | sct-content-padding | 6px 10px 5px 29px | SC 對話框 內邊距 |
| 4 | oth-content-padding | 6px 10px 5px 29px | 其他 對話框 內邊距 |

---

## **常規 大小設定 SC相關 外邊距**
:::warning
大小設定 SC相關 外邊距
:::

    --sc-paidText-right-margin: 5px;    /* SC框 價格小框 右邊距離 0-40px*/
    --sc-paidText-border-size: 2px;     /* SC框 價格小框 邊框 大小 0-40px*/
    --sc-membername-left-margin: 5px;   /* SC 里程碑 會員名稱 左邊 距離 0-20px*/
    --sc-milestone-right-margin: 5px;   /* SC 里程碑 訂閱年齡 右邊 距離 0-20px*/
    --sc-milestone-bottom-margin: 0px;  /* SC 里程碑 訂閱年齡 底部 距離 0-20px*/


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | sc-paidText-right-margin | 5px | SC框 價格小框 右邊距離 0-40px |
| 2 | sc-paidText-border-size | 2px | SC框 價格小框 邊框 大小 0-40px |
| 3 | sc-membername-left-margin | 5px | SC 里程碑 會員名稱 左邊 距離 0-20px|
| 4 | sc-milestone-right-margin | 5px | SC 里程碑 訂閱年齡 右邊 距離 0-20px|
| 5 | sc-milestone-bottom-margin| 0px | SC 里程碑 訂閱年齡 底部 距離 0-20px|

---

## **常規 大小設定 禮物 外邊距**
:::warning
大小設定 禮物 外邊距
:::

    --gift-min-height: 50px;        /* 禮物 行 高度 最小值 40-60px */
    --gift-top-margin: 16px;        /* 禮物 行 邊距 頂部 0-30px */
    --gift-bottom-margin: 0px;      /* 禮物 行 邊距 底部 0-30px */

    --gift-dot-left-margin: 50px;   /* 禮物 三點裝飾 邊距 左邊 0-150px */

    --gift-dot-size: 7px;               /* 禮物 三點裝飾 大小 0-12px */
    --gift-dot-special-size: 9px;       /* 禮物 三點裝飾 大小 0-12px */
    --gift-dot-align-left-margin: 1px;  /* 禮物 三點裝飾 視覺對齊 調整 0-5px */
    --gift-line-aligment: center;       /* 禮物 行 視覺對齊 調整 左(start), 居中(center),右(end) */
    
    --gift-kusa-size: 0.79em;           /* 禮物 行 草苗 大小 0.1-1.5em */
    --gift-kusa-right-margin: 10px;     /* 禮物 行 草苗 右邊 邊距 0-20px */
    --gift-image-size: 2em;             /* 禮物 行 礼物图 大小 0.1-2.5em */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | gift-min-height | 50px | SC框 價格小框 右邊距離 0-40px |
| 2 | gift-top-margin | 16px | SC框 價格小框 邊框 大小 0-40px |
| 3 | gift-bottom-margin | 0px | SC 里程碑 會員名稱 左邊 距離 0-20px|
| 4 | gift-dot-left-margin | 5px | SC 里程碑 訂閱年齡 右邊 距離 0-20px|
| 5 | gift-dot-size| 0px | 禮物 三點裝飾 大小 0-12px|
| 6 | gift-dot-special-size| 9px | 禮物 三點裝飾 大小 0-12px|
| 7 | gift-dot-align-left-margin| 1px | 禮物 三點裝飾 視覺對齊 調整 0-5px|
| 8 | gift-line-aligment| center | 禮物 行 視覺對齊 調整 左(start), 居中(center),右(end)|
| 9 | gift-kusa-size| 0.79em | 禮物 行 草苗 大小 0.1-1.5em|
| 10 | gift-kusa-right-margin| 10px | 禮物 行 草苗 右邊 邊距 0-20px|
| 11 | gift-image-size| 2em | 禮物 行 礼物图 大小 0.1-2.5em|

---

主題 預設
===
>本主題具備本體內置預設和外置預設（OBS CSS 預設）[color=#3b75c6]

---
:::info
1. css預設是通過代碼疊層覆寫實現，也就是代碼疊層的情況下，內置預設 （preset.css）的參數將會被外置預設（OBS CSS 預設）覆蓋
2. preset.css 文件是主要預設，文件刪除將導致主題崩壞。
3. OBS置入的CSS則是副預設，可覆寫preset.css的參數。
:::

:::warning
1. **==內置預設==**：preset.css是整個主題的全局預設，可通過備用模板如：preset-orange.css切換彈幕主題色。
2. **==外置預設==**：在OBS置入預設可提供主播在調整直播間上的便利。可根據場景進行主題適配保存，不需要切換preset.css改動全局預設。
:::

## **預設結構**
>內置預設和外置預設結構相同，使用相同的變量[color=#3b75c6]

---
* 所有的變量參數Parameter 需放置在 ==:root{...}==

### **顯示或隱藏元素**

:::success
參數說明：
1. flex：開 / 顯示
2. none：關 / 隱藏
:::

    --img-avatar-show: flex;        /* 頭像 */ 
    --badges-section-show: flex;    /* 徽章 */
    --ribbon-normal-show: flex;     /* 元素 半圓環 一般彈幕 */
    --ribbon-special-show: flex;    /* 元素 直線條 SC、會員 彈幕 */
    --ribbon-gift-show: flex;       /* 元素 直線條 禮物彈幕 */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | img-avatar-show | flex | 顯示、隱藏 頭像 |
| 2 | badges-section-show | flex | 顯示、隱藏 徽章 |
| 3 | ribbon-normal-show | flex | 顯示、隱藏 元素 半圓環 一般彈幕|
| 4 | ribbon-special-show | flex | 顯示、隱藏 元素 直線條 SC、會員 彈幕|
| 5 | ribbon-gift-show | flex | 顯示、隱藏 元素 直線條 禮物彈幕|

---

    --bx-normal-show: none;          /* 元素 框裝飾 一般彈幕 */
    --bx-special-left-show: none;    /* 元素 框裝飾 左邊 SC、會員彈幕 */
    --bx-special-right-show: none;   /* 元素 框裝飾 右邊 SC、會員彈幕 */
    --bx-milestonechat-show: none;   /* 元素 框裝飾 YT會員milestone彈幕 */

    --background-icon-show: flex;    /* 元素 背景平台圖標 SC、會員彈幕 */  


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | bx-normal-show | flex | 顯示、隱藏 頭像 |
| 2 | bx-special-left-show | flex | 顯示、隱藏 徽章 |
| 3 | bx-special-right-show | flex | 顯示、隱藏 元素 半圓環 一般彈幕|
| 4 | bx-milestonechat-show | flex | 顯示、隱藏 元素 直線條 SC、會員 彈幕|
| 5 | background-icon-show | flex | 顯示、隱藏 元素 直線條 禮物彈幕|

---

### **顏色碼**
:::success
常用的顏色碼：
1. hex color code 如：#EFE7F3 【包含透明參數】
2. rgb 如：rgb(216, 196, 226) 【rgb不包含透明參數】
3. rgba 如：rgb(216, 196, 226, 0.5) 【含透明參數,尾參數0.00-1.00】

備註： 使用Visual Studio Code 容易查找和轉換顏色碼
:::

### **顏色碼 一般對話框**

    /* 一般彈幕 相關 */
    --one-normal-bg-color: #EFE7F3;     /* 背景 */
    --one-normal-bd-color: #A563C6;     /* 邊框 */
    --one-normal-text-color: #BC5CED;   /* 彈幕 字體 顏色 */
    --one-n-name-bg-color: #E3D5EA;     /* 名字 背景 */
    --one-n-name-bd-color: #C576ED;     /* 名字 邊框 */
    --one-n-name-text-color: #af45e4;   /* 名字 字體 顏色 */
    --one-n-badge-bg-color: #E3D5EA;    /* 徽章 背景 */
    --one-n-badge-bd-color: #C576ED;    /* 徽章 邊框 */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-normal-bg-color | #EFE7F3 | 背景 |
| 2 | one-normal-bd-color | #A563C6 | 邊框 |
| 3 | one-normal-text-color | #BC5CED | 彈幕 字體 顏色|
| 4 | one-n-name-bg-color | #E3D5EA | 名字 背景|
| 5 | one-n-name-bd-color | #C576ED | 名字 邊框|
| 6 | one-n-name-text-color | #af45e4 | 名字 字體 顏色|
| 7 | one-n-badge-bg-color | #E3D5EA | 徽章 背景|
| 8 | one-n-badge-bd-color | #C576ED | 徽章 邊框|

---

### **顏色碼 禮物、兌換彈幕**

/* 禮物彈幕 相關 */
    --one-gf-text-color: #BC5CED;   /* 彈幕 字體 顏色 */
    --one-gf-shadowText1-color: rgba(216, 196, 226, 0.7);             /* 彈幕 字體 影子 顏色 */
    --one-gf-shadowText2-color: rgba(216, 196, 226, 0.6);             /* 彈幕 字體 影子 顏色 2*/
    --one-gf-shadow-size: 2px;      /* 彈幕 字體 影子 大小*/
    --one-gf-shadowBlur: 1px;       /* 彈幕 字體 影子 模糊度*/


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-gf-text-color | #BC5CED | 彈幕 字體 顏色 |
| 2 | one-gf-shadowText1-color | rgba(216, 196, 226, 0.7) | 彈幕 字體 影子 顏色 |
| 3 | one-gf-shadowText2-color | rgba(216, 196, 226, 0.6) | 彈幕 字體 影子 顏色 2|
| 4 | one-gf-shadow-size | 2px | 彈幕 字體 影子 大小 px|
| 5 | one-gf-shadowBlur | 1px | 彈幕 字體 影子 模糊度 px|

---

### **顏色碼 會員彈幕**

    /* 會員 相關 */
    --one-mb-bg-color: #EFE7F3;         /* 背景 */
    --one-mb-bd-color: #A563C6;         /* 邊框 */
    --one-mb-text-color: #BC5CED;       /* 彈幕 字體 顏色 */
    --one-mb-secText-color: #f98289;    /* 彈幕 字體 顏色 2 */
    --one-mb-name-bg-color: #E3D5EA;    /* 名字 背景 */
    --one-mb-name-bd-color: #C576ED;    /* 名字 邊框 */
    --one-mb-name-text-color: #af45e4;  /* 名字 字體 顏色 */
    --one-mb-badge-bg-color: #E3D5EA;   /* 徽章 背景 */
    --one-mb-badge-bd-color: #C576ED;   /* 徽章 邊框 */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-mb-bg-color | #EFE7F3 | 背景 |
| 2 | one-mb-bd-color | #A563C6 | 邊框 |
| 3 | one-mb-text-color | #BC5CED | 彈幕 字體 顏色|
| 4 | one-mb-secText-color | #f98289 | 名字 背景|
| 5 | one-mb-name-bg-color | #E3D5EA | 名字 邊框|
| 6 | one-mb-name-bd-color | #C576ED | 名字 字體 顏色|
| 7 | one-mb-name-text-color | #af45e4 | 徽章 背景|
| 8 | one-mb-badge-bg-color | #E3D5EA | 徽章 邊框|
| 9 | one-mb-badge-bd-color | #C576ED | 徽章 邊框|

---

### 顏色碼 **SuperChat & Milestone 彈幕**

    /* SuperChat & Milestone Chat 相關 */
    --one-sc-bg-color: #EFE7F3;     /* 背景 */
    --one-sc-bd-color: #A563C6;;     /* 邊框 */

    --one-sc-text-color: #BC5CED;       /* 彈幕 字體 顏色 */
    --one-sc-secText-color: #872841;    /* 名字 背景 */
    --one-sc-thrText-color: #430960;    /* 名字 字體 顏色 */

    --one-sc-name-bg-color: #E3D5EA;    /* 名字 背景 */
    --one-sc-name-bd-color: #C576ED;    /* 名字 邊框 */
    --one-sc-name-text-color: #af45e4;  /* 名字 字體 顏色 */

    --one-sc-badge-bg-color: #E3D5EA;   /* 徽章 背景 */
    --one-sc-badge-bd-color: #C576ED;   /* 徽章 邊框 */

    --one-sc-paid-bg-color: #C977F2;    /* 付費 背景 */
    --one-sc-paid-bd-color: #5E0914;    /* 付費 邊框 */
    --one-sc-paidText-color: #F7ECFD;   /* 付費 字體 顏色 */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-sc-bg-color | #EFE7F3 | 背景 |
| 2 | one-sc-bd-color | #A563C6 | 邊框 |
| 3 | one-sc-text-color | #BC5CED | 彈幕 字體 顏色|
| 4 | one-sc-secText-color | #872841 | 名字 背景|
| 5 | one-sc-thrText-color | #430960 | 名字 邊框|
| 6 | one-sc-name-bg-color | #E3D5EA | 名字 背景|
| 7 | one-sc-name-bd-color | #C576ED | 名字 邊框|
| 8 | one-sc-name-text-color | #af45e4 | 名字 字體 顏色|
| 9 | one-sc-badge-bg-color | #E3D5EA | 徽章 背景|
| 10| one-sc-badge-bd-color | #C576ED | 徽章 邊框|
| 11| one-sc-paid-bg-color | #C977F2 | 付費 背景|
| 12| one-sc-paid-bd-color | #5E0914 | 付費 邊框|
| 13| one-sc-paidText-color | #F7ECFD | 付費 字體 顏色|

---

### 顏色碼 **裝飾物 相關**

    /* 裝飾物 相關 */
    --one-dot-color: #CDB3D9;           /* 裝飾 圓點 顏色 */
    --one-dot2-color: #AF38EA;          /* 裝飾 +點 顏色 */

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-dot-color | #CDB3D9 | 裝飾 圓點 顏色 |
| 2 | one-dot2-color | #AF38EA | 裝飾 +點 顏色 |

---

### 顏色碼 **裝飾物 相關 2**

    --one-bx1-color:#ffcc33; /* 裝飾 1 顏色 */
    --one-bx2-color:#6eff75; /* 裝飾 2 顏色 */
    --one-bx3-color:#3db2b6; /* 裝飾 3 顏色 */
    --one-bx4-color:#ff4444; /* 裝飾 4 顏色 */


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-bx1-color | #ffcc33 | 裝飾 1 顏色 |
| 2 | one-bx2-color | #6eff75 | 裝飾 2 顏色 |
| 3 | one-bx2-color | #3db2b6 | 裝飾 3 顏色 |
| 4 | one-bx2-color | #ff4444 | 裝飾 4 顏色 |

---

    /* 會員閃光 相關 */
    --one-kirakira-gradient-start:rgba(250, 239, 255, 0);
    --one-kirakira-gradient-end:rgba(250, 239, 255, 0.65);


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-kirakira-gradient-start | rgba(250, 239, 255, 0) | 閃光層 開始 |
| 2 | one-kirakira-gradient-end | rgba(250, 239, 255, 0.65) | 閃光層 結束 |

---
:::info
1. 閃光層默認使用rgba(),尾數 (xxx,xxx,xxx,1)指的是透明度，數值 0.00-1
:::

## **CSS File Preset Setting**
>CSS預設文件[color=#3b75c6]

* 本主題預設了五款主題色，可根據需要進行自定調整。

1. preset.css ==【默認】==
2. preset-benihi.css
3. preset-cyan.css
4. preset-green.css
5. preset-orange.css
6. preset-pink.css
7. preset-violet.css

* 默認文件是preset.css。
* 複製preset.css 可保存自定義預設。
* 通過命名可替換成其它預設,如：將preset-xxxx.css 改成 preset.css
* 注意：此操作將會是全局主題替換。

---

## **OBS CSS Preset Setting**
>調整OBS主題顏色預設[color=#3b75c6]
---
* 複製預設文件裡的:root{...}所包含的參數植入OBS彈幕資源裡的Custom CSS （自定義CSS）欄裡：

* 刷新緩存並保存即可生效。（示範採用綠色系）

* 多預設保存預覽

---

Gank 进度条 美化
===
>Gank进度条美化[color=#3b75c6]
---

:::info
配置Gank進度條美化之前需要了解本操作原理
:::

1. 本美化纯靠外掛css实现，因此无法修改任何数据架框。
2. 由於無法修改伺服器資源，字體font需要預先安裝到電腦才能獲取。
3. 所有圖像資源需要靠圖床或者伺服器，因此這裡使用OneComme的伺服器作為靠掛。
4. 需開啟OneComme才能加載到圖。

## 主題 背景

>本主題背景為透明，但有些外邊距（margin）和內邊距（padding）需要補充[color=#3b75c6]
---

    --layout-margin-top: 0;
    --layout-margin-bottom: 0;
    --layout-margin-left: 30px;
    --layout-margin-right: 60px;   
   
    --layout-padding-top: 30px;
    --layout-padding-bottom: 10px;
    --layout-padding-left: 16px;
    --layout-padding-right: 50px;

    --layout-image-url: url('http://localhost:11180/templates/custom/en_5anniversary/images/kitsune.png');
    --layout-image-width: 150px;
    --layout-image-height: 150px;
    --layout-image-top: 0px;
    --layout-image-bottom: auto;
    --layout-image-left: auto;
    --layout-image-right: -50px;
    --layout-image-z-index: 0;


* 紅色框外的空間

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | layout-margin-top | 0 | 背景 上外邊距 默認是 0px 裝飾圖需要空間可以增減 |
| 2 | layout-margin-bottom | 0 | 背景 下外邊距 默認是 0px 裝飾圖需要空間可以增減 |
| 3 | layout-margin-left | 30px | 背景 左外邊距 默認是 30px 裝飾圖需要空間可以增減 |
| 4 | layout-margin-right | 60px | 背景 右外邊距 默認是 30px 裝飾圖需要空間可以增減 |


* 紅色框內的空間

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | layout-padding-top | 30px | 背景 上內邊距 默認是 30px 裝飾圖需要空間可以增減 |
| 2 | layout-padding-bottom | 10px | 背景 下內邊距 默認是 10px 裝飾圖需要空間可以增減 |
| 3 | layout-padding-left | 16px | 背景 左內邊距 默認是 16px 裝飾圖需要空間可以增減 |
| 4 | layout-padding-right | 50px | 背景 右內邊距 默認是 50px 裝飾圖需要空間可以增減 |
:::success
右內邊距 需要比較多的空間，是為了擠入狐狸那張圖
:::


* 绿色框內的空間，红色则是背景框的界线

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | layout-image-url | url() | 圖 資源鏈接 |
| 2 | layout-image-width | 150px | 圖 寬度 px |
| 3 | layout-image-height| 150px | 圖 長度 px |
| 4 | layout-image-top | 0 | 圖 上 定位 px 默認是0 如果需要空間請調整 layout-padding-top|
| 5 | layout-image-bottom | auto | 圖 下 定位 px 默認是auto |
| 6 | layout-image-left| auto | 圖 左 定位 px 默認是auto |
| 7 | layout-image-right| -50px | 圖 右 定位 默認是 -50px 裝飾圖需要空間可以增減 |
| 8 | layout-image-z-index| 0 | 图z轴高度 值为 0-99 0最底层 1,2,3 为上层次 类似图层结构 |

:::success
4-7 是一组类似 XY轴定位，X轴是left&right各取一个属性使用，想靠右操作就用right。
Y是top&bottom各取一个属性使用，想靠上就用top操作。
其余不动的属性就设置auto，不可放0，0有值量表示固定定位。
:::

:::success
z-index 表示图层顺序，0 是底层，也可以 -1 或 1,2,3来表示顺序
:::

## 主題 大標題

>本主題大標題參數[color=#3b75c6]
---

    --title-font-family: MiSans;
    --title-font-size: 1em;
    --title-text-align: center;
    --title-text-color: rgb(0,0,0);
    --title-text-shadow: 0 0 .05em rgba(0, 0, 0, .75);
    --title-padding-top: 4px;
    --title-padding-bottom: 4px;
    --title-margin-top: 0px;
    --title-margin-bottom: 18px;
    --title-margin-left: auto;
    --title-margin-right: auto;


* 橙色框內的範圍

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | title-font-family | MiSans | 字體樣式 需要將字體安裝到系統 |
| 2 | title-font-size | 1em | 字體 大小 單位 em |
| 3 | title-text-align | center | 字體對齊（left，center，right） |
| 4 | title-text-color | rgb(0,0,0) | 字體 顏色 rgb hex |
| 5 | title-text-shadow | 0 0 .05em rgba(0, 0, 0, .75) | 字體影子 |

:::warning
title-text-shadow <br>
0 0 .05em rgba(0, 0, 0, .75) <br>
水平偏移 垂直偏移 模糊半徑 rgb+透明度（0-1）
:::

:::info
字體安裝 點擊ttf 安裝即可

:::

* 橙色框內的（padding）| 框外（margin）

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | title-padding-top | 4px | 標題 上 內邊距 px|
| 2 | title-padding-bottom | 4px | 標題 下 內邊距 px|
| 3 | title-margin-top | 0px | 標題 上 外邊距 px |
| 4 | title-margin-bottom | 18px | 標題 下 外邊距 px |
| 5 | title-margin-left | auto | 標題 左 外邊距 px 默認auto 需要偏移才添加參數 |
| 6 | title-margin-right | auto | 標題 右 外邊距 px 默認auto 需要偏移才添加參數 |

---

## 主題 副標題

>本主題副標題參數[color=#3b75c6]
---

    --subtitle-font-family: MiSans;
    --subtitle-font-size: 0.7em;
    --subtitle-text-color: #7B4B55;
    --subtitle-top: -26px;
    --subtitle-margin-left: auto;
    --subtitle-margin-right: auto;
    --subtitle-z-index: 0;


* 橙色框內的（padding）| 框外（margin）

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | subtitle-font-family | MiSans | 字體樣式 需要將字體安裝到系統 |
| 2 | subtitle-font-size | 0.7em |字體 大小 單位 em |
| 3 | subtitle-text-color | #7B4B55 | 字體 顏色 rgb hex |
| 4 | subtitle-top | 18px | 副標題 上 定位 px |
| 5 | subtitle-margin-left | auto | 標題 左 外邊距 px 默認auto 需要偏移才添加參數 |
| 6 | subtitle-margin-right | auto | 標題 右 外邊距 px 默認auto 需要偏移才添加參數 |
| 7 | subtitle-z-index | auto | 图z轴高度 值为 0-99 0最底层 1,2,3 为上层次 类似图层结构，原本參數可疊加在進度條上，若放置在進度條上，可以調整為1或2顯示在最上層 |

---

## 主題 進度條背景

>本主題 進度條背景[color=#3b75c6]
---

    --bar-height: 45px;
    --bar-border-radius: 15px;
    --bar-background-color: #E0CCD0;
    --bar-border-size: 3px;
    --bar-border-color: #FFFFFF;
    --bar-box-shadow: 0 0 .1em #DD3053;
    --bar-margin-top: 10px;


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | bar-height | 45px | 進度條厚度 px |
| 2 | bar-border-radius | 15px |進度條 背景 邊角弧度 px |
| 3 | bar-background-color | #E0CCD0 |進度條 背景 顏色 rgb hex |
| 4 | bar-border-size | 3px | 進度條 邊框大小 px |
| 5 | bar-border-color | #FFFFFF | 進度條 邊框 顏色 rgb hex |
| 6 | bar-box-shadow | 0 0 .1em #DD3053 | 進度條 影子 |
| 7 | bar-margin-top | 10px | 進度條 上 外邊距 px |

---

## 主題 進度條 設定

>本主題 進度條進度條[color=#3b75c6]
---

    --bar-progress-border-radius: 15px;
    --bar-progress-background: #73a9df;
    --bar-progress-gradient-degree: -45deg;
    --bar-progress-gradient-color: rgba(255, 255, 255, 0.2);
    --bar-progress-z-index: 1;
    --bar-progress-background-size: 50px 50px;
    --bar-progress-animation-speed: 6s;


| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | bar-progress-border-radius | 15px | 進度條 邊角弧度 px |
| 2 | bar-progress-background | #73a9df |進度條 顏色 rgb hex |
| 3 | bar-progress-gradient-degree | -45deg |進度條 漸變斜條 角度 deg |
| 4 | bar-progress-gradient-color | rgba(255, 255, 255, 0.2) | 進度條 漸變斜 顏色 rgb hex |
| 5 | bar-progress-z-index | 1 | 進度條 圖層順序 需高於 進度條背景 1-99 |
| 6 | bar-progress-background-size | 50px 50px | 進度條 漸變大小 大小 |
| 7 | bar-progress-animation-speed | 6s | 進度條 動畫進度 速度 |

*進度條裝飾物

    --bar-progress-image: url('http://localhost:11180/templates/custom/en_5anniversary/images/listener2.gif');
    --bar-progress-image-width: 100px;
    --bar-progress-image-height: 100px;
    --bar-progress-image-top: -35px;
    --bar-progress-image-right: -50px;
    --bar-progress-image-z-index: 1;


*綠色框內

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | bar-progress-image | url() | 裝飾物 資源 鏈接 |
| 2 | bar-progress-image-width | 100px |裝飾物 寬度 px |
| 3 | bar-progress-image-height | 100px |裝飾物 高度 px |
| 4 | bar-progress-image-top | -35px | 圖片 上 定位 鎖定距離，當進度移動會跟隨 |
| 5 | bar-progress-image-right | 1 | 圖片 右 定位 鎖定距離，當進度移動會跟隨|
| 6 | bar-progress-image-z-index | 1 | 圖層順序 需高於進度條 |

---

## 主題 底部 數字顯示條

>本主題 數字顯示條[color=#3b75c6]
---

    --footer-text-shadow: 0 0 .05em rgba(0, 0, 0, .75);
    --footer-margin-top: 10px;
    --footer-left-position: 16px;
    --footer-right-position: 30px;
    --footer-left-z-index: 0;
    --footer-right-z-index: 2;
    --footer-text-color: gray;
    --footer-show: flex;

*紅色框內

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | footer-text-shadow | 0 0 .05em rgba(0, 0, 0, .75) | 數字 影子 |
| 2 | footer-margin-top | 10px |數字 上 外邊距 與 進度條的距離 |
| 3 | footer-left-position | 16px | 左邊 數字 定位 - 向外 + 向內 |
| 4 | footer-right-position | -35px | 右邊 數字 定位 - 向外 + 向內 |
| 5 | footer-left-z-index | 0 | 左 字體圖層順序 要是被遮擋可調整 |
| 6 | footer-right-z-index | 2 | 右 字體圖層順序 要是被遮擋可調整 |
| 7 | footer-text-color | gray | 字體 顏色 rgb hex |
| 8 | footer-show | flex | 是否顯示 數字 flex：顯示，none：隱藏 |

---

* 數字 外觀設定

    --footer-target-background-color: transparent;
    
    --footer-target-padding: 0px 0px 0px 0px;
    --footer-target-text-align: initial;
    --footer-target-text-box-min-width: auto;
    --footer-target-border: none;
    --footer-target-border-radius: none;


*紫色框內

| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | footer-target-background-color | transparent | 背景顏色， transparent 則無需顏色 |
| 2 | footer-target-padding | 0px 0px 0px 0px |如果需要背景則需要設置內邊框，參數順序是：上右下左 |
| 3 | footer-target-text-align | initial | 字對齊，參數為：initial（初始無），left，center，right |
| 4 | footer-target-text-box-min-width | auto | 無邊框需設定為 auto，顯示邊框需要設定最小80px |
| 5 | footer-target-border | none | 若果需要邊框需切換 成 px solid color_code; |
| 6 | footer-target-border-radius | none | 若需要 邊框弧度可自定義設定 |

---

## 主題參考線

>為了方便調整參數就調出參考線[color=#3b75c6]
---

:::warning
複製以下需要的段落代碼貼到css裡就能生效，在調試完畢後請記得移除該段代碼。
:::

/* 大框參考線 */
.layout-standard{
    border: 1px solid red;
}

/* 大框 裝飾圖 參考線 */
.layout-standard::before{
    border: 1px solid green;
}

/* 大標題 參考線 */
.layout-standard .title {
    border: 1px solid orange;
}

/* 副標題 參考線 */
.layout-standard .bar .progress{
    border: 1px solid blue;
}

/* 進度條 裝飾物 */
.layout-standard .bar .bar-progress::after{
    border: 1px solid green;
}


/* 底部 參考線 */
.layout-standard .footer{
    border: 1px solid yellow;
}

/* 底部 數字 參考線 */
.layout-standard .footer .min-amount,
.layout-standard .footer .target-amount{
    border: 1px solid violet;
}