Getcockpit Backend Theme "Orchid"

If you want change the backend theme here the “Orchid Theme”

in config folder add bootstrap.php the add the custom.css
add

if (COCKPIT_ADMIN && !COCKPIT_API_REQUEST) {

    $app->on('admin.init', function(){

        $this->helper('admin')->addAssets('path/to/config/custom.css');

    });

}

here the custom.css

:root {
    --primary: rgb(102, 99, 253);
    --primary-bg: rgb(242, 241, 255);
    --dark: rgb(9, 14, 36);
    --grey: rgb(98, 110, 153);
    --light: rgb(250, 250, 252);
    --light2: rgb(218, 222, 237);
    --white: white;
    --b-radius: 5px;
    --b-radius-sm: 2px;
    --box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px;
    --box-shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 8px;

}
body {
    color: var(--dark);
    font-weight: 400;
    background-color: var(--light);
    overflow-wrap: break-word;
    -moz-osx-font-smoothing: grayscale!important;
}
.uk-tab{
    border-bottom: none;
}
.uk-checkbox::before {
    content: "";
    position: absolute;
    left: 0;
    top:2px;
    z-index: 1;
    width: 1em;
    height: 1em;
    border: 2px solid var(--grey);
    border-radius: var(--b-radius);
}
.header-sub-panel {
    background: none;
    box-shadow: none;
}
.header-sub-panel-tab[divider="true"] {
    border-top: none!important;
}
.uk-modal-footer{
    box-shadow: none;
    background-color: var(--light);
}
.uk-table-tabbed thead tr th {
    text-transform: capitalize;
    letter-spacing: 0px;
    font-size: 13px;
    font-weight: 600;
}
.uk-breadcrumb > li > a,
.uk-breadcrumb > li > span,
.uk-breadcrumb > li.uk-active > span {
    color: var(--dark)!important;
    text-transform: capitalize;
    font-size: 14px;
}
.uk-dropdown, .uk-modal-dialog{
    border-radius: var(--b-radius);
}
.uk-button-group .uk-button{
    margin-right: 5px;
    color: var(--grey);
    background: var(--primary-bg);

}
a, .uk-button-link {
    color: var(--primary);
}
.uk-nav-dropdown .uk-nav-header {
    color: var(--grey);
}
.uk-nav-item-danger > a:hover, .uk-nav-item-danger > a:active {
    color: red !important;
}
.uk-link {
    color: var(--primary);
}
.uk-form ::placeholder,
.uk-form-icon > [class*="uk-icon-"]{
    color: var(--grey);
}
a:hover{
    color: var(--primary);
}
.uk-bg-primary{
    background: var(--primary)!important;
}

.uk-link-muted, .uk-link-muted a {
    color: var(--dark)!important;
}
.uk-nav-dropdown>li>a:hover, .uk-nav-dropdown>li>a:focus {
    background: var(--primary)!important;
    color: #fff;
    outline: none;
}
::selection {
    background: var(--primary)!important;
    text-shadow: none;
}
input[type='text'], input[type='email'], input[type='password'], textarea, .uk-panel-framed{
    background: var(--white)!important;
    border-radius: var(--b-radius);
    padding: 20px 10px!important;
    border: 1px solid var(--light2)!important;
    border-radius: var(--b-radius-sm)!important;
    box-shadow: var(--box-shadow)!important;
}
input[type='text']:focus{
    border: 1px solid var(--primary)!important;
}

select{
    background: white !important;
    border-radius: var(--b-radius);
    border: 1px solid var(--light2)!important;
    border-radius: var(--b-radius-sm)!important;
    box-shadow: var(--box-shadow)!important;
}
.uk-form select{
    padding: 8px 10px!important;
    height: 40px;
}
.app-modulesbar > li > .uk-active::after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: none!important;
    bottom: -22px;
    left: 0;
}
.app-modulesbar>li>a {
    padding: 8px 10px;
    font-weight: 400;
    color:var(--grey)
}
.app-modulesbar a.uk-active,
.uk-badge {
    color: var(--primary)!important;
    background: var(--primary-bg)!important;
    border-radius: var(--b-radius);
}
.uk-subnav, .uk-subnav>* {

    padding-left: 0!important;
    margin-top: 0!important;
}
.uk-table th, .uk-table td {
    padding: 12px 12px;
    vertical-align: middle;
}



cp-fieldcontainer[active="true"] {
    border-color: var(--primary)!important;
}
.uk-panel-box{
    border-radius: var(--b-radius);
    color: var(--grey)
}
.uk-checkbox{
    padding: 0px!important;
    border: none !important;
    box-shadow: none!important;
}
select.uk-form-large, textarea.uk-form-large, input[type].uk-form-large, input:not([type]).uk-form-large {
    height: 40px;
    padding: 8px 0;
    font-size: 16px;
    background-color: white!important;
}
.uk-breadcrumb {
    background: white;
    border:none;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px!important;
    padding: 8px 10px;
    border-radius: 5px;
    }
.uk-panel-box, .uk-panel-card .uk-panel-card {
    box-shadow: var(--box-shadow-md);
}
.uk-button-outline{
    background-color: var(--primary-bg);
}
 /* Tab Panel */
.header-sub-panel-tab[divider="true"] {
    padding: 8px 0;
    border-top: 1px rgba(0,0,0,0.1) solid;
    }
.uk-tab > li > a {
    font-weight: 400!important;
    padding: 8px 10px!important;
    border-bottom:none !important;

}
.uk-tab>li {
    margin-bottom:0!important;
}
.uk-tab > li.uk-active > a {
    border-bottom:none !important;
    color: var(--primary)!important;
    background: var(--primary-bg)!important;
    border-radius: var(--b-radius);
    font-weight: 400!important;

}
.uk-tab>li.uk-active>a:after {
    background: none;
    height:0!important
}
.uk-checkbox:checked::before {
    background: var(--primary)!important;
    border-color: var(--primary)!important;
    color: var(--primary-bg)!important;
}

.uk-datepicker-table a.uk-active {
    color: var(--primary)!important;
    background: var(--primary-bg)!important;
}
cp-field[type="rating"]{
    color: #ccc;
}
.uk-text-primary {
    color: var(--primary)!important;
}
.uk-button{
    text-transform: capitalize;
    letter-spacing: 0;
    font-size: 13px;
    border-radius: var(--b-radius)!important;
}
.uk-button-primary{
    background-color: var(--primary)!important;
    color: var(--primary-bg)!important;
}
.uk-text-muted {
    right: 0px !important;
    color: var(--grey)!important;
}
.uk-nav li > a{
    color:var(--primary)
}

.uk-nav li > a:hover {
    background-color: var(--primary-bg)!important;
    color:var(--primary)

}
input:focus {
    border-color: var(--primary)!important;
    outline: currentcolor none medium!important;
    box-shadow: none!important;
}
.field-text-container span{
    right: 10px !important;
    color: var(--primary)!important;
}

.uk-icon-pencil-square{
    display: none;
}
cp-fieldcontainer {
    opacity: 1;
}
cp-fieldcontainer .uk-text-bold{
    font-weight: 500;
}

For Sidebar layout add css below
and you must delete @if($item[‘active’]) in app.php for menu text visible

                                    @if($item['active'])
                                    <span class="uk-text-small uk-margin-small-left uk-text-bolder">@lang($item['label'])</span>
                                    @endif

preview :

@media (min-width: 640px) {
    body{
        display: flex;
        height: 100vh;
    }
    .uk-sticky-placeholder{
        margin-bottom: 0!important;
        flex: 1;
        height: 100%!important;
        display: flex;
        position: fixed;
        z-index: 10;
    }
    .uk-sticky-placeholder .app-header{
        height: 100%!important;
        max-width: 300px;
        min-width: 200px;
        width: 200px;


    }
    .app-main{
        width: 100%;
        margin-left: 200px;
        position: relative;
    }
    .app-header-topbar .uk-grid.uk-flex-middle{
        display: flex!important;
        flex-direction: column!important;
        margin-left: 0px;
        align-items: flex-start;
    }
    .uk-container-breakout, .header-sub-panel .uk-container{
        padding: 0!important;
    }
    .uk-container-breakout, .header-sub-panel {
        position: inherit;
        width: 100%!important;
        left:0
    }
    .app-header-topbar .uk-grid > div{
        padding-left: 0px;
        margin-bottom: 20px;
    }
    .app-header-topbar .uk-container {
        padding: 0 18px;
    }
    .app-header-topbar .uk-subnav {
        display: flex;
        flex-direction: column!important;
        margin-left:0
    }
    .app-header-topbar .uk-subnav li{
        margin-left:0
    }
    .app-header-topbar .uk-grid > div:last-child{
        position: absolute!important;
        right:0px!important;;
        top:20px!important;
        width: 50px;
    }
    .app-header-topbar .uk-subnav li a{
        width: 100%;
        position: relative;
        color:var(--dark);
    }
    .app-header-topbar .uk-subnav li{
        overflow: hidden;
        border-radius: var(--b-radius);
        margin-bottom: 5px

    }
    .app-modulesbar > li > .uk-active {
        position: relative!important;
        bottom: 0;
        margin-right: 20px;

    }
    .app-modulesbar > li > .uk-active::after{
        display: block!important;
        position: relative;
        margin-right: 20px;
        bottom: 0;
    }
    .app-header-topbar .uk-subnav li a .uk-text-small{
        font-size: 13px!important;
        font-weight: 500;
    }
}

Thank You

3 Likes