How to Create a New Theme in the Yii2 Starter Kit Backend Application

1. Create a directory: \backend\views\themes\default, specifying the base directory that contains the theme assets (CSS, JS, images, etc.), as shown in Figure 1

2. Copy all files under the directory: \backend\views\ (excluding themes), as shown in Figure 2

3. Paste them into the directory: \backend\views\themes\default\. The files have been copied successfully, as shown in Figure 3

Paste into the directory: \backend\views\themes\default\, copied successfully — Figure 3

4. Configure the [[yii\base\View::theme|theme]] property of the view application component, as shown in Figure 4

PHP

    'components' => [
        'view' => [
            'theme' => [
                'basePath' => '@app/views/themes/default',
                'baseUrl' => '@web/views/themes/default',
                'pathMap' => [
                    '@app/views' => '@app/views/themes/default',
                ],
            ],
        ],
    ],


    'components' => [
        'view' => [
            'theme' => [
                'basePath' => '@app/views/themes/default',
                'baseUrl' => '@web/views/themes/default',
                'pathMap' => [
                    '@app/views' => '@app/views/themes/default',
                ],
            ],
        ],
    ],

Configure the [[yii\base\View::theme|theme]] property of the view application component — Figure 4

5. Configure the Gii template files, setting the theme to: default, as shown in Figure 5

PHP

if (YII_ENV_DEV) {
    $config['modules']['gii'] = [
        'class' => yii\gii\Module::class,
        'generators' => [
            'crud' => [
                'class' => yii\gii\generators\crud\Generator::class,
                'templates' => [
                    'yii2-starter-kit' => Yii::getAlias('@backend/views/themes/default/_gii/templates')
                ],
                'template' => 'yii2-starter-kit',
                'messageCategory' => 'backend'
            ]
        ]
    ];
}


if (YII_ENV_DEV) {
    $config['modules']['gii'] = [
        'class' => yii\gii\Module::class,
        'generators' => [
            'crud' => [
                'class' => yii\gii\generators\crud\Generator::class,
                'templates' => [
                    'yii2-starter-kit' => Yii::getAlias('@backend/views/themes/default/_gii/templates')
                ],
                'template' => 'yii2-starter-kit',
                'messageCategory' => 'backend'
            ]
        ]
    ];
}

Configure the Gii template files, with the theme set to: default — Figure 5

6. Theme the module, for example: i18n. Create a directory: \backend\modules\i18n\views\themes\default, as shown in Figure 6

7. Copy all files under the directory: \backend\modules\i18n\views\ (excluding themes), as shown in Figure 7

8. Paste them into the directory: \backend\modules\i18n\views\themes\default\. The files have been copied successfully, as shown in Figure 8

Paste into the directory: \backend\modules\i18n\views\themes\default\, copied successfully — Figure 8

9. Configure the [[yii\base\View::theme|theme]] property of the view application component, as shown in Figure 9

PHP

        'view' => [
            'theme' => [
                'basePath' => '@app/views/themes/default',
                'baseUrl' => '@web/views/themes/default',
                'pathMap' => [
                    '@app/views' => '@app/views/themes/default',
                    '@app/modules/i18n/views' => '@app/modules/i18n/views/themes/default',
                ],
            ],
        ],


        'view' => [
            'theme' => [
                'basePath' => '@app/views/themes/default',
                'baseUrl' => '@web/views/themes/default',
                'pathMap' => [
                    '@app/views' => '@app/views/themes/default',
                    '@app/modules/i18n/views' => '@app/modules/i18n/views/themes/default',
                ],
            ],
        ],

10. Access the [[yii\base\Theme]] object via the [[yii\base\View::theme]] property. Edit: \backend\views\themes\default\sign-in\login.php, as shown in Figure 10

PHP

$theme = $this->theme;
print_r($theme);
exit;


$theme = $this->theme;
print_r($theme);
exit;

Access the [[yii\base\Theme]] object via the [[yii\base\View::theme]] property. Edit: \backend\views\themes\default\sign-in\login.php — Figure 10

11. The printed object, as shown in Figure 11

yii\base\Theme Object
(
[pathMap] => Array
(
[@app/views] => @app/views/themes/default
[@app/modules/i18n/views] => @app/modules/i18n/views/themes/default
)

[_baseUrl:yii\base\Theme:private] => /views/themes/default
[_basePath:yii\base\Theme:private] => E:\wwwroot\cmcp\backend/views/themes/default
[_events:yii\base\Component:private] => Array
(
)

[_behaviors:yii\base\Component:private] =>
)

12. Set the theme name to: default in .env, as shown in Figure 12

Plaintext

# Themes
# ----
BACKEND_THEME = default


# Themes
# ----
BACKEND_THEME = default

Set the theme name to: default in .env — Figure 12

13. Set the theme-related aliases. Edit: \backend\config\bootstrap.php to define the aliases, as shown in Figure 13

PHP

/**
 * Setting theme aliases
 */
Yii::setAlias('@themePath', '@backend/web/themes/' . env('BACKEND_THEME'));
Yii::setAlias('@themeUrl', '@backendUrl/themes/' . env('BACKEND_THEME'));


/**
 * Setting theme aliases
 */
Yii::setAlias('@themePath', '@backend/web/themes/' . env('BACKEND_THEME'));
Yii::setAlias('@themeUrl', '@backendUrl/themes/' . env('BACKEND_THEME'));

Set the theme-related aliases. Edit: \backend\config\bootstrap.php to define aliases — Figure 13

14. Adjust the settings from step 5, as shown in Figure 14

PHP

if (YII_ENV_DEV) {
    $config['modules']['gii'] = [
        'class' => yii\gii\Module::class,
        'generators' => [
            'crud' => [
                'class' => yii\gii\generators\crud\Generator::class,
                'templates' => [
                    'yii2-starter-kit' => Yii::getAlias('@backend/views/themes/' . env('BACKEND_THEME') . '/_gii/templates')
                ],
                'template' => 'yii2-starter-kit',
                'messageCategory' => 'backend'
            ]
        ]
    ];
}


if (YII_ENV_DEV) {
    $config['modules']['gii'] = [
        'class' => yii\gii\Module::class,
        'generators' => [
            'crud' => [
                'class' => yii\gii\generators\crud\Generator::class,
                'templates' => [
                    'yii2-starter-kit' => Yii::getAlias('@backend/views/themes/' . env('BACKEND_THEME') . '/_gii/templates')
                ],
                'template' => 'yii2-starter-kit',
                'messageCategory' => 'backend'
            ]
        ]
    ];
}

Adjust the settings from step 5 — Figure 14

15. Adjust the settings from step 9, as shown in Figure 15

PHP

        'view' => [
            'theme' => [
                'basePath' => '@app/views/themes/' . env('BACKEND_THEME'),
                'baseUrl' => '@web/views/themes/' . env('BACKEND_THEME'),
                'pathMap' => [
                    '@app/views' => '@app/views/themes/' . env('BACKEND_THEME'),
                    '@app/modules/i18n/views' => '@app/modules/i18n/views/themes/' . env('BACKEND_THEME'),
                ],
            ],
        ],


        'view' => [
            'theme' => [
                'basePath' => '@app/views/themes/' . env('BACKEND_THEME'),
                'baseUrl' => '@web/views/themes/' . env('BACKEND_THEME'),
                'pathMap' => [
                    '@app/views' => '@app/views/themes/' . env('BACKEND_THEME'),
                    '@app/modules/i18n/views' => '@app/modules/i18n/views/themes/' . env('BACKEND_THEME'),
                ],
            ],
        ],

Adjust the settings from step 9 — Figure 15

16. Create a directory: \backend\web\themes\default, specifying the base directory that contains the theme assets (CSS, JS, images, etc.), as shown in Figure 16

17. Copy the directories (css, img, js) under: \backend\web\, as shown in Figure 17

18. Paste them into the directory: \backend\web\themes\default\. The files have been copied successfully, as shown in Figure 18

Paste into the directory: \backend\web\themes\default\, copied successfully — Figure 18

19. Redefine the asset bundle based on the theme. Edit: \backend\assets\BackendAsset.php, as shown in Figure 19

PHP

    public $basePath = '@themePath';
    public $baseUrl = '@themeUrl';


    public $basePath = '@themePath';
    public $baseUrl = '@themeUrl';

Redefine the asset bundle based on the theme. Edit: \backend\assets\BackendAsset.php — Figure 19

20. View the source code of the login page. The biggest change is the included CSS/JS files, whose paths are absolute, as shown in Figure 20

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者，自 2013 年起持续运营个人技术博客，记录工作与个人项目中遇到的真实问题，以及解决问题过程中的探索、实践和思考。

除了技术写作，我也在持续开发和维护自己的独立项目，探索新技术和新工具在实际场景中的应用。我始终相信，没有不值得去解决的问题，也没有不值得去学习的技术。

如果这篇文章对你有所帮助，欢迎浏览博客中的其他文章，也欢迎交流技术经验与想法。

关于我 · GitHub · 邮件联系

How to Create a New Theme in the Yii2 Starter Kit Backend Application

更多文章

保护机制也会保护错东西：为什么一个 Documentation 能阻塞整页修订？

页面明明是我自己的，为什么不能直接重写？从 /translation/ 改版看 immutable source 与 replacement successor

为什么修完 Reviewer 指出的所有例子，下一轮还是会失败？从 B→revision→B 看同类问题完整性

为下一次 PHP 8.5 升级做准备：从两次验证失败到自动回滚工具完成