This is where I put the theme
and this is what I put.
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 6px;
}
*::-webkit-scrollbar-track {
background: var(--scroll-bg);
}
*::-webkit-scrollbar-thumb {
background-color: var(--scroll-color);
border-radius: 20px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--scroll-color) var(--scroll-bg);
}
.awesomplete .input-with-feedback {
border: 1px solid var(--border-color);
}
.form-control {
border: 1px solid var(--border-color);
}
.search-bar .awesomplete input {
background-color: var(--bg-color)
}
.modal-backdrop{
background-color: #2c436b !important;
}
.widget .widget-head .widget-title {
font-size: var(--text-base);
}
.comment-box .comment-input-header, .form-dashboard-section .section-head, .form-section .section-head, .head-title {
font-size: var(--text-base);
font-weight: 600;
}
.comment-box .comment-input-container .ql-editor {
border: 1px solid var(--border-color);
}
.duration-picker .duration-input {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
}
.control-label {
font-weight: 500;
}
[data-theme="dark"] {
--bg-color: var(--gray-900);
--disabled-control-bg: var(--gray-900);
--border-color: #1c2126;
--margin-lg : 15px;
--text-bold: 600;
--scroll-bg: #161a1f;
--scroll-color: #1c2126;
}
[data-theme="light"] {
--bg-color: #f2f5fa;
--text-bold: 600;
--control-bg : #fff;
--control-bg-on-gray: #d4dcea;
--disabled-control-bg: #f2f5fa;
--heading-color: #333;
--border-color:#e3e8f1;
--avatar-frame-bg: #dde2ea;
--margin-lg: 15px;
--sidebar-select-color: #d4dcea;
--awesomplete-hover-bg: #d4dcea;
--scroll-bg: #eef1f5;
--scroll-color: #d9dfe6;
}
/***** OVERRIDDEN CSS *****/
/* Heading Text Color */
.page-head{
background: #7C7BAD !important;
background: #7C7BAD !important;
}
.page-container{
background: url(/web_responsive/static/src/css/../img/home-menu-bg-overlay.svg), linear-gradient(to bottom, #7C7BAD, #c3c2cc) !important;
background-color: url(/web_responsive/static/src/css/../img/home-menu-bg-overlay.svg), linear-gradient(to bottom, #7C7BAD, #c3c2cc) !important;
}
h3.ellipsis.title-text, .widget-group .widget-group-head .widget-group-title, .layout-side-section .sidebar-label{
color: white !important;
}
/* Form Input Focus */
input:focus{
border: 1px solid #7C7BAD !important;
}
.form-control:focus{
box-shadow: 0 0 0 2px rgba(94, 108, 162, 0.25) !important;
}
/* Div Padding */
.widget.widget-shadow.shortcut-widget-box{
padding: 5px 10px;
}
/* List Design */
.indicator-pill, .indicator-pill-right{
padding: 7px 8px;
height: unset;
}
/* Collapse Div Padding */
.section-head.collapsed{
padding: 2px 4px;
}
/* Dropdown List Hover */
.awesomplete > ul > li:hover, .awesomplete > ul > li[aria-selected="true"]{
background-color: #a492bf;
}
/* Global CSS */
/* Colours */
:root {
--background-color: #36414c;
--primary-color: #ffa00a;
--secondary-color: #7574ff;
--white-color: #ffffff;
--black-color: #000000;
--gray-color: #888;
--page-head-height: 50px;
--navbar-height: 50px;
}
.btn-primary:active,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:focus{
box-shadow: none !important;
}
.btn-primary{
color: #fff !important;
background-color: var(--primary-color) !important;
border-radius: 0 !important;
}
.btn-primary:hover{
background-color: rgba(255, 120, 10, 0.93) !important;
}
.btn-secondary{
background-color: #606060 !important;
color: var(--white-color) !important;
border-radius: 0 !important;
transition: background-color ease-in-out .15s;
}
.btn-secondary:hover{
background-color: rgba(255, 120, 10, 0.93) !important;
}
.page-head,
.page-head .page-head-content{
height: var(--page-head-height);
}
.page-head,
.page-head .page-head-content{
top: var(--page-head-height);
}
/* Top Header */
.navbar{
background: var(--background-color) !important;
height: var(--navbar-height);
}
.navbar-expand{
background-color: var(--background-color);
}
#navbar-breadcrumbs > li > a::before{
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
margin-right: .3em;
display: inline-block;
font-size: 24px;
transition: 0.2s;
position: relative;
top: 3px;
content: "\f105";
margin-right: 10px;
color: var(--white-color);
}
#navbar-breadcrumbs a{
color: var(--white-color);
text-decoration: none;
}
header .form-control{
color: var(--white-color);
}
header .form-control:focus{
border: 0;
}
.search-bar .awesomplete input{
height: 32px;
}
#navbar-search{
width: 300px;
background-color: rgb(65, 78, 90);
border-radius: 0px;
color: #f9f9f9;
border: none;
}
header ul#navbar-breadcrumbs{
margin-top: -8px;
}
header .form-control:focus{
background-color: var(--white-color) !important;
}
/* Sidebar */
.layout-side-section .sidebar-label{
color: var(--primary-color);
}
.sidebar-label svg,
.layout-side-section .sidebar-label .icon{
stroke: var(--primary-color);
}
.list-sidebar-button{
background-color: #c8c4c4 !important;
box-shadow: none !important;
}
.list-sidebar-button:active,
.list-sidebar-button:focus{
text-decoration: none !important;
box-shadow: none !important;
}
/* Input Fields */
input{
border-radius: 0 !important;
}
.form-control{
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
background-color: #f2f2f2 !important;
}
.form-control:focus{
outline: 0;
border: 1px solid var(--primary-color);
box-shadow: none;
background: rgba(255, 160, 10, 0.14) !important;
}
.navbar .navbar-nav a.nav-link{
color: var(--white-color);
}
span.notifications-seen use,
symbol#icon-small-down{
fill: var(--white-color);
}
/* Table */
.form-grid{
border-radius: 0;
border: 1px solid #bbbbbb;
}
.form-grid .grid-heading-row{
background-color: #f4f4f4;
}
.grid-heading-row{
border-bottom: 1px solid var(--primary-color);
}
.grid-row > .row .col{
border-right: 1px solid #d1d8dd;
}
.form-grid .grid-row:hover{
background: rgba(255, 152, 0, 0.15);
}
/* Heading Color */
.head-title, .form-section .section-head, .form-dashboard-section .section-head, .comment-box .comment-input-header{
color: var(--primary-color);
}
/* Lists */
.list-subject a{
text-decoration: none;
transition: 0.3s;
}
.list-subject a:hover{
color: var(--secondary-color);
}
/* Report Table */
.datatable .dt-header .dt-cell--header .dt-cell__content{
background-color: #f4f4f4;
}
.filter-button,
.sort-selector-button,
.btn-order{
background-color: #ea7272 !important;
color: var(--white-color) !important;
transition: 0.3s;
border-radius: 0 !important;
}
.filter-button:hover,
.sort-selector-button:hover,
.btn-order:hover{
background-color: #c83b3b !important;
}
.filter-button span.filter-icon{
color: var(--white-color);
}
.filter-button span.filter-icon svg.icon{
stroke: var(--white-color);
}
but nothing changes in the system