README

为您的Craft CMS站点配置颜色主题。通过输入字段选择页面或组件样式的颜色主题。在模板中输出CSS类名或颜色值。

路线图

• 保留已删除的集合和主题，以便它们在选中时仍然可用
• 导入/导出功能
• 显示相邻颜色的对比分数，以提高可访问性
• 更好的颜色选择器，包含alpha通道
• 用户界面增强

Twig示例

<style>
{% for color in entry.field.all() %}
    --color-{{ color.handle}}: {{ color.getHex() }};
{% endfor %}
</style>

{# Outputs: #}

<style>
    --color-background: #CC4224;
    --color-text: #000000;
    --color-button: #2A75B3;
    --color-highlight: #F3D403;
</style>

<style>
    --color-background: {{ entry.field.handle('background').getRgb() }}
    --color-background-alpha: {{ entry.field.handle('background').getRgba() }}
</style>

{# Outputs: #}

<style>
    --color-background: rgb(204, 66, 36);
    --color-background-alpha: rgb(204, 66, 36, .5);
</style>

<style>
{% set collections = craft.colorpalette.collections %}
{# or #}
{% for collection in craft.colorpalette.all() %}

{% set themes = collections.themes %}
{# or #}
{% for theme in collection.all() %}
{% for color in theme.colors %}
    --color-{{ color.handle}}: {{ color.getHex() }};
{% endfor %}
{% endfor %}
{% endfor %}
</style>

{# Outputs: #}

<style>
    --color-background: #CC4224;
    --color-text: #000000;
    --color-button: #2A75B3;
    --color-highlight: #F3D403;
</style>

<div class="color-{{ entry.field.collection }} color-{{ entry.field.theme }}"></div>

{# Outputs #}

<div class="color-heroes color-captainMarvel"></div>

{% set collection = craft.colorpalette.handle('heroes') %}
{% set theme = collection.handle('captainMarvel') %}
{# or #}
{% set collection = craft.colorpalette.collection('heroes') %}
{% set theme = collection.theme('captainMarvel') %}
{# or #}
{{ craft.colorpalette.collection('heroes').theme('captainMarvel').name }}

<style>
{% for color in theme.colors %}
    --color-{{ color.handle}}: {{ color.getHex() }};
{% endfor %}
</style>

{# Outputs: #}

<style>
    --color-background: #CC4224;
    --color-text: #000000;
    --color-button: #2A75B3;
    --color-highlight: #F3D403;
</style>

{# ~~~~~~~~ #}

{% set color = theme.color('background') %}
{# or #}
{% set color = theme.handle('background') %}
<style>
    --color-background: {{ color.getRgb() }}
</style>

{# Outputs: #}

<style>
    --color-background: rgb(204, 66, 36);
</style>