deichrakete / kirby-color-schemes

Kirby网站的配色方案插件

安装: 0

依赖: 0

建议: 0

安全性: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言:Vue

类型:Kirby插件

2.0.0 2024-09-17 15:33 UTC

This package is auto-updated.

Last update: 2024-09-17 15:34:35 UTC


README

此插件允许您轻松自定义Kirby网站的配色方案。

Kirby配色方案插件目前处于早期阶段,仍在开发中。

摘要

Kirby配色方案插件提供了一个简单的方法来定义和应用自定义配色方案到您的Kirby网站。它允许您在配置文件中定义颜色变量并将它们应用到网站的CSS中。

安装

  1. 下载插件文件,并将它们放置在您的Kirby安装的site/plugins/color-schemes目录中。
  2. 在您的Kirby配置文件(site/config/config.php)中,添加以下行以启用插件
'deichrakete.color-schemes' => [
    'schemes' => [
        [ // Overwrites the default color scheme
            'name' => 'default', // also the css class
            'label' => 'Default',
            'colors' => [
                'background' => '#ffffff',
                'text' => '#000000',
                'secondary' => '#00ffff',
            ],
        ],
        [
            'name' => 'pastel1',
            'label' => 'Pastel 1',
            'colors' => [
                'background' => '#f2e8d9',
                'text' => '#5c5c5c',
                'secondary' => '#b3cdd1',
            ],
        ],
        [
            'name' => 'pastel2',
            'label' => 'Pastel 2',
            'colors' => [
                'background' => '#e8f2d9',
                'text' => '#5c5c5c',
                'secondary' => '#d1cbb3',
            ],
        ],
        [
            'name' => 'pastel3',
            'label' => 'Pastel 3',
            'colors' => [
                'background' => '#d9e8f2',
                'text' => '#5c5c5c',
                'secondary' => '#b3d1cd',
            ],
        ],
        [
            'name' => 'dark1',
            'label' => 'Dark 1',
            'colors' => [
                'background' => '#1a1a1a',
                'text' => '#ffffff',
                'secondary' => '#4d4d4d',
            ],
        ],
    ]
]
  1. 向您的布局设置蓝图添加新字段
fields:
    layout:
        type: layout
        layouts:
            - '1/1'
            - '1/2, 1/2'
            - '1/3, 1/3, 1/3'
        fieldsets:
            - heading
            - text
            - accordion
        settings:
            fields:
                scheme:
                    label: Color Scheme
                    type: colorscheme
                    default: default
  1. scheme字段添加到您的布局CSS类或从配置中读取设置。