Color 颜色

颜色体系

本框架的颜色体系主要有三个子类，分别是主色系，状态色系，正文色系（包含简介色系和忽略色系）。

三类色值均有对应的色值变量，例如在css文件中写上color:var(--color-primary)表示使用主色。

三类色值除了自身的颜色，还包含该颜色的周边颜色，例如var(--color-primary-bg)表示主色的浅色背景色。

框架颜色采用HSLA的色值模式。HSLA其中的H表示色轮度数（取值范围0~360），S表示饱和度（取值范围0%~100%），L为亮度（取值范围0%~100%），A为透明度（取值范围0~1），目前框架默认主色值为HSLA(210,100%,55%,1)。

var(--color-primary)
var(--color-text)
var(--color-ignore)
var(--color-success)
var(--color-error)
var(--color-warning)
var(--color-info)
var(--color-question)

                            <ul class="ax-grid color-var">
                                <li style="background-color: var(--color-primary);color:var(--color-text-ct)">var(--color-primary)</li>
                                <li style="background-color: var(--color-text);color:var(--color-text-ct)">var(--color-text)</li>
                                <li style="background-color: var(--color-ignore);">var(--color-ignore)</li>
                                <li style="background-color: var(--color-success);color:var(--color-text-ct)">var(--color-success)</li>
                                <li style="background-color: var(--color-error);color:var(--color-text-ct)">var(--color-error)</li>
                                <li style="background-color: var(--color-warning);">var(--color-warning)</li>
                                <li style="background-color: var(--color-info);color:var(--color-text-ct)">var(--color-info)</li>
                                <li style="background-color: var(--color-question);">var(--color-question)</li>
                            </ul>

颜色变量

本框架在css文件的:root中定义了颜色变量。用户可以根据项目需要使用这些变量以保持网站主题风格统一。详细说明如下：

主色系

--h-primary：主色色轮值
--s-primary：主色饱和度
--l-primary：主色亮度
--a-primary：主色透明度
--color-primary：主色
--color-primary-bg：主色浅色背景色（bg:background）
--color-primary-bd：主色浅色边框色（bd:border）
--color-primary-fc：主色焦点色（fc:focus）
--color-primary-ht：主色半调色（ht:halftone）
--color-primary-lt：主色变浅色（lt:lighten）
--color-primary-dp：主色加深色（dp:deepen）
--color-primary-aj：主色相似色，色轮+50（aj:adjacent）
--color-primary-gy：主色中灰色（gr:grey）
--color-primary-dk：主色深灰色（dk:dark）
--color-primary-sg：主色深色但是较高饱和度，类似太阳镜（sg:sunglasses）
--color-primary-ct：主色对比色，色轮+180（ct:contrast）
--color-primary-tp：主色透明色，带透明值0（tp:transparent）
--color-primary-ac：主色亚克力色，带透明值0.08（ac:acrylic）
--color-primary-sd：主色阴影色，带透明值0.2（sd:shadow）
--color-primary-tl：主色半透明色，带透明值0.6（tl:translucent）
--color-primary-fg：主色毛玻璃色，带透明值0.8（fg:frosted glass）

正文色系

--h-text：正文色色轮值
--s-text：正文色饱和度
--l-text：正文色亮度
--a-text：正文色透明度
--color-text：正文色
--color-text-bg：正文色浅色背景色
--color-text-bd：正文色浅色边框色
--color-text-fc：正文色焦点色
--color-text-ht：正文色半调色
--color-text-lt：正文色变浅色
--color-text-dp：正文色加深色
--color-text-aj：正文色相似色
--color-text-ct：正文色对比色
--color-text-tp：正文色全透明色
--color-text-ac：正文色亚克力色
--color-text-sd：正文色阴影色
--color-text-tl：正文色半透明色
--color-text-fg：正文色毛玻璃色

简介色系（色轮值同正文色轮值）

--color-brief：简介色，同--color-text-aj
--color-brief-bg：简介色浅色背景色，同--color-text-bg
--color-brief-bd：简介色浅色边框色，同--color-brief
--color-brief-sd：简介色阴影色，同--color-text-sd

忽略色系（色轮值同正文色轮值）

--color-ignore：忽略色
--color-ignore-bg：忽略色浅色背景色，比--color-text-bg略深
--color-ignore-bd：忽略色浅色边框色，同--color-ignore
--color-ignore-sd：忽略色阴影色，比--color-text-sd略浅

状态色系（success、error、warning、info、question）

--h-warning：状态色色轮值
--s-warning：状态色饱和度
--l-warning：状态色亮度
--a-warning：状态色透明度
--color-warning：状态色
--color-warning-bg：状态色浅色背景色
--color-warning-bd：状态色浅色边框色
--color-warning-fc：状态色焦点色
--color-warning-ht：状态色半调色
--color-warning-lt：状态色变浅色
--color-warning-dp：状态色加深色
--color-warning-ct：状态色对比色
--color-warning-aj：状态色相似色
--color-warning-tp：状态色全透明色
--color-warning-ac：状态色亚克力色
--color-warning-sd：状态色阴影色
--color-warning-tl：状态色半透明色
--color-warning-fg：状态色毛玻璃色

主色系变量（点击复制）

var(--color-primary)
var(--color-primary-bg)
var(--color-primary-bd)
var(--color-primary-fc)
var(--color-primary-ht)
var(--color-primary-lt)
var(--color-primary-dp)
var(--color-primary-aj)
var(--color-primary-gy)
var(--color-primary-dk)
var(--color-primary-sg)
var(--color-primary-ct)
var(--color-primary-tp)
var(--color-primary-ac)
var(--color-primary-sd)
var(--color-primary-tl)
var(--color-primary-fg)

正文色系变量（点击复制）

var(--color-text)
var(--color-text-bg)
var(--color-text-bd)
var(--color-text-fc)
var(--color-text-ht)
var(--color-text-lt)
var(--color-text-dp)
var(--color-text-aj)
var(--color-text-ct)
var(--color-text-tp)
var(--color-text-ac)
var(--color-text-sd)
var(--color-text-tl)
var(--color-text-fg)

简介色系变量（点击复制）

var(--color-brief)
var(--color-brief-bg)
var(--color-brief-bd)
var(--color-brief-sd)

忽略色系变量（点击复制）

var(--color-ignore)
var(--color-ignore-bg)
var(--color-ignore-bd)
var(--color-ignore-sd)

success变量（点击复制）

var(--color-success)
var(--color-success-bg)
var(--color-success-bd)
var(--color-success-fc)
var(--color-success-ht)
var(--color-success-lt)
var(--color-success-dp)
var(--color-success-aj)
var(--color-success-tp)
var(--color-success-ac)
var(--color-success-sd)
var(--color-success-tl)
var(--color-success-fg)

error变量（点击复制）

var(--color-error)
var(--color-error-bg)
var(--color-error-bd)
var(--color-error-fc)
var(--color-error-ht)
var(--color-error-lt)
var(--color-error-dp)
var(--color-error-aj)
var(--color-error-tp)
var(--color-error-ac)
var(--color-error-sd)
var(--color-error-tl)
var(--color-error-fg)

info变量（点击复制）

var(--color-info)
var(--color-info-bg)
var(--color-info-bd)
var(--color-info-fc)
var(--color-info-ht)
var(--color-info-lt)
var(--color-info-dp)
var(--color-info-aj)
var(--color-info-tp)
var(--color-info-ac)
var(--color-info-sd)
var(--color-info-tl)
var(--color-info-fg)

warning变量（点击复制）

var(--color-warning)
var(--color-warning-bg)
var(--color-warning-bd)
var(--color-warning-fc)
var(--color-warning-ht)
var(--color-warning-lt)
var(--color-warning-dp)
var(--color-warning-aj)
var(--color-warning-tp)
var(--color-warning-ac)
var(--color-warning-sd)
var(--color-warning-tl)
var(--color-warning-fg)

question变量（点击复制）

var(--color-question)
var(--color-question-bg)
var(--color-question-bd)
var(--color-question-fc)
var(--color-question-ht)
var(--color-question-lt)
var(--color-question-dp)
var(--color-question-aj)
var(--color-question-tp)
var(--color-question-ac)
var(--color-question-sd)
var(--color-question-tl)
var(--color-question-fg)

                                <h5>主色系变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-primary);color:var(--color-text-ct)">var(--color-primary)</li>
                                    <li style="background-color: var(--color-primary-bg);">var(--color-primary-bg)</li>
                                    <li style="background-color: var(--color-primary-bd);">var(--color-primary-bd)</li>
                                    <li style="background-color: var(--color-primary-fc);">var(--color-primary-fc)</li>
                                    <li style="background-color: var(--color-primary-ht);">var(--color-primary-ht)</li>
                                    <li style="background-color: var(--color-primary-lt);color:var(--color-text-ct)">var(--color-primary-lt)</li>
                                    <li style="background-color: var(--color-primary-dp);color:var(--color-text-ct)">var(--color-primary-dp)</li>
                                    <li style="background-color: var(--color-primary-aj);color:var(--color-text-ct)">var(--color-primary-aj)</li>
                                    <li style="background-color: var(--color-primary-gy);">var(--color-primary-gy)</li>
                                    <li style="background-color: var(--color-primary-dk);color:var(--color-text-ct)">var(--color-primary-dk)</li>
                                    <li style="background-color: var(--color-primary-sg);color:var(--color-text-ct)">var(--color-primary-sg)</li>
                                    <li style="background-color: var(--color-primary-ct);color:var(--color-text-ct)">var(--color-primary-ct)</li>
                                    <li style="background-color: var(--color-primary-tp);">var(--color-primary-tp)</li>
                                    <li style="background-color: var(--color-primary-ac);">var(--color-primary-ac)</li>
                                    <li style="background-color: var(--color-primary-sd);">var(--color-primary-sd)</li>
                                    <li style="background-color: var(--color-primary-tl);color:var(--color-text-ct)">var(--color-primary-tl)</li>
                                    <li style="background-color: var(--color-primary-fg);color:var(--color-text-ct)">var(--color-primary-fg)</li>
                                </ul>
                                <div class="ax-break"></div>
                                <h5>正文色系变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-text);color:var(--color-text-ct)">var(--color-text)</li>
                                    <li style="background-color: var(--color-text-bg);">var(--color-text-bg)</li>
                                    <li style="background-color: var(--color-text-bd);">var(--color-text-bd)</li>
                                    <li style="background-color: var(--color-text-fc);">var(--color-text-fc)</li>
                                    <li style="background-color: var(--color-text-ht);">var(--color-text-ht)</li>
                                    <li style="background-color: var(--color-text-lt);color:var(--color-text-ct)">var(--color-text-lt)</li>
                                    <li style="background-color: var(--color-text-dp);color:var(--color-text-ct)">var(--color-text-dp)</li>
                                    <li style="background-color: var(--color-text-aj);color:var(--color-text-ct)">var(--color-text-aj)</li>
                                    <li style="background-color: var(--color-text-ct);">var(--color-text-ct)</li>
                                    <li style="background-color: var(--color-text-tp);">var(--color-text-tp)</li>
                                    <li style="background-color: var(--color-text-ac);">var(--color-text-ac)</li>
                                    <li style="background-color: var(--color-text-sd);">var(--color-text-sd)</li>
                                    <li style="background-color: var(--color-text-tl);color:var(--color-text-ct)">var(--color-text-tl)</li>
                                    <li style="background-color: var(--color-text-fg);color:var(--color-text-ct)">var(--color-text-fg)</li>
                                </ul>
                                <div class="ax-break"></div>
                                <h5>简介色系变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-brief);">var(--color-brief)</li>
                                    <li style="background-color: var(--color-brief-bg);">var(--color-brief-bg)</li>
                                    <li style="background-color: var(--color-brief-bd);">var(--color-brief-bd)</li>
                                    <li style="background-color: var(--color-brief-sd);">var(--color-brief-sd)</li>
                                </ul>
                                <div class="ax-break"></div>
                                <h5>忽略色系变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-ignore);">var(--color-ignore)</li>
                                    <li style="background-color: var(--color-ignore-bg);">var(--color-ignore-bg)</li>
                                    <li style="background-color: var(--color-ignore-bd);">var(--color-ignore-bd)</li>
                                    <li style="background-color: var(--color-ignore-sd);">var(--color-ignore-sd)</li>
                                </ul>
                                <div class="ax-break"></div>
                                <h5>success变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-success);color:var(--color-text-ct)">var(--color-success)</li>
                                    <li style="background-color: var(--color-success-bg);">var(--color-success-bg)</li>
                                    <li style="background-color: var(--color-success-bd);">var(--color-success-bd)</li>
                                    <li style="background-color: var(--color-success-fc);">var(--color-success-fc)</li>
                                    <li style="background-color: var(--color-success-ht);">var(--color-success-ht)</li>
                                    <li style="background-color: var(--color-success-lt);color:var(--color-text-ct)">var(--color-success-lt)</li>
                                    <li style="background-color: var(--color-success-dp);color:var(--color-text-ct)">var(--color-success-dp)</li>
                                    <li style="background-color: var(--color-success-aj);">var(--color-success-aj)</li>
                                    <li style="background-color: var(--color-success-tp);">var(--color-success-tp)</li>
                                    <li style="background-color: var(--color-success-ac);">var(--color-success-ac)</li>
                                    <li style="background-color: var(--color-success-sd);">var(--color-success-sd)</li>
                                    <li style="background-color: var(--color-success-tl);color:var(--color-text-ct)">var(--color-success-tl)</li>
                                    <li style="background-color: var(--color-success-fg);color:var(--color-text-ct)">var(--color-success-fg)</li>
                                </ul>
                                <div class="ax-break"></div>
                                <h5>error变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-error);color:var(--color-text-ct)">var(--color-error)</li>
                                    <li style="background-color: var(--color-error-bg);">var(--color-error-bg)</li>
                                    <li style="background-color: var(--color-error-bd);">var(--color-error-bd)</li>
                                    <li style="background-color: var(--color-error-fc);">var(--color-error-fc)</li>
                                    <li style="background-color: var(--color-error-ht);">var(--color-error-ht)</li>
                                    <li style="background-color: var(--color-error-lt);color:var(--color-text-ct)">var(--color-error-lt)</li>
                                    <li style="background-color: var(--color-error-dp);color:var(--color-text-ct)">var(--color-error-dp)</li>
                                    <li style="background-color: var(--color-error-aj);">var(--color-error-aj)</li>
                                    <li style="background-color: var(--color-error-tp);">var(--color-error-tp)</li>
                                    <li style="background-color: var(--color-error-ac);">var(--color-error-ac)</li>
                                    <li style="background-color: var(--color-error-sd);">var(--color-error-sd)</li>
                                    <li style="background-color: var(--color-error-tl);color:var(--color-text-ct)">var(--color-error-tl)</li>
                                    <li style="background-color: var(--color-error-fg);color:var(--color-text-ct)">var(--color-error-fg)</li>
                                </ul>
                                <div class="ax-break"></div>
                                <h5>info变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-info);color:var(--color-text-ct)">var(--color-info)</li>
                                    <li style="background-color: var(--color-info-bg);">var(--color-info-bg)</li>
                                    <li style="background-color: var(--color-info-bd);">var(--color-info-bd)</li>
                                    <li style="background-color: var(--color-info-fc);">var(--color-info-fc)</li>
                                    <li style="background-color: var(--color-info-ht);">var(--color-info-ht)</li>
                                    <li style="background-color: var(--color-info-lt);color:var(--color-text-ct)">var(--color-info-lt)</li>
                                    <li style="background-color: var(--color-info-dp);color:var(--color-text-ct)">var(--color-info-dp)</li>
                                    <li style="background-color: var(--color-info-aj);">var(--color-info-aj)</li>
                                    <li style="background-color: var(--color-info-tp);">var(--color-info-tp)</li>
                                    <li style="background-color: var(--color-info-ac);">var(--color-info-ac)</li>
                                    <li style="background-color: var(--color-info-sd);">var(--color-info-sd)</li>
                                    <li style="background-color: var(--color-info-tl);color:var(--color-text-ct)">var(--color-info-tl)</li>
                                    <li style="background-color: var(--color-info-fg);color:var(--color-text-ct)">var(--color-info-fg)</li>
                                </ul>
                                <div class="ax-break"></div>
                                <h5>warning变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-warning);color:var(--color-text-ct)">var(--color-warning)</li>
                                    <li style="background-color: var(--color-warning-bg);">var(--color-warning-bg)</li>
                                    <li style="background-color: var(--color-warning-bd);">var(--color-warning-bd)</li>
                                    <li style="background-color: var(--color-warning-fc);">var(--color-warning-fc)</li>
                                    <li style="background-color: var(--color-warning-ht);">var(--color-warning-ht)</li>
                                    <li style="background-color: var(--color-warning-lt);color:var(--color-text-ct)">var(--color-warning-lt)</li>
                                    <li style="background-color: var(--color-warning-dp);color:var(--color-text-ct)">var(--color-warning-dp)</li>
                                    <li style="background-color: var(--color-warning-aj);">var(--color-warning-aj)</li>
                                    <li style="background-color: var(--color-warning-tp);">var(--color-warning-tp)</li>
                                    <li style="background-color: var(--color-warning-ac);">var(--color-warning-ac)</li>
                                    <li style="background-color: var(--color-warning-sd);">var(--color-warning-sd)</li>
                                    <li style="background-color: var(--color-warning-tl);">var(--color-warning-tl)</li>
                                    <li style="background-color: var(--color-warning-fg);">var(--color-warning-fg)</li>
                                </ul>
                                <div class="ax-break"></div>
                                <h5>question变量（点击复制）</h5>
                                <ul class="ax-grid color-var">
                                    <li style="background-color: var(--color-question);color:var(--color-text-ct)">var(--color-question)</li>
                                    <li style="background-color: var(--color-question-bg);">var(--color-question-bg)</li>
                                    <li style="background-color: var(--color-question-bd);">var(--color-question-bd)</li>
                                    <li style="background-color: var(--color-question-fc);">var(--color-question-fc)</li>
                                    <li style="background-color: var(--color-question-ht);">var(--color-question-ht)</li>
                                    <li style="background-color: var(--color-question-lt);color:var(--color-text-ct)">var(--color-question-lt)</li>
                                    <li style="background-color: var(--color-question-dp);color:var(--color-text-ct)">var(--color-question-dp)</li>
                                    <li style="background-color: var(--color-question-aj);">var(--color-question-aj)</li>
                                    <li style="background-color: var(--color-question-tp);">var(--color-question-tp)</li>
                                    <li style="background-color: var(--color-question-ac);">var(--color-question-ac)</li>
                                    <li style="background-color: var(--color-question-sd);">var(--color-question-sd)</li>
                                    <li style="background-color: var(--color-question-tl);color:var(--color-text-ct)">var(--color-question-tl)</li>
                                    <li style="background-color: var(--color-question-fg);color:var(--color-text-ct)">var(--color-question-fg)</li>
                                </ul>

常用色

本框架颜色一共定义了1个主色，5个状态色和3个文本色，详细说明和举例如下：

主色：ax-color-primary
状态色：ax-color-success，ax-color-error，ax-color-warning，ax-color-info，ax-color-question
文本色：ax-color-text正文色，ax-color-brief简介文本色，ax-color-ignore可忽略色

如果需要使用更多颜色，可使用颜色变量来自定义class类，例如color:var(--color-primary-dk)将定义偏蓝的深灰色。

ax-color-primary主色或基色

ax-color-success操作成功

ax-color-error危险或报错

ax-color-warning注意或提醒

ax-color-info消息或通知

ax-color-question疑问或提问

ax-color-text正文或标题

ax-color-brief简介或引用

ax-color-ignore忽略或装饰

                                    <p class="ax-color-primary">ax-color-primary主色或基色</p>
                                    <p class="ax-color-success">ax-color-success操作成功</p>
                                    <p class="ax-color-error">ax-color-error危险或报错</p>
                                    <p class="ax-color-warning">ax-color-warning注意或提醒</p>
                                    <p class="ax-color-info">ax-color-info消息或通知</p>
                                    <p class="ax-color-question">ax-color-question疑问或提问</p>
                                    <p class="ax-color-text">ax-color-text正文或标题</p>
                                    <p class="ax-color-brief">ax-color-brief简介或引用</p>
                                    <p class="ax-color-ignore">ax-color-ignore忽略或装饰</p>

背景色

与文字颜色对应有三组背景色：主色、状态色和灰度色，其中主色和状态有浅色背景色（带lit关键字）。

ax-bg-primary

ax-bglit-primary

ax-bg-success

ax-bglit-success

ax-bg-error

ax-bglit-error

ax-bg-warning

ax-bglit-warning

ax-bg-info

ax-bglit-info

ax-bg-question

ax-bglit-question

ax-bg-text

ax-bg-brief

ax-bg-ignore

                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-col-8">
                                            <p class="ax-bg-primary" style="padding-left: 14px;">ax-bg-primary</p>
                                            <p class="ax-bglit-primary" style="padding-left: 14px;">ax-bglit-primary</p>
                                        </div>
                                        <span class="ax-gutter"></span>
                                        <div class="ax-col ax-col-8">
                                            <p class="ax-bg-success" style="padding-left: 14px;">ax-bg-success</p>
                                            <p class="ax-bglit-success" style="padding-left: 14px;">ax-bglit-success</p>
                                        </div>
                                        <span class="ax-gutter"></span>
                                        <div class="ax-col ax-col-8">
                                            <p class="ax-bg-error" style="padding-left: 14px;">ax-bg-error</p>
                                            <p class="ax-bglit-error" style="padding-left: 14px;">ax-bglit-error</p>
                                        </div>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-col-8">
                                            <p class="ax-bg-warning" style="padding-left: 14px;">ax-bg-warning</p>
                                            <p class="ax-bglit-warning" style="padding-left: 14px;">ax-bglit-warning</p>
                                        </div>
                                        <span class="ax-gutter"></span>
                                        <div class="ax-col ax-col-8">
                                            <p class="ax-bg-info" style="padding-left: 14px;">ax-bg-info</p>
                                            <p class="ax-bglit-info" style="padding-left: 14px;">ax-bglit-info</p>
                                        </div>
                                        <span class="ax-gutter"></span>
                                        <div class="ax-col ax-col-8">
                                            <p class="ax-bg-question" style="padding-left: 14px;">ax-bg-question</p>
                                            <p class="ax-bglit-question" style="padding-left: 14px;">ax-bglit-question</p>
                                        </div>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-col-8">
                                            <p class="ax-bg-text" style="padding-left: 14px;">ax-bg-text</p>
                                            <p class="ax-bg-brief" style="padding-left: 14px;">ax-bg-brief</p>
                                            <p class="ax-bg-ignore" style="padding-left: 14px;">ax-bg-ignore</p>
                                        </div>
                                    </div>

颜色组合对比

本框架对常用的组合颜色已经定义好了，包括原色、加深色、注释色、边框色和背景色。你将在ax-alert、ax-panel等演示页面见到实际应用效果。

dp即deepen，在原色基础上进行加深处理，通常在有bg色区域使用
bg即background，原色为基础的最浅色，通常作为背景色使用
bd即border，在bg色基础上加深处理，通常作为边框色
ht即halftone，在原色基础上的半调色，饱和度和亮度均低于原色，通常用作注释或提示文字颜色

除此外他们共同还有fc（焦点色）、aj（相似色）和ct（对比色）后缀；而primary主色，还有dk（深灰色）、gy（中灰色）和sg（高饱和度墨色）后缀

primary

dp加深

dk深灰

ht注释

bd边框

bg背景

success

dp加深

ht注释

bd边框

bg背景

question

dp加深

ht注释

bd边框

bg背景

body

dp加深

ht注释

bd边框

bg背景

error

dp加深

ht注释

bd边框

bg背景

warning

dp加深

ht注释

bd边框

bg背景

info

dp加深

ht注释

bd边框

bg背景

颜色应用

框架所使用的颜色样式以及颜色变量是从实际需求中产生的，以下列举一些颜色应用。

应用一：使用主色和相似色（var(--color-primary)和var(--color-primary-aj)）可以创建有格调的渐变按钮。

默认渐变按钮

应用二：使用基色（hsl(210, 100%,55%)）渐变色可以风格统一的图表。

应用三：使用加深色（var(--color-warning-dp)）、边框色（var(--color-warning-bd)）和背景色（var(--color-warning-bg)）创建提示。

伟大的中国

HTML JS

                                            <a href="###" class="ax-btn ax-primary ax-gradient">默认渐变按钮</a>
                                            <div style="height:300px;" id="bar"></div>
                                            <div class="ax-alert ax-primary">伟大的中国<i close></i></div>

                                            let myChart = echarts.init(document.getElementById("bar"));
                                            let option = {
                                                xAxis: {
                                                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                                                },
                                                yAxis: {},
                                                series: [{
                                                    name: '销量',
                                                    type: 'bar',
                                                    data: [5, 20, 36, 10, 10, 20],
                                                    itemStyle: {
                                                        normal: {
                                                            color: function (params) {
                                                                let colorList = ['hsl(210, 100%,45%)', 'hsl(210, 100%,55%)', 'hsl(210, 100%,65%)', 'hsl(210, 100%,75%)', 'hsl(210, 100%,85%)', 'hsl(210, 100%,95%)'];
                                                                return colorList[params.dataIndex]
                                                            }
                                                        }
                                                    }
                                                }]
                                            };
                                            myChart.setOption(option);

更换主题

因为已知了色值变量，所以理论上可以任意组合框架主题风格。

因为状态色为所有网站项目的常规颜色，所以不需要大改，用户可以自行调整状态色的色轮值即可，更换主题风格主要是修改primary相关颜色。

目前国内主流商业项目基本上以一主色和一辅色构成主要的主题风格，另外再通用的网页风格配色，三角配色是常用配色方法，所以在primary的相关颜色变量中当中已经照顾到主色+辅色，和三角色搭配。

使用框架内置的axTheme.set方法可很容易的跟换网站和项目主题风格，该函数参数如下：

value：传入色值，支持格式如下：

1、#fff或#ffffff：16进制色值字符串，可以是三位或六位值，仅修改primary色系
2、rgb或rgba：字符串，例如rgba(255,0,0,.8)，仅修改primary色系
3、hsl或hsla：字符串，例如hsla(50,50%,20%,.8)，仅修改primary色系
4、hsl或hsla值数组：例如[50,50,20,.8]或[50,'50%','20%',.8]，仅修改primary色系
5、色值对象，格式如{primary:'',error:'',text:''}，每个属性取值同1/2/3/4，可修改所有色系，包括primary、error、success、info、warning、question和text

name：如果需要保存当前主题，请唯一命名，保存后的主题可通过axLocalStorage.get()方法取得

axTheme.get()方法可获得当前主题色值；axTheme.reset()可重置主题色。

SO A 访问256

获得主题色值还原

HTML JS

                                            <input type="color" placeholder="请输入..." class="ax-input" id="colorInput">
                                            <button class="ax-btn ax-primary">北京市</button>
                                            <button class="ax-btn">广州市</button>
                                            <button class="ax-btn ax-primary ax-line">上海市</button>
                                            <button class="ax-btn ax-primary ax-disabled">深圳市</button>
                                            <button class="ax-btn ax-primary ax-gradient">呼和浩特市</button>
                                            <button class="ax-btn ax-primary ax-disabled ax-line">大连市</button>
                                            <a href="###" class="ax-avatar ax-sm ax-bg-primary">SO</a>
                                            <a href="###" class="ax-avatar ax-sm ax-bglit-primary">A</a>
                                            <span class="ax-buoy ax-primary"><i>访问</i><i>256</i></span>
                                            <div class="ax-break"></div>
                                            <a href="###" class="ax-btn" id="getBtn">获得主题色值</a>
                                            <a href="###" class="ax-btn" id="resetBtn">还原</a>

                                            let colorInput = document.querySelector('#colorInput'),
                                                getBtn = document.querySelector('#getBtn'),
                                                    resetBtn = document.querySelector('#resetBtn'),
                                                    storage = axLocalStorage.get('demo');
                                                //页面加载使用保存的主题
                                                if (!axIsEmpty(storage)) {
                                                    axTheme.set(storage);
                                                }
                                                //点击更换主题
                                                colorInput.onchange = (e) => {
                                                    axTheme.set(e.target.value, 'demo');
                                                }
                                                //获取
                                                getBtn.onclick = (e) => {
                                                    console.log(axTheme.get());
                                                }
                                                //还原
                                                resetBtn.onclick = (e) => {
                                                    axTheme.reset();
                                                    //删除demo的storage
                                                    axLocalStorage.set('demo','');
                                                }