Basic UI customizations

Appearance and functionality of the user interface can be modified by creating a custom CSS or JavaScript file. AdminNeo will automatically include files adminneo.css, adminneo-light.css, adminneo-dark.css and adminneo.js that are placed in the AdminNeo's current working directory (typically next to the adminneo.php or index.php). The file structure will be:

– adminneo.php
– adminneo.css
– adminneo.js

adminneo.css - Should be compatible with automatic switching to dark mode.
adminneo-light.css - Will force AdminNeo to use only the light mode.
adminneo-dark.css - Will force the dark mode.

ℹ️ Note: Multiple CSS and JS files can be also defined in cssUrls and jsUrls configuration parameters.

CSS variables

All colors, font sizes, and some UI parameters are defined by CSS variables, making them easy to customize.

The full list of available variables can be found in these source files:

Examples

/* Blue buttons. */
:root {
    --button-bg: #edf3fd;
    --button-bg-hover: #d9e1f1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --button-bg: #3a4967;
        --button-bg-hover: #2b354c;
    }
}

/* Hide link icons. */
.icon:not(.solo) {
    display: none;
}

Custom colors for syntax highlighting:

/* Green string values. */
.jush {
    --string-color: #428e31 !important;
}

@media (prefers-color-scheme: dark) {
    .jush {
        --string-color: #73da5e !important;
    }
}