Themes and colors

Switching Themes

Dcat Admin supports theme switching function. There are four built-in theme colors: indigo, blue, blue-light, green, which can be switched by configuring the parameter admin.layout.color.

{tip} New Color blue-dark added in Version v1.3.0

Open configuration file config/admin.php

     'layout' => [
         'color' => 'blue',

         ...
     ],

     ...

Preview of some theme colors

Custom theme coloring

{tip} Note that if you customize your theme, you'll need to recompile your custom theme every time you update it with a new version!!!!

Developers can use this feature to add their own theme color scheme, before using this feature you need to install NodeJs, if you do not have it installed, go to http://nodejs.cn/ to download and install it.

After installing NodeJs, you can run npm -v on the command line to test if success is installed.

npm -v

If the version number is returned normally, it means that it was success successfully installed. It is recommended to use Taobao mirror.

npm config set registry https://registry.npm.taobao.org

Then run the following command to compile the custom theme file, just enter the name of the theme and the theme color code (hexadecimal). Here we will generate an orange theme as an example.

{tip} This command takes a long time to run the first time, so please be patient. If it fails, try writing permissions to the vendor directory.

php artisan admin:minify orange --color fbbd08 --publish

The above command is meant to generate an orange theme with the color code #fbbd08, and then automatically publish the static resource after generation. If you compile success, the command line will output the following

...

 DONE  Compiled successfully in 48001ms8:24:28 PM

                                              Asset      Size  Chunks
               Chunk Names
               /resources/dist/adminlte/adminlte.js  29.7 KiB       0  [emitted]
               /resources/dist/adminlte/adminlte
           /resources/dist/adminlte/adminlte.js.map  87.8 KiB       0  [emitted]
 [dev]         /resources/dist/adminlte/adminlte
               /resources/dist/dcat/extra/action.js   3.7 KiB       1  [emitted]
               /resources/dist/dcat/extra/action
           /resources/dist/dcat/extra/action.js.map  12.9 KiB       1  [emitted]
 [dev]         /resources/dist/dcat/extra/action
          /resources/dist/dcat/extra/grid-extend.js  4.87 KiB       2  [emitted]
               /resources/dist/dcat/extra/grid-extend
      /resources/dist/dcat/extra/grid-extend.js.map  21.7 KiB       2  [emitted]
 [dev]         /resources/dist/dcat/extra/grid-extend
    /resources/dist/dcat/extra/resource-selector.js   5.8 KiB       3  [emitted]
               /resources/dist/dcat/extra/resource-selector
/resources/dist/dcat/extra/resource-selector.js.map    24 KiB       3  [emitted]
 [dev]         /resources/dist/dcat/extra/resource-selector
               /resources/dist/dcat/extra/upload.js  17.2 KiB       4  [emitted]
               /resources/dist/dcat/extra/upload
           /resources/dist/dcat/extra/upload.js.map  66.8 KiB       4  [emitted]
 [dev]         /resources/dist/dcat/extra/upload
                /resources/dist/dcat/js/dcat-app.js  88.8 KiB       5  [emitted]
               /resources/dist/dcat/js/dcat-app
            /resources/dist/dcat/js/dcat-app.js.map   164 KiB       5  [emitted]
 [dev]         /resources/dist/dcat/js/dcat-app
        resources/dist/adminlte/adminlte-orange.css   656 KiB       0  [emitted]
        [big]  /resources/dist/adminlte/adminlte
        resources/dist/dcat/css/dcat-app-orange.css    43 KiB       0  [emitted]
               /resources/dist/adminlte/adminlte
      resources/dist/dcat/extra/markdown-orange.css  1.72 KiB       0  [emitted]
               /resources/dist/adminlte/adminlte
          resources/dist/dcat/extra/step-orange.css  8.56 KiB       0  [emitted]
               /resources/dist/adminlte/adminlte
        resources/dist/dcat/extra/upload-orange.css  6.42 KiB       0  [emitted]
               /resources/dist/adminlte/adminlte

Copied Directory [\dcat-admin\resources\dist] To [\public\vendors\dcat-admin]
Publishing complete.
Compiled views cleared!

After the theme file compiles success, the following code needs to be added to app/Admin/bootstrap.php

Dcat\Admin\Color::extend('orange', [
    'primary'        => '#fbbd08',
    'primary-darker' => '#fbbd08',
    'link'           => '#fbbd08',
]);

Finally, set the value of your configuration parameter admin.layout.color to orange.

Dark Mode

Enable toggle button

The dark mode switch can be enabled or disabled by configuring the parameter admin.layout.dark_mode_switch. When enabled, a switch button will be added in the top navigation bar of the page, click on it to switch between dark and bright mode, and the state will be saved in localStorage.

     'layout' => [
         'dark_mode_switch' => true,

         ...
     ],

     ...

The result is as follows

Dark Mode by Default

Open the configuration file config/admin.php, write

     'layout' => [
         'body_class' => 'dark-mode',

         ...
     ],

     ...

Menu style

You can configure the menu style by configuring the parameter admin.layout.sidebar_style (if this parameter does not exist in the configuration file, you can add it manually), which supports three values light, primary, dark, and the default is light.

{tip} The sidebar_dark parameter is about to be deprecated! The sidebar_style parameter overrides the sidebar_dark parameter and sidebar_dark will only take effect if sidebar_style does not exist!!!

     'layout' => [
         // Supports light, primary, dark
         'sidebar_style' => 'light',

         ...
     ],

     ...

light result

primary result

Menu layout

Just add sidebar-separate to the admin.layout.body_class parameter.

     'layout' => [
         'body_class' => 'sidebar-separate',

         ...
     ],

     ...

result

PHP Color Management

Dcat Admin has a built-in color management module, which can be easily used with the theme switching function. Make the page color fit the theme color!

Commonly used colors can be easily obtained through the Dcat\Admin\Admin::color() service (see [Color Tables and Styles](theme.md#Color Tables and Styles)).

Getting the built-in colors

You can get the color code by using the Color::get or magic method. When the color obtained by Color::get does not exist, the original value of the parameter is returned.

<?php
use Dcat\Admin\Admin;

// get method to get the color
echo Admin::color()->get('primary'); // output #5c6bc6

// Getting Colors by Magic Method
echo Admin::color()->primary(); // output #5c6bc6

Color fading

The Color::lighten method or the magic method can be used to get the hex color code of the faded color.

The Color::lighten method takes two arguments.

• $name string Color Alias
• $amt int color deviation value, the larger the value, the more light color

echo Admin::color()->lighten('primary', 10); // output #6675d0

// You can also use it like this, but be sure to pass negative numbers for the arguments.
echo Admin::color()->primary(-10); // output #6675d0

Direct color code transmission is also supported.

echo Admin::color()->lighten('#5c6bc6', 10); // output #6675d0

color darkening

The Color::darken method or the magic method can be used to get the hexadecimal color code of the darkened color.

The Color::darken method takes two parameters:

• $name string Color Alias
• $amt int color deviation value, the higher the value the darker the color

echo Admin::color()->darken('primary', 10); // output #5261bc

// It can also be used like this
echo Admin::color()->primary(10); // output #5261bc

Direct color code transmission is also supported

echo Admin::color()->darken('#5c6bc6', 10); // output #5261bc

Color Transparency

The Color::alpha method allows you to set the transparency of a color.

The Color::alpha method takes two arguments:

• $name string Color Alias
• $alpha float Transparency, value between 0 ~ 1, the smaller the value, the higher the transparency

echo Admin::color()->alpha('primary', 0.1); // output rgba(92, 107, 198, 0.1)

Direct color code transmission is also supported

echo Admin::color()->alpha('5c6bc6', 0.1); // output rgba(92, 107, 198, 0.1)

Get all built-in colors

The Color::all method gets the hexadecimal code of all built-in colors.

$allColors = Admin::color()->all();

JS Color Management

The JS module also includes a color management function, and the Dcat.color object allows you to manage colors just like in PHP code.

to get the built-in colors

There are three ways to get the color code in the JS code

Admin::script(
<<<JS
    // Mode 1
    var primary = Dcat.color.primary;

    // Mode 2
    var primary = Dcat.color['primary'];

    // Mode 3
    var primary = Dcat.color.get('primary');

    console.log(primary);  // output #5c6bc6
JS
);

Color fading

The Dcat.color.lighten method or magic method can be used to get the hex color code of the faded color.

The color.lighten method takes two arguments:

• name string Color Alias
• amt int color deviation value, the larger the value, the more light color

Admin::script(
    <<<JS
    var primary = Dcat.color.lighten('primary', 10)

    console.log(primary); // output #6675d0
JS    
);

Direct color code transmission is also supported

var primary = Dcat.color.lighten('5c6bc6', 10);

console.log(primary); // output #6675d0

color darkening

The Dcat.color.darken method or the magic method can be used to get the hex color code for the darkened color.

The color.darken method takes two arguments:

• name string Color Alias
• amt int color deviation value, the larger the value, the darker the `darker'

Admin::script(
    <<<JS
    var primary = Dcat.color.darken('primary', 10)

    console.log(primary); // output #5261bc
JS    
);

Direct color code transmission is also supported

var primary = Dcat.color.darken('5c6bc6', 10)

console.log(primary); // output #5261bc

Color Transparency

The Dcat.color.alpha method allows you to set the transparency of the color.

The color.alpha method takes two arguments:

• $name string Color Alias
• $alpha float Transparency, value between 0 ~ 1, the smaller the value, the higher the transparency

Admin::script(
    <<<JS
    var primary = Dcat.color.alpha('primary', 0.1)

    console.log(primary); // output rgba(92, 107, 198, 0.1)
JS    
);

Direct color code transmission is also supported

var primary = Dcat.color.alpha('#5c6bc6', 0.1)

console.log(primary); // output rgba(92, 107, 198, 0.1)

gets all the built-in colors

The Dcat.color.all method, which returns a key-value pair object, retrieves the hexadecimal code for all built-in colors.

var allColors = Dcat.color.all();

Color charts and styles

The front end of Dcat Admin is written using bootstrap4, so first we need to learn how to use Bootstrap4 Color(Color) Style, and we won't repeat it here.

The following is the Dcat Admin common color style sheet, where .bg-* is the style of background color, .text- is the style of text color.