查看“模块:Colorhime/doc”的源代码

{{FromOther/CN|site=萌娘百科|originURL=https://zh.moegirl.org.cn/{{FULLPAGENAMEE}}|origin={{FULLPAGENAME}}|copyright=cc|lsubtype=by-nc-sa|lver=3.0|contribURL=https://zh.moegirl.org.cn/index.php?title={{FULLPAGENAMEE}}&action=history}}
== 随机颜色示例 ==
{{#vardefine:h| {{#expr: ({{#time:i}} mod 3)*120+{{#time:s}}*14 mod 360  }}}}
<div style="display:flex;flex-wrap:wrap;width:1200px;margin:auto;justify-content:center;max-width:100%">
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#var:h}},1%,80%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#expr:{{#var:h}}+80}},1%,80%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#expr:{{#var:h}}+160}},1%,80%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#expr:{{#var:h}}+240}},1%,50%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#expr:{{#var:h}}+320}},1%,50%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#expr:{{#var:h}}+40}},1%,50%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#expr:{{#var:h}}+120}},1%,20%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#expr:{{#var:h}}+200}},1%,20%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
{{#invoke:nav|box|none
|navbar=plain|state=plain
|style=width:350px;margin:15px;
|titlestyle=background:#{{#invoke:Colorhime|main|hsl({{#expr:{{#var:h}}+280}},1%,20%)|ChrMAG=300}};
|groupstyle=background:#{{#var:color-l}};width:20px;
|abovestyle=background:#{{#var:color-l}};
|belowstyle=background:#{{#var:color-l}};
|liststyle=width:auto;
|title=&nbsp;|above=&nbsp;|below=&nbsp;|group1=&nbsp;
|list1=
    {{#invoke:nav|box|subgroup
    |groupstyle=background:#{{#var:color-m}};width:20px;
    |liststyle=background:{{#var:color-r}};width:auto;
    |group1=&nbsp;|list1=&nbsp;|group2=&nbsp;|list2=&nbsp;|group3=&nbsp;|list3=&nbsp;|group4=&nbsp;|list4=&nbsp;
}}
}}
</div>