add code_backend_theme from cybrosys

code_backend_theme/static/src/js/chrome/sidebar_menu.js

@@ -0,0 +1,93 @@
+odoo.define('code_backend_theme.SidebarMenu', function (require) {
+    "use strict";
+
+    //sidebar toggle effect
+    $(document).on("click", "#closeSidebar", function(event){
+        $("#closeSidebar").hide();
+        $("#openSidebar").show();
+    });
+    $(document).on("click", "#openSidebar", function(event){
+        $("#openSidebar").hide();
+        $("#closeSidebar").show();
+    });
+    $(document).on("click", "#openSidebar", function(event){
+        $("#sidebar_panel").css({'display':'block'});
+        $(".o_action_manager").css({'margin-left': '200px','transition':'all .1s linear'});
+        $(".top_heading").css({'margin-left': '200px','transition':'all .1s linear', 'width':'auto'});
+
+        //add class in navbar
+        var navbar = $(".o_main_navbar");
+        var navbar_id = navbar.data("id");
+        $("nav").addClass(navbar_id);
+        navbar.addClass("small_nav");
+
+        //add class in action-manager
+        var action_manager = $(".o_action_manager");
+        var action_manager_id = action_manager.data("id");
+        $("div").addClass(action_manager_id);
+        action_manager.addClass("sidebar_margin");
+
+        //add class in top_heading
+        var top_head = $(".top_heading");
+        var top_head_id = top_head.data("id");
+        $("div").addClass(top_head_id);
+        top_head.addClass("sidebar_margin");
+    });
+    $(document).on("click", "#closeSidebar", function(event){
+        $("#sidebar_panel").css({'display':'none'});
+        $(".o_action_manager").css({'margin-left': '0px'});
+        $(".top_heading").css({'margin-left': '0px', 'width':'100%'});
+
+        //remove class in navbar
+        var navbar = $(".o_main_navbar");
+        var navbar_id = navbar.data("id");
+        $("nav").removeClass(navbar_id);
+        navbar.removeClass("small_nav");
+
+        //remove class in action-manager
+        var action_manager = $(".o_action_manager");
+        var action_manager_id = action_manager.data("id");
+        $("div").removeClass(action_manager_id);
+        action_manager.removeClass("sidebar_margin");
+
+        //remove class in top_heading
+        var top_head = $(".top_heading");
+        var top_head_id = top_head.data("id");
+        $("div").removeClass(top_head_id);
+        top_head.removeClass("sidebar_margin");
+    });
+
+    $(document).on("click", ".sidebar a", function(event){
+        var menu = $(".sidebar a");
+        var $this = $(this);
+        var id = $this.data("id");
+        $("header").removeClass().addClass(id);
+        menu.removeClass("active");
+        $this.addClass("active");
+
+        //sidebar close on menu-item click
+        $("#sidebar_panel").css({'display':'none'});
+        $(".o_action_manager").css({'margin-left': '0px'});
+        $(".top_heading").css({'margin-left': '0px', 'width':'100%'});
+        $("#closeSidebar").hide();
+        $("#openSidebar").show();
+
+        //remove class in navbar
+        var navbar = $(".o_main_navbar");
+        var navbar_id = navbar.data("id");
+        $("nav").removeClass(navbar_id);
+        navbar.removeClass("small_nav");
+
+        //remove class in action-manager
+        var action_manager = $(".o_action_manager");
+        var action_manager_id = action_manager.data("id");
+        $("div").removeClass(action_manager_id);
+        action_manager.removeClass("sidebar_margin");
+
+        //remove class in top_heading
+        var top_head = $(".top_heading");
+        var top_head_id = top_head.data("id");
+        $("div").removeClass(top_head_id);
+        top_head.removeClass("sidebar_margin");
+    });
+});

code_backend_theme/static/src/js/fields/colors.js

@@ -0,0 +1,10 @@
+/** @odoo-module **/
+import { getColor } from "@web/views/graph/colors";
+
+var code_backend_color = ["#556ee6", "#f1b44c", "#50a5f1", "#ffbb78", "#34c38f", "#98df8a", "#d62728",
+        "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2",
+        "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];
+
+for (let i=0;i<code_backend_color.length;i++){
+    getColor[i] = code_backend_color[i]
+}

code_backend_theme/static/src/scss/datetimepicker.scss

@@ -0,0 +1,68 @@
+/* date time picker colour changes for the theme */
+.datepicker {
+    .table-sm {
+        > thead {
+            > tr > .prev {
+                color: #fff !important;
+                background-color: $primary_accent !important;
+                &:hover{
+                    background-color: darken($primary_accent, 10%) !important;
+                }
+                > .fa{
+                    color: #fff !important;
+                }
+            }
+            > tr > .next {
+                color: #fff !important;
+                background-color: $primary_accent !important;
+                &:hover{
+                    background-color: darken($primary_accent, 10%) !important;
+                }
+                > .fa{
+                    color: #fff !important;
+                }
+            }
+            > tr > .picker-switch {
+                color: #fff !important;
+                background-color: $primary_accent !important;
+                &:hover{
+                    background-color: darken($primary_accent, 10%) !important;
+                }
+            }
+        }
+        > tbody > tr > td {
+            &.today:before {
+                border-bottom-color: $primary_accent !important;
+            }
+            &.active {
+                background-color: $primary_accent !important;
+            }
+        }
+    }
+}
+.picker-switch {
+    span.fa {
+        margin: 0;
+        @include transition($btn-transition);
+        &.primary {
+            background-color: $primary_accent;
+            color: white;
+            &:hover {
+                background-color: darken($primary_accent, 20%);
+            }
+        }
+    }
+}
+
+.daterangepicker .drp-calendar .calendar-table thead tr:first-child {
+    color: #FFFFFF;
+    background-color: $primary_accent;
+}
+
+.daterangepicker .drp-calendar .calendar-table tbody tr td:not(.off).active, .daterangepicker .drp-calendar .calendar-table tbody tr td:not(.off).active:hover {
+    background-color: $primary_accent;
+}
+
+.daterangepicker .drp-calendar .calendar-table thead tr:first-child th.prev:hover, .daterangepicker .drp-calendar .calendar-table thead tr:first-child th.next:hover {
+    background-color: darken($primary_accent, 20%);
+}

code_backend_theme/static/src/scss/login.scss

@@ -0,0 +1,145 @@
+#wrapwrap > main {
+    background: #f8f8fb;
+}
+// .navbar {
+//     background: #fff !important;
+// }
+body {
+    font-family: 'Poppins', sans-serif !important;
+}
+body.bg-100 {
+    background-color: #000000 !important;
+}
+.card.o_database_list {
+    align-items: center;
+    max-width: 450px !important
+}
+.card.o_database_list .card-body {
+    background-color: #fff !important;
+    border-radius: 5px !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+    width: 450px;
+}
+a {
+    color: #556ee6;
+    text-decoration: none;
+}
+a:hover {
+    color: #4458b8;
+    text-decoration: underline;
+}
+.alert-info {
+    color: #306391;
+    background-color: #dcedfc;
+    border-color: #cbe4fb;
+}
+.oe_login_form button.btn-link {
+    color: #495057;
+    font-weight: 500;
+    font-size: 14px !important;
+}
+.oe_login_form button.btn-link:hover {
+    color: #171a1c;
+}
+
+//login button starts
+.btn-primary {
+    color: #fff;
+    background-color: #556ee6;
+    border-color: #556ee6;
+}
+.btn-primary:hover {
+    color: #fff;
+    background-color: #485ec4;
+    border-color: #4458b8;
+}
+.btn-check:active+.btn-primary,
+.btn-check:checked+.btn-primary,
+.btn-primary.active,.btn-primary:active,
+.show>.btn-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #4458b8 !important;
+    border-color: #4053ad !important;
+}
+.btn-check:focus+.btn-primary, .btn-primary:focus {
+    color: #fff;
+    background-color: #485ec4 !important;
+    border-color: #4458b8 !important;
+    -webkit-box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+    box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+}
+.oe_login_form .btn {
+    display: inline-block;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    padding: .47rem .75rem;
+    border-radius: .25rem;
+    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+}
+.btn-secondary {
+    color: #fff !important;
+    background-color: #74788d !important;
+    border-color: #74788d !important;
+}
+.btn-secondary:hover {
+    color: #fff !important;
+    background-color: #636678 !important;
+    border-color: #5d6071 !important;
+}
+.btn-secondary:active {
+    color: #fff;
+    background-color: #5d6071 !important;
+    border-color: #575a6a !important;
+}
+.btn-secondary i,.btn-secondary span {
+    color: #fff !important;
+}
+.btn-fill-secondary:focus, .btn-secondary:focus, .btn-fill-secondary.focus, .focus.btn-secondary {
+    box-shadow: none !important;
+}
+//login button ends
+
+//input starts
+.oe_login_form input {
+    display: block;
+    width: 100%;
+    height: 40px !important;
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: .25rem;
+    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    box-shadow: none !important;
+    margin-bottom:10px !important;
+}
+form label {
+    font-weight: 400 !important;
+}
+.oe_login_form a.btn.btn-secondary {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 0.75rem;
+}
+.oe_login_form a.btn.btn-secondary i.fa.fa-database {
+    margin-left: 5px;
+}

code_backend_theme/static/src/scss/navigation_bar.scss

@@ -0,0 +1,366 @@
+.o_form_statusbar{
+  .o_statusbar_buttons{
+  .btn{
+    margin-right: 30px !important;
+  }
+  }
+}
+.o_cp_left{
+.btn{
+margin-right: 30px !important;
+}
+}
+
+.o_calendar_buttons > button > .fa{
+color: #ffffff !important;
+}
+.o_main_navbar, .btn-primary, .btn-primary:active, .o_searchview_facet_label {
+  background-color: $primary_accent !important;
+  color: $inverse_accent !important;
+}
+.o_search_panel_section_icon {
+  color: $primary_accent !important;
+}
+.btn-secondary {
+  border-radius: 0;
+  border: solid 1px $primary_accent !important;
+  color: $primary_accent !important;
+}o_list_table
+.o_list_view .o_list_table thead {
+    position: sticky;
+    top: 0;
+}
+
+.breadcrumb-item > a, .o_menu_item > a {
+  color: $primary_accent !important;
+}
+
+.fa-trash {
+  color: #f46a6a !important;
+}
+
+.o_main_navbar > a:hover {
+  background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o_main_navbar > .o_menu_sections > li > a:hover, .o_main_navbar > .o_menu_systray > li > a:hover, .o_main_navbar > .o_menu_sections > li.show > a, .o_main_navbar > .o_menu_systray > li.show > a {
+  background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o_main_navbar > .o_menu_apps > li > a:hover, .o_main_navbar > .o_menu_apps > li > a:active {
+  background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o_main_navbar > .o_menu_apps > .dropdown.show > .dropdown-menu.show {
+  max-height: 100vh !important;
+  height: 93vh !important;
+}
+.o_main_navbar > .o_menu_apps > .dropdown.show > .dropdown-menu.show > a {
+  //border-bottom: 1px solid lighten($primary_accent, 30%);
+}
+
+.o_mail_discuss_sidebar {
+  background-color: #1c2833;
+}
+
+.dropdown-toggle:after {
+  background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o_external_button {
+  border: none !important;
+}
+
+.o_field_x2many_list_row_add > a {
+  color: $primary_accent !important;
+}
+
+.nav-item > a {
+  color: $primary_accent !important;
+}
+
+.o_main_navbar > .o_menu_apps > li > a > i {
+  color: $inverse_accent !important;
+  font-size: 16px !important;
+}
+
+.o_form_uri > span {
+  color: $primary_accent !important;
+}
+
+.o_required_modifier.o_input {
+  background-color: $inverse_accent !important;
+  color: $primary_accent !important;
+  border-left: solid 3px #f46a6a !important;
+}
+
+.o_input {
+  border: solid 1px $primary_accent !important;
+  color: $primary_accent !important;
+}
+
+.o-no-caret > i, button[aria-pressed=true] {
+  color: $inverse_accent !important;
+}
+
+.o_loading {
+  background-color: $primary_accent;
+}
+
+.fas {
+  color: $inverse_accent !important;
+}
+
+.dashboard_mainbar {
+  width: 100%;
+}
+
+.a_app_menu_title {
+  display: none;
+}
+
+.o_menu_apps > .dropdown.show > .dropdown-menu.show:hover .a_app_menu_title {
+  display: inline-block;
+  width: 200px;
+}
+
+.o_required_modifier.o_input, .o_required_modifier.o_input {
+  background-color: $inverse_accent !important;
+  color: $primary_accent !important;
+  border-left: solid 3px #f46a6a !important;
+}
+.o_required_modifier .o_input, .o_required_modifier .o_input {
+  background-color: $inverse_accent !important;
+}
+
+
+
+.dropdown-toggle:after {
+  background-color: #ffffff00 !important;
+}
+
+.o_required_modifier > .o_input_dropdown > .ui-autocomplete-input {
+  background-color: $inverse_accent !important;
+  color: $primary_accent !important;
+  border-left: solid 3px #f46a6a !important;
+}
+
+.o_datepicker.o_field_date.o_field_widget.o_required_modifier > input {
+  background-color: $inverse_accent !important;
+  color: $primary_accent !important;
+  border-left: solid 3px #f46a6a !important;
+}
+
+.ui-state-active {
+  background-color: $primary_accent !important;
+  color: $inverse_accent !important;
+}
+
+.oe_search_bgnd {
+  background-color: lighten($primary_accent, 20%) !important;
+  color: $inverse_accent !important;
+}
+
+.oe_search_tab {
+  background-color: $primary_accent !important;
+  color: $inverse_accent !important;
+}
+
+.o_horizontal_separator {
+  color: $primary_accent !important
+}
+
+.o_field_widget.o_field_image .o_form_image_controls {
+  background-color: $primary_accent !important;
+}
+
+.o_field_widget.o_field_image .o_form_image_controls > button {
+  color: $inverse_accent !important;
+}
+
+.dropdown-item.o_app.mt0:hover , .dropdown-item.o_app.mt0:hover > .a_app_menu_title{
+background-color: $primary_accent !important;
+color: $inverse_accent !important;
+}
+
+// .o_address_country{
+// display: none !important;
+// }
+div.o_boolean_toggle.custom-control.custom-checkbox > input.custom-control-input:checked + label.custom-control-label::before {
+background-color: $primary_accent !important;
+}
+div.o_boolean_toggle.custom-control.custom-checkbox > input.custom-control-input:checked + label.custom-control-label::before {
+background-color: $primary_accent !important;
+}
+.o_mail_systray_item .o_mail_systray_dropdown .o_mail_systray_dropdown_top .o_filter_button.active {
+color: $primary_accent;
+text-decoration: none;
+}
+.o_mail_user_status.o_user_online {
+color: #fff !important;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::after {
+   border-left-color: $primary_accent;
+}
+.btn-link {
+font-weight: 400;
+color: $primary_accent !important;
+text-decoration: none;
+}
+.o_thread_window_header {
+background-color: $primary_accent !important;
+}
+.o_thread_window_close,.o_thread_window_expand{
+color: $inverse_accent !important;
+}
+.o_menu_sections, .o_menu_systray, .o_web_client > header{
+background: $primary_accent !important;
+}
+.fa-building-o{
+color: white !important;
+}
+.o_button_import, .oe_import_file{
+background: #5aa29f !important;
+color: white !important;
+border: solid 2px #5aa29f !important;
+}
+.o_button_import:hover, .oe_import_file:hover,.o_button_import:active, .oe_import_file:active{
+background: white !important;
+color: #5aa29f !important;
+border: solid 2px #5aa29f !important;
+}
+.o_form_button_save,.o_form_button_edit{
+background: #7BA94F !important;
+color: white !important;
+border: solid 2px #7BA94F !important;
+}
+.o_form_button_save:hover,.o_form_button_edit:hover,.o_form_button_save:active,.o_form_button_edit:active{
+background: white !important;
+color: #7BA94F !important;
+border: solid 2px #7BA94F !important;
+}
+.o-kanban-button-new, .o_list_button_add,.o_form_button_create{
+background: #b9408d !important;
+color: white !important;
+border: solid 2px #b9408d !important;
+}
+.o-kanban-button-new:hover, .o_list_button_add:hover,.o_form_button_create:hover,.o-kanban-button-new:active, .o_list_button_add:active,.o_form_button_create:active{
+background: white !important;
+color: #b9408d !important;
+border: solid 2px #b9408d !important;
+}
+.o_form_button_cancel,.o_import_cancel{
+background: #cf4137 !important;
+color: white !important;
+border: solid 2px #cf4137 !important;
+
+}
+.o_form_button_cancel:hover,.o_import_cancel:hover,.o_form_button_cancel:active,.o_import_cancel:active{
+background: white !important;
+color: #cf4137 !important;
+border: solid 2px #cf4137 !important;
+}
+.report_button{
+border-radius: 0 !important;
+border: solid 2px $primary_accent;
+background: $primary_accent !important;
+}
+.report_button:hover,.report_button:active{
+border-radius: 0 !important;
+border: solid 2px $primary_accent !important;
+color: $primary_accent !important;
+background: $inverse_accent !important;
+}
+.btn-primary{
+border-radius: 0 !important;
+}
+.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
+border: none;
+border-bottom: solid;
+font-weight: bold;
+}
+//.nav-link{
+//    @include hover-focus {
+//      border: none;
+//    }
+//}
+.o_data_row:has(.custom-control-input:checked){
+background: blue !important;
+}
+.o_field_one2many{
+    .o_list_view{
+        .table-responsive{
+            max-height:50vh;
+        }
+    }
+}
+thead{
+position: sticky;
+position: -webkit-sticky;
+top: 0;
+}
+.o_list_view .o_list_table tbody{
+    position: sticky;
+    top: 30px;
+}
+.o_list_view{
+    .o_list_table{
+        thead{
+            z-index:999;
+        }
+    }
+}
+.o_list_view .table-responsive .table{
+    width: max-content !important;
+    min-width: 100%;
+
+    thead
+    {
+    z-index:999;
+    tr:nth-child(1) th{
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    background-color: #eeeeee !important;
+    }
+  }
+}
+.o_list_view .o_list_table tbody{
+position:initial !important;
+}
+.o_list_view .table-responsive .table thead{
+z-index: 1;
+}
+.o_optional_columns_dropdown_toggle{
+z-index: 999;
+}
+.o_home_menu_background:not(.o_home_menu_background_custom) .o_main_navbar{
+    max-height:100px;
+}
+
+
+.o_progressbar .o_progress .o_progressbar_complete {
+background-color: #3d9bbb;
+}
+.o_cp_left .btn {
+    margin-right: 10px !important;
+}
+
+.o_main_navbar .o_menu_sections {
+    flex-wrap: wrap !important;
+}
+
+.o_section_and_note_list_view{
+    width:98%;
+}
+
+.o_list_renderer{
+    margin-left: 21px;
+}
+.o_notebook .nav{
+    background: none;
+}
+.o-form-buttonbox{
+    margin-left:-15px;
+    margin-right:-15px;
+}

code_backend_theme/static/src/scss/sidebar.scss

@@ -0,0 +1,97 @@
+#sidebar_panel {
+    height: calc(100% - 0%);
+	position: fixed;
+    top: 0px;
+    background-color: #2a3042;
+    display: none;
+    width: 200px;
+    overflow-y: scroll;
+    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
+    scrollbar-width: none;  /* Hide scrollbar for Firefox */
+    z-index: 999;
+}
+#sidebar_panel::-webkit-scrollbar {
+    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.sidebar_panel .sidebar {
+    padding: 0;
+    white-space: nowrap;
+    padding-bottom: 20px;
+    padding-top: 5px;
+}
+.sidebar_panel .sidebar_close {
+    text-align: end;
+    display: none;
+    position: sticky;
+    height: 35px;
+    padding-top: 5px;
+    top: 0;
+    background: #2a3042;
+    z-index: 1;
+}
+.sidebar_panel .sidebar_close a#closeSidebar {
+    font-size: 18px;
+    margin-right: 10px;
+    color: #ffffff;
+    opacity: .3;
+}
+.sidebar_panel .sidebar_close a#closeSidebar img {
+    width: 15px;
+}
+.sidebar_panel .sidebar .sidebar_logo {
+    padding-top: 20px;
+    text-align: center;
+    padding-bottom: 20px;
+}
+.sidebar_panel .sidebar .sidebar_logo img {
+    max-width: 150px;
+}
+
+.sidebar_panel .sidebar .sidebar_head {
+    padding-top: 20px;
+    padding-left: 15px;
+    color: #6a7187;
+    font-size: 14px;
+}
+
+.sidebar_panel .sidebar .sidebar_menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li {
+    margin: 0;
+    padding: 0;
+    border: 0px;
+    display: block;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li a {
+    margin: 0;
+    border: 0px;
+    display: block;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 8px 10px 8px 25px;
+    color: #ffffff;
+    font-size: 13px;
+    transition:.3s all;
+}
+.sidebar_panel .sidebar .sidebar_menu li:hover  a {
+    background: #1e2230;
+    color: #fff;
+}
+.sidebar_panel .nav-link {
+	opacity: .5;
+    transition:.3s all;
+}
+.sidebar_panel .sidebar a.nav-link.active {
+    color: #fff !important;
+	opacity: 1;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li a .sidebar_img {
+    width: 20px;
+    margin-right: 8px;
+}

code_backend_theme/static/src/scss/theme_accent.scss

@@ -0,0 +1,9 @@
+$primary_accent: #556ee6 !default;
+$secondary_accent: #334332 !default;
+$inverse_accent: #ffffff !default;
+$o-kanban-color-border-width: 8px;
+$selected_row: #ffffff !default;
+$bg_white: #ffffff !default;
+$f_color: #555b6d !default;
+$primary_hover: #485ec4 !default;
+

code_backend_theme/static/src/xml/styles.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+    <!--Align Invite Button in Settings-->
+    <t t-inherit="web.res_config_invite_users" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('d-flex')]" position="attributes">
+            <attribute name="class">d-flex align-items-center</attribute>
+        </xpath>
+    </t>
+
+    <!--Remove App Icon in Settings-->
+    <t t-inherit="web.SettingsPage" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('tab')]" position="replace">
+<!--                <div class="tab" t-if="!module.isVisible" t-att-class="(state.selectedTab === module.key and state.search.value.length === 0) ? 'selected': ''" t-att-data-key="module.key" role="tab" t-on-click="() => this.onSettingTabClick(module.key)">-->
+<!--                    <div class="icon d-none d-md-block" t-attf-style="background : url('{{module.imgurl}}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="module.string"/></span>-->
+<!--                </div>-->
+            <div class="tab" t-attf-data-key="#{module.key}" role="tab" t-on-click="() => this.onSettingTabClick(module.key)">
+                <span class="app_name"><t t-esc="module.string"/></span>
+            </div>
+        </xpath>
+    </t>
+</templates>

code_backend_theme/static/src/xml/top_bar.xml

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1">
+        <xpath expr="//nav[hasclass('o_main_navbar')]" position="replace">
+      <nav class="o_main_navbar d-flex justify-content-between"
+           t-on-dropdown-item-selected="onNavBarDropdownItemSelection"
+           data-command-category="navbar">
+          <div class="d-flex">
+              <div class="top_heading">
+                <!-- Apps Menu -->
+                  <t t-call="web.NavBar.AppsMenu">
+                 <t t-set="apps" t-value="menuService.getApps()"/>
+                </t>
+                  <!-- App Brand -->
+                  <DropdownItem
+                          t-if="currentApp"
+                          href="getMenuItemHref(currentApp)"
+                          t-esc="currentApp.name"
+                          class="'o_menu_brand d-none d-md-block'"
+                          dataset="{ menuXmlid: currentApp.xmlid, section: currentApp.id }"
+                          onSelected="() => this.onNavBarDropdownItemSelection(currentApp)"
+                  />
+              </div>
+
+              <!-- Current App Sections -->
+              <div class="d-none d-md-block">
+                  <t t-if="currentAppSections.length"
+                     t-call="web.NavBar.SectionsMenu">
+                    <t t-set="sections" t-value="currentAppSections"/>
+                  </t>
+              </div>
+              <div class="d-xs-block d-sm-block  d-md-none">
+                  <t t-call="web.NavBar.SectionsMenu.MoreDropdown">
+                      <t t-set="sections" t-value="currentAppSections"/>
+                  </t>
+              </div>
+        </div>
+          <!-- Systray -->
+          <div class="o_menu_systray d-flex" role="menu">
+          <t t-foreach="systrayItems" t-as="item" t-key="item_index">
+            <ErrorHandler onError="error => handleItemError(error, item)">
+                <t t-component="item.Component" t-props="item.props"/>
+            </ErrorHandler>
+          </t>
+        </div>
+      </nav>
+            <div class="sidebar_panel" id="sidebar_panel">
+                <div class="sidebar">
+                    <div class="sidebar_close">
+                        <a id="closeSidebar" style="cursor: pointer;">
+                            <img src="/code_backend_theme/static/src/img/icons/close.png"/>
+                        </a>
+                    </div>
+                     <div class="sidebar_logo">
+                        <img src="/code_backend_theme/static/src/img/code_logo.png" class="logo_img"/>
+                    </div>
+                    <h6 class="sidebar_head">MENU</h6>
+                    <ul class="sidebar_menu">
+                        <t t-foreach="menuService.getApps()" t-as="app" t-key="app_index">
+                            <li data-toggle="tooltip" data-placement="right" t-att-title="app.name">
+                                <a role="menuitem"
+                                   t-attf-href="#menu_id={{app.id}}"
+                                   class="nav-link">
+                                    <img class="sidebar_img"
+                                         t-attf-src="data:image/png;base64,{{app.webIconData}}"/>
+                                    <span class="sidebar_app_name">
+                                        <t t-esc="app.name"/>
+                                    </span>
+                                 </a>
+                            </li>
+                        </t>
+                    </ul>
+                </div>
+    </div>
+    </xpath>
+  </t>
+    <t t-inherit="web.NavBar.AppsMenu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//Dropdown" position="replace">
+            <li class="dropdown">
+                <a id="openSidebar" style="display: block; cursor: pointer;">
+                    <i class="fa fa-bars fa-lg"/>
+                </a>
+                <a id="closeSidebar" style="display: none; cursor: pointer;">
+                    <i class="fa fa-bars fa-lg"/>
+                </a>
+            </li>
+        </xpath>
+    </t>
+
+    <t t-inherit="web.UserMenu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//span[hasclass('oe_topbar_name')]" position="replace">
+            <div class="oe_topbar_name"/>
+        </xpath>
+    </t>
+</templates>