User Theme Switcher

Showcase
1

Here is a test of a user theme setting. Still needs some refinement.

2

Needless to say, would you care to share some insight as to how you accomplished this?

3

Of course!

  1. Create a theme CSS file. In this example, I used the 2 themes posted here :arrow_right: Community Created Themes

  2. You need to host these files somewhere. For me, the easiest thing to do was create a data table in this example app and upload the CSS files to that data table. By clicking the DOWNLOAD link for an uploaded file, you can retrieve the URL for that file. I also took a screen shot of each theme running on an app and uploaded it to an image field.

screenshot-build.tadabase.io-2020.12.01-21_07_09
screenshot-build.tadabase.io-2020.12.01-21_07_091920×937 68.4 KB

  1. In the Users table, create 2 fields
  • Text field for holding the URL of the selected theme
  • Connection to the data table where the themes are stored

screenshot-build.tadabase.io-2020.12.01-21_29_26
screenshot-build.tadabase.io-2020.12.01-21_29_261354×463 35.1 KB

  1. Create 2 rules in the Users data table. Rule 1 sets the Light theme when a new user is created, Rule 2 get’s the theme URL every time a User selected a new theme from the connected data table storing the themes.

screenshot-build.tadabase.io-2020.12.01-21_12_38
screenshot-build.tadabase.io-2020.12.01-21_12_381096×656 33.4 KB

  1. Now we need to build the structure for a User to select a theme. On the profile page, add the connected theme field from step 3. This is also where I pull in the screenshot of the them by adding connected fields -> theme screenshot image. When the User selects a theme from the dropdown, the screen shot will populate.

  2. In order to get the app to use the selected theme, we have to do 2 things.

A. We need to append a stylesheet into the app . The code pulls the theme URL from the field we saved it to using the User Table Record Rules. We do this in the PAGE LAYOUT by using this code…

$('head').append($('<link href="{loggedInUser.theme src}" rel="stylesheet" type="text/css">'));

B. Next we go back to the Profile page, and add some more JS. This code refreshes the page when the Submit button is clicked and TA-DA, the theme has changed.

var submitButtonLoaded = false;
function checkIfSubmitButtonHasLoaded() {
    if(submitButtonLoaded === false) {
        if ($('#x_element_page_3_4 .form-submit button').html() !== undefined) {
            submitButtonLoaded = true;
        }
       window.setTimeout(checkIfSubmitButtonHasLoaded, 100);
    } else {
       $('#x_element_page_3_4 .form-submit button').click(function(){
    location.reload();
});
    }
}
checkIfSubmitButtonHasLoaded();


I think that's it, let me know if you can get it working, if you have any questions, or if I missed anything.
1 Like
4

Thanks! It works! Had play with it a little to fully understand what you where doing.

5

Here- took this awesome post on choosing a theme and basically created root variables for all (most) of the colors, it’s not close to perfect but just shows a really simple way to create a bunch of themes pretty quickly by simply changing the root colors.

6

I believe this was done on the serenity theme css

@import url(‘https://fonts.googleapis.com/css2?family=Poppins&display=swap’);
/root colors/
:root {
–primary: rgba(212, 237, 238);
–secondary: rgba(167, 209, 212);
–warning: rgba(9, 98, 102);
–danger:#f44336;
–success: rgba(6, 54, 56);
–info: rgba(172, 213, 225);
–accent: rgba(133, 181, 194);
–highlight: rgba(87, 147, 164);
–link: rgba(8, 106, 133);
–text-dark: rgba(4, 53, 67);
–background-light: rgba(250, 228, 205);
–background-mid: rgba(200, 182, 164);
–background-dark: rgba(150, 137, 123);
–text-light: rgba(100, 91, 82);
–text-mid: rgba(50, 46, 41);
–accent-light: rgba(165, 222, 238);
–accent-dark: rgba(119, 199, 221);
–highlight-light: rgba(16, 164, 204);
–highlight-dark: rgba(11, 109, 136);
–link-hover: rgba(5, 55, 68);
}
/* App Fonts */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
div,
a {
font-family: ‘Poppins’, sans-serif;
}

/* ###### EXTRAS ####### */
.t-pagecontainer .t-row {
margin-bottom: 25px;
}

.t-datatable h3,
.t-list h3,
.t-form h3,
.t-detail h3,
.t-search h3,
.t-map h3,
.t-accordion h3,
.t-logincomponent h3,
.t-signupcomponent h3,
.t-profilecomponent h3,
.t-chart h3 {
padding-bottom: 2rem;
font-weight: 500;
font-size: 2rem;
color: var(–text-dark);
margin: 0rem 0rem 1rem 0rem;
}

.t-datatable,
.t-list,
.t-form,
.t-detail,
.t-search,
.t-map,
.t-accordion,
.t-logincomponent,
.t-signupcomponent,
.t-profilecomponent,
.t-chart,
.x-type-resource,
.t-kanban,
.t-timeline,
.t-calendar,
.t-html,
.t-pivottable {
margin-bottom: 25px;
}

/*
::-webkit-scrollbar {
width: 40px;
}

::-webkit-scrollbar-thumb {
border: 15px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 20px;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.15);
}
*/

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
z-index: 3;
color: var( --primary);
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
}
.pagination>li>a,
.pagination>li>span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: var( --highlight-dark);
text-decoration: none;
background-color: var( --primary);
}

.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
z-index: 2;
color: var( --highlight-dark);
background-color: var(–accent-light);
border-color: var( --secondary);
}

/* ###### BACKGROUND ###### */
body {
/background-color: var( --highlight-dark);/
background-color: var(–background-light);
background: var(–accent-light);
background: linear-gradient(90deg, rgba(246, 246, 248, 1) 19%, rgba(217, 189, 234, 1) 25%, rgba(197, 220, 218, 1) 100%);
overflow: hidden;
}

@media (max-width: 768px) {
body {
overflow: auto;
background: var(–background-light);
}
}

/* ###### TABLE ACTIONS ###### */
.table-actions {
background: transparent !important;
border: none !important;
}

.table-actions button.btn.btn-default {
background: none;
color: var(–text-dark)0008f;
border: 1px solid var(–background-mid);
box-shadow: none;
}

.table-actions button.btn.btn-default:focus {
outline: none;
}

.table-actions button.btn.btn-default:active {
box-shadow: none;
}

/* ###### ALERTS ###### */

.alert-danger {
background-color: var(–danger);
border-radius: 10px;
color: var( --primary);
margin-top: 25px;
}

.alert-success {
background-color: var(–highlight-light);
border-radius: 10px;
color: var( --primary);
margin-top: 25px;
}

/* ###### BREADCRUMB ###### */
.breadcrumb-wrap {
margin-bottom: 15px;
}

.breadcrumb {
background: transparent;
margin: 0;
height: 40px;
line-height: 20px;
}

.breadcrumb li a {
color: var(–accent-dark);
text-decoration: none;
font-size: 14px;
font-weight: 700;
}

.navbar {
background: var(–background-light);
border: none;
border-radius: 2rem;
}

.navbar li a {
color: var(–text-mid) !important;
}

/* DROPDOWN MENU BACKGROUND COLOR */
.navbar-default .dropdown-menu>li>a {
background: var( --primary);
}

/* MENU ITEM HOVER */
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active a {
text-decoration: none;
color: var(–highlight)!important;
background-color: var( --primary);
border-radius: 10px;
}

/* DROPDOWN MENU ITEM HOVER */
.navbar-default .dropdown-menu>li>a:hover,
.navbar-default .dropdown-menu>li>a:focus,
.navbar-default .dropdown-menu>.active a {
text-decoration: none;
color: var(–highlight)!important;
background-color: var( --primary);
border-radius: 10px;
}

/* ###### MENU ###### */
@media (min-width: 768px) {
.x-menu-style-vertical {
bottom: 0;
top: 0;
left: 0;
height: 95vh;
margin-top: 2rem;
overflow: inherit;
position: fixed;
width: 225px;
z-index: 1039;
}

.app {
    padding: 4rem;
    margin: 2rem;
    background: var( --primary);
    height: 95vh;
    border-radius: 2rem;
    box-shadow:var( --highlight) 0 6px 24px 0px,  var( --accent) 0 0 0 1px;
    overflow: auto;
}

.navbar {
    background: var(--background-light);
    border: none;
    height: 100%;
    padding: 2rem 0;
}

.x-menu-style-vertical .navbar {
    border-radius: 0 2rem 2rem 0;
}


/* PARENT ITEM FONT STYLE */
.navbar ul>li {
    font-size: 14px;
    font-weight: 700;
    margin: 5px 5px 5px 10px;
}

.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

/* HIDE HOVER MENU */
.x-menu-style-vertical .dropdown-submenu:hover>.dropdown-menu {
    display: none;
}

/* cascading indents */
.navbar i {
    margin-right: 5px;
    font-size: 18px;
}

.dropdown-menu i {
    margin-left: 25px;
}

.dropdown-menu .dropdown-menu i {
    margin-left: 50px;
}

.dropdown-menu .dropdown-menu .dropdown-menu i {
    margin-left: 75px;
}

.navbar-default .fal {
    font-size: 16px;
    font-weight: 500;
    margin-right: 10px;
}

.navbar-default .fa {
    font-size: 16px;
    font-weight: 500;
    margin-right: 10px;
}

.navbar-default .fas {
    font-size: 16px;
    font-weight: 500;
    margin-right: 10px;
}

}

/* ####### LIST ####### */
.t-list {
background: var( --primary);
border-radius: 1.5rem;
padding: 4rem 2rem;
box-shadow:var( --highlight) 0 6px 24px 0px, var( --accent) 0 0 0 1px;
}

.list-row-item {
border: none !important;
box-shadow:var( --highlight) 0 6px 24px 0px, var( --accent) 0 0 0 1px !important;
border-radius: 1.5rem !important;
overflow: hidden;
margin-bottom: 25px;
}

.t-list .list-body .img-responsive {
width: 100%;
height: 300px;
object-fit: cover;
}

.t-list .list-cover .img-responsive {
width: 100%;
height: 300px;
object-fit: cover;
}

.list-body {
padding: 0 2rem;
}

/* ###### TABLES ###### */
.t-datatable {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

.t-datatable .table-wrap>.table tr {
color: #3F4254;
background-color: var( --primary);
}

.t-datatable table>thead>tr>th {
font-weight: 600;
color: var(–background-dark) !important;
font-size: 13px;
text-transform: uppercase;
vertical-align: middle;
background: var(–background-light);
border: none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}

.t-datatable thead th:first-child {
background: var(–background-light);
border-radius: 1rem 0 0 1rem;
}

.t-datatable thead th:last-child {
background: var(–background-light);
border-radius: 0 1rem 1rem 0;
}

.t-datatable table {
border: none;
}

.t-datatable table tbody tr:first-child td {
border: none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}

.t-datatable table tbody tr:not(:first-child) td {
border-bottom: none;
border-left: none;
border-right: none;
border-top: 1px solid var(–background-light);
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}

.t-datatable a.td-link.td-data-link {
background: var(–background-light);
padding: 8px;
border-radius: 0.4rem;
}

.t-datatable .td-data-link i.fa {
color: #3699FF;
}

.t-datatable .td-data-link:hover i {
color: var(–background-light);
}

.t-datatable table a:not(.btn) {
text-decoration: none;
}

/*
.t-datatable input[type=‘checkbox’] {
margin-top: -30px;
}

.t-datatable input[type=‘checkbox’] {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
width: 24px;
height: 24px;
margin: 0 1px 0 0;
display: block;
float: left;
position: relative;
cursor: pointer;
}

.t-datatable input[type=‘checkbox’]:after {
content: “”;
vertical-align: middle;
text-align: center;
line-height: 24px;
position: absolute;
cursor: pointer;
height: 24px;
width: 24px;
left: 0;
top: 0;
font-size: 12px;
-moz-box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;
box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;
background: var(–background-light);
}

.t-datatable input[type=‘checkbox’]:hover:after,
input[type=‘checkbox’]:checked:hover:after {
background: var(–background-light);
content: ‘\2714’;
color: var( --primary);
}

.t-datatable input[type=‘checkbox’]:checked:after {
background: #3699FF;
content: ‘\2714’;
color: var( --primary);
}
*/
.t-datatable .input-group input.form-control.input-sm.padder {
border-right: none;
border: 1px solid var( --secondary);
box-shadow: unset;
}

.t-datatable .input-group-btn {
border: 1px solid var( --secondary);
background: none;
border-left: none;
}

.t-datatable .input-group-btn .btn {
background: none;
color: var( --secondary);
padding: 0 10px;
}

.t-datatable .input-group-btn .btn:focus {
outline: none;
}

.t-datatable .input-group-btn .btn:active {
box-shadow: none;
}

.filter-tabs {
background: transparent;
}

.filter-tabs .nav li a {
border-radius: 1rem 1rem 0 0;
}

/* Form Component */

.t-form {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

.t-form .af-form h3 {
padding-bottom: 2rem;
font-weight: 500;
font-size: 2rem;
color: #181C32;
margin: 0 0 2rem;
border-bottom: 1px solid var(–background-light);
}

.t-form .form-submit.row {
margin: 2rem 0 0;
border-top: 1px solid var( --secondary);
}

.t-form span.lbl {
font-weight: 400;
}

.t-form .form-control {
color: #3F4254;
background-color: var(–background-light);
border: none;
border-radius: 0.60rem;
box-shadow: none;
}

.t-form .af-form-submit {
margin: 1rem 0;
padding: 0 -15px !important;
width: 100%;
}

.t-form-name table {
width: 100%;
}

/* Detail Component */

.t-detail {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* Search Component */

.t-search {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* Map Component */

.t-map {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* Accordion Component */

.t-accordion {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* Login Component */

.t-logincomponent {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* Signup Component */

.t-signupcomponent {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* Profile Component */

.t-profilecomponent {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* Chart Component */

.t-chart {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* ###### CALENDAR ###### */
.t-calendar {
background: var( --primary);
border-radius: 1.5rem;
padding: 4rem 2rem;
box-shadow:var( --highlight) 0 6px 24px 0px, var( --accent) 0 0 0 1px;
}

.t-calendar a {
color: var(–highlight-dark);
}

/* ###### CARD ###### */

.t-card {
background: var( --primary);
border-radius: 1.5rem;
padding: 2rem;
box-shadow:var( --highlight) 0px 6px 24px 0px, var( --accent) 0px 0px 0px 1px;
}

/* .t-card .af-card-component {
border: none;
} */

/* ###### BUTTONS ###### */
.btn-default i,
.btn-primary i,
.btn-success i,
.btn-info i,
.btn-warning i,
.btn-danger i {
color: var( --primary) !important;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.btn-default,
.btn.btn-default {
color: var( --primary);
background-color: var( --link);
border-color: var( --link);
outline: unset !important;
border-radius: 5px;
}

.btn-default:hover,
.btn.btn-default:hover {
color: var( --primary);
background-color: var( --background-dark);
border-color: var( --background-dark);
}

.btn-default:focus,
.btn-default:active,
.btn.btn-default:focus,
.btn.btn-default:active {
color: var( --primary);
background-color: var( --background-dark);
border-color: var( --background-dark);
outline: unset !important;
}

/=======================================/
.btn-primary,
.btn.btn-primary {
color: var( --primary);
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
outline: unset !important;
border-radius: 5px;
}

.btn-primary:hover,
.btn.btn-primary:hover {
color: var( --primary);
background-color: var( --highlight-light);
border-color: var( --highlight-light);
}

.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:active {
color: var( --primary) !important;
background-color: var( --highlight-light) !important;
border-color: var( --highlight-light) !important;
outline: unset !important;
}

.btn-success,
.btn.btn-success {
color: var( --primary);
background-color: var( --success);
border-color: var( --success);
outline: unset !important;
border-radius: 5px;
}

.btn-success:hover,
.btn.btn-success:hover {
color: var( --primary);
background-color: var( --warning);
border-color: var( --warning);
}

.btn-success:focus,
.btn-success:active,
.btn.btn-success:focus,
.btn.btn-success:active {
color: var( --primary);
background-color: var( --warning);
border-color: var( --warning);
outline: unset !important;
}

/=======================================/

.btn-info,
.btn.btn-info {
color: var( --primary);
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
outline: unset !important;
border-radius: 5px;
}

.btn-info:hover,
.btn.btn-info:hover {
color: var( --primary);
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
}

.btn-info:focus,
.btn-info:active,
.btn.btn-info:focus,
.btn.btn-info:active {
color: var( --primary);
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
outline: unset !important;
}

/=======================================/
.btn-warning,
.btn.btn-warning {
color: var( --primary);
background-color: var( --warning);
border-color: var( --warning);
outline: unset !important;
border-radius: 5px;
}

.btn-warning:hover,
.btn.btn-warning:hover {
color: var( --primary);
background-color: var( --success);
border-color: var( --success);
}

.btn-warning:active,
.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning:focus {
color: var( --primary);
background-color: var( --success);
border-color: var( --success);
outline: unset !important;
}

/=======================================/
.btn-danger,
.btn.btn-danger {
color: var( --primary);
background-color: var( --danger);
border-color: var( --danger);
outline: unset !important;
border-radius: 5px;
}

.btn-danger:hover,
.btn.btn-danger:hover {
color: var( --primary);
background-color: var( --danger);
border-color: var( --danger);
}

.btn-danger:focus,
.btn-danger:active,
.btn.btn-danger:focus,
.btn.btn-danger:active {
color: var( --primary);
background-color: var( --danger);
border-color: var( --danger);
outline: unset !important;
}

/* ###### BUTTONS OUTLINED ###### */
.btn-outline.btn-default i {
color: var( --link) !important;
}

.btn-outline.btn-default:hover i {
color: var( --primary) !important;
}

.btn-outline.btn-default,
.btn-outline.btn.btn-default {
color: var( --link);
background-color: var( --primary);
border-color: var( --link);
outline: unset !important;
border-radius: 5px;
}

.btn-default:hover,
.btn.btn-default:hover {
color: var( --primary);
background-color: var( --background-dark);
border-color: var( --background-dark);
}

.btn-default:focus,
.btn-default:active,
.btn.btn-default:focus,
.btn.btn-default:active {
color: var( --primary);
background-color: var( --background-dark);
border-color: var( --background-dark);
outline: unset !important;
}

/=======================================/
.btn-outline.btn-primary i {
color: var( --highlight-dark)!important;
}

.btn-outline.btn-primary:hover i {
color: var( --primary) !important;
}

.btn-outline.btn-primary,
.btn-outline.btn.btn-primary {
color: var( --highlight-dark);
background-color: var( --primary);
border-color: var( --highlight-dark);
outline: unset !important;
border-radius: 5px;
}

.btn-primary:hover,
.btn.btn-primary:hover {
color: var( --primary);
background-color: var( --highlight-light);
border-color: var( --highlight-light);
}

.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:active {
color: var( --primary) !important;
background-color: var( --highlight-light) !important;
border-color: var( --highlight-light) !important;
outline: unset !important;
}

/=======================================/
.btn-outline.btn-success i {
color: var( --success) !important;
}

.btn-outline.btn-success:hover i {
color: var( --primary) !important;
}

.btn-outline.btn-success,
.btn-outline.btn.btn-success {
color: var( --success);
background-color: var( --primary);
border-color: var( --success);
outline: unset !important;
border-radius: 5px;
}

.btn-success:hover,
.btn.btn-success:hover {
color: var( --primary);
background-color: var( --warning);
border-color: var( --warning);
}

.btn-success:focus,
.btn-success:active,
.btn.btn-success:focus,
.btn.btn-success:active {
color: var( --primary);
background-color: var( --warning);
border-color: var( --warning);
outline: unset !important;
}

/=======================================/
.btn-outline.btn-info i {
color: var( --highlight-dark) !important;
}

.btn-outline.btn-info:hover i {
color: var( --primary)!important;
}

.btn-outline.btn-info,
.btn-outline.btn.btn-info {
color: var( --highlight-dark);
background-color: var( --primary);
border-color: var( --highlight-dark);
outline: unset !important;
border-radius: 5px;
}

.btn-info:hover,
.btn.btn-info:hover {
color: var( --primary);
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
}

.btn-info:focus,
.btn-info:active,
.btn.btn-info:focus,
.btn.btn-info:active {
color: var( --primary);
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
outline: unset !important;
}

/=======================================/
.btn-outline.btn-warning i {
color: var( --warning) !important;
}

.btn-outline.btn-warning:hover i {
color: var( --primary)!important;
}

.btn-outline.btn-warning,
.btn-outline.btn.btn-warning {
color: var( --warning);
background-color: var( --primary);
border-color: var( --warning);
outline: unset !important;
border-radius: 5px;
}

.btn-warning:hover,
.btn.btn-warning:hover {
color: var( --primary);
background-color: var( --success);
border-color: var( --success);
}

.btn-warning:active,
.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning:focus {
color: var( --primary);
background-color: var( --success);
border-color: var( --success);
outline: unset !important;
}

/=======================================/
.btn-outline.btn-danger i {
color: var( --danger)!important;
}

.btn-outline.btn-danger:hover i {
color: var( --primary) !important;
}

.btn-outline.btn-danger,
.btn-outline.btn.btn-danger {
color: var( --danger);
background-color: var( --primary);
border-color: var( --danger);
outline: unset !important;
border-radius: 5px;
}

.btn-danger:hover,
.btn.btn-danger:hover {
color: var( --primary);
background-color: var( --danger);
border-color: var( --danger);
}

.btn-danger:focus,
.btn-danger:active,
.btn.btn-danger:focus,
.btn.btn-danger:active {
color: var( --primary);
background-color: var( --danger);
border-color: var( --danger);
outline: unset !important;
}

/* ######## DATE PICKER ####### */
.t-form-date .btn-default {
background: var( --highlight-dark);
border: 2px solid var( --highlight-dark);
border-radius: 1rem;
text-align: center;
text-decoration: none;
outline: none;
}

.t-form-date .btn-default:hover {
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
}

.t-form-date .btn-default:focus,
.t-form-date .btn-default:active {
background-color: var( --highlight-dark);
border-color: var( --highlight-dark);
outline: unset !important;
}

.uib-left {
background-color: var( --primary)!important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
}
.uib-left i {
color: var(–text-dark) !important;
margin-left: 0px;
}

.uib-title {
background-color: var( --primary) !important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
color: var(–text-dark) !important;
}
.uib-title i {
color: var(–text-dark) !important;
margin-left: 0px;
}

.uib-right {
background-color: var( --primary)!important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
}
.uib-right i {
color: var(–text-dark) !important;
margin-left: 0px;
}

.uib-day {
background-color: var( --primary) !important;
border: none !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
}
.uib-day button {
background-color: var( --primary) !important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
color: var(–text-dark) !important;
}
.uib-day .btn-info {
background-color: var(–highlight-dark)!important;
color: var( --primary) !important;
}

.uib-month {
background-color: var( --primary) !important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
}
.uib-month button {
background-color: var( --primary) !important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
color: var(–text-dark) !important;
}
.uib-month .btn-info {
background-color: var(–highlight-dark)!important;
color: var( --primary) !important;
}

.uib-year {
background-color: var( --primary) !important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
}
.uib-year button {
background-color: var( --primary) !important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 5px;
text-align: center !important;
color: var(–text-dark) !important;
}
.uib-year .btn-info {
background-color: var(–highlight-dark)!important;
color: var( --primary) !important;
}

.datetime-picker-dropdown li .btn-group.pull-left .btn-default {
background-color: var( --primary) !important;
border: 1px solid var( --secondary) !important;
border-radius: 5px !important;
padding: 10px;
text-align: center !important;
color: var(–text-dark);
margin: 5px;
}

.datetime-picker-dropdown li .btn-group.pull-right .btn-default {
background-color: var(–danger)!important;
border: 1px solid var(–danger)!important;
border-radius: 5px !important;
padding: 10px;
text-align: center !important;
color: var( --primary);
}

.datetime-picker-dropdown tr th,
.datetime-picker-dropdown tr td {
border-bottom: none !important;
border-top: none !important;
}