[ADD] Initial Commit

jazzy_backend_theme/README.rst

@@ -0,0 +1,40 @@
+Jazzy Backend Theme
+==================
+* Jazzy Backend Theme module for Odoo 15 community editions
+
+Installation
+============
+	- www.odoo.com/documentation/15.0/setup/install.html
+	- Install our custom addon
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.odoo.com/documentation/user/15.0/legal/licenses/licenses.html)
+
+Company
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Credits
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit https://www.cybrosys.com
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__
+

jazzy_backend_theme/__init__.py

@@ -0,0 +1 @@
+from . import models

jazzy_backend_theme/__manifest__.py

@@ -0,0 +1,61 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+{
+    "name": "Jazzy Backend Theme v15",
+    "description": """Minimalist and elegant backend theme for Odoo 15, Backend Theme, Theme""",
+    "summary": "Jazzy backed Theme V15 is an attractive theme for backend",
+    "category": "Theme/Backend",
+    "version": "15.0.1.0.0",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    "depends": ['base', 'web', 'mail'],
+    "data": [
+        'views/style.xml',
+        'views/res_config_settings.xml',
+    ],
+    'assets': {
+
+        'web.assets_backend': [
+                'jazzy_backend_theme/static/src/layout/style/login.scss',
+                'jazzy_backend_theme/static/src/layout/style/layout_colors.scss',
+                'jazzy_backend_theme/static/src/components/app_menu/menu_order.css',
+                'jazzy_backend_theme/static/src/layout/style/layout_style.scss',
+                'jazzy_backend_theme/static/src/layout/style/sidebar.scss',
+                'jazzy_backend_theme/static/src/components/app_menu/search_apps.js',
+        ],
+        'web.assets_qweb': [
+                'jazzy_backend_theme/static/src/components/app_menu/side_menu.xml',
+
+        ],
+    },
+    'images': [
+        'static/description/banner.png',
+        'static/description/theme_screenshot.png',
+    ],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': False,
+    'auto_install': False,
+}

jazzy_backend_theme/models/__init__.py

@@ -0,0 +1 @@
+from . import res_config_settings

jazzy_backend_theme/models/res_config_settings.py

@@ -0,0 +1,73 @@
+from odoo import models, fields
+
+
+class ResCompany(models.Model):
+    _inherit = 'res.company'
+
+    background_image = fields.Binary(string="Background Image", attachment=True)
+
+
+class ResConfigSettings(models.TransientModel):
+    _inherit = 'res.config.settings'
+
+    theme_background = fields.Binary(string="App menu Background",
+                                     related='company_id.background_image',
+                                     readonly=False)
+
+    app_bar_color = fields.Char(string='Appbar color',
+                                config_parameter='jazzy_backend_theme.appbar_color',
+                                default='#FFFFFF')
+    primary_accent = fields.Char(string="Navbar color",
+                                 config_parameter='jazzy_backend_theme.primary_accent_color',
+                                 default='#004589')
+    secondary_accent = fields.Char(string="Navbar color",
+                                   config_parameter='jazzy_backend_theme.secondary_color',
+                                   default='#0C4D9D')
+
+    kanban_bg_color = fields.Char(string="Kanban Bg Color",
+                                  config_parameter='jazzy_backend_theme.kanban_bg_color',
+                                  default='#F7F7F7')
+
+    primary_hover = fields.Char(string="Hover Primary Color",
+                                config_parameter='jazzy_backend_theme.primary_hover',
+                                default='#00376E')
+    light_hover = fields.Char(string="Light Hover",
+                              config_parameter='jazzy_backend_theme.light_hover',
+                              default='#ffffff')
+    appbar_text = fields.Char(string="Home Menu Text Color",
+                              config_parameter='jazzy_backend_theme.appbar_text',
+                              default='#F7F8F7')
+    secoundary_hover = fields.Char(string="AppBar Hover",
+                                   config_parameter='jazzy_backend_theme.secoundary_hover',
+                                   default='#F2F2F3')
+
+    def config_color_settings(self):
+        colors = {}
+        print("ppp", self.env.user.company_id.background_image)
+        colors['full_bg_img'] = self.env.user.company_id.background_image
+        colors['appbar_color'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.appbar_color');
+        colors['primary_accent'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.primary_accent_color');
+        colors['secondary_color'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.secondary_color');
+        colors['kanban_bg_color'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.kanban_bg_color');
+        colors['primary_hover'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.primary_hover');
+        colors['light_hover'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.light_hover');
+        colors['appbar_text'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.appbar_text');
+        colors['secoundary_hover'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.secoundary_hover');
+
+        return colors

jazzy_backend_theme/static/description/index.html

@@ -0,0 +1,513 @@
+<!-- HERO SECTION -->
+<div class="contianer">
+  <div class="row position-relative"
+    style="background-color: #191826 !important; height: 400px; margin-bottom: 6rem; border-radius: 1.5rem;">
+    <div class="col-lg-12 d-flex flex-column justify-content-start align-items-center">
+      <h1 class="display-1 text-white" style="padding-top: 5rem;">Jazzy Backend Theme</h1>
+      <p class="text-light small font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase;">Clean
+        &amp;Minimal Backend Theme for Odoo 15</p>
+    </div>
+    <img src="./images/hero.png" class="img img-fluid"
+      style="height: auto; width: 525px; top: 45%; left: 0; right: 0; margin-left: auto; margin-right: auto;"
+      height="auto" width="525px">
+  </div>
+</div>
+<!-- END OF HERO SECTION -->
+<!-- SHORT DESCRIPTION -->
+<div class="container">
+  <div class="row my-4">
+    <div class="col-lg-12 d-flex justify-content-center align-items-center">
+      <h6 class="text-muted text-center w-50" style="line-height: 22px;">The app provides a user friendly backend
+        theme for Odoo 15.0 community edition.</h6>
+    </div>
+  </div>
+</div>
+<!-- END OF SHORT DESCRIPTION -->
+<!-- FEATURE ICONS -->
+<div class="container w-50" style="margin: 3rem auto;">
+  <div class="row">
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5 ; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/design.png">
+      </div>
+      <h6 class="my-4 text-center">Well-Crafted</h6>
+    </div>
+
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/responsive.png">
+      </div>
+      <h6 class="my-4 text-center">Efficent Design</h6>
+    </div>
+
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/quality.png">
+      </div>
+      <h6 class="my-4 text-center">Clearer insight</h6>
+    </div>
+  </div>
+</div>
+<!-- END OF FEATURE ICONS -->
+
+<!-- ONE COLUMN SECTION-->
+<div class="container" style="margin: 3rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center mt-3 display-4 text-weight-bold">App Menu</h2>
+      <p class="text-center lead text-muted mb-4">The App Menu is the main attraction of the Jazzy backend theme. It has a fully responsive layout with a new highlighted color combination and a more modern interface for all applications. Moreover, the Jazzy backend theme improves your experience with Odoo, providing you with a fully customizable background image, Navbar color, and many more.</p>
+      <div class="row">
+        <div class="col-lg-8">
+          <img height="600px" width="auto" src="./images/desktop.gif" class="img img-fluid deep-4 rounded">
+        </div>
+        <div class="col-lg-4">
+          <img src="./images/mobile_view.gif" class="img img-fluid deep-4 rounded">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END OF ONE COLUMN SECTION-->
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e ">Theme
+        Settings</span>
+      <h2 class="mt-3">Jazzy Backend Theme Settings</h2>
+      <p class="lead text-muted mb-4">To improve your experience with Odoo the Jazzy backend theme provides a fully
+        configurable theme settings menu.</p>
+      <img src="./assets/settings_customisation.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Custom
+        AppBar</span>
+      <h2 class="mt-3">AppBar</h2>
+      <p class="lead text-muted mb-4">Easly accessible side bar where it reveals the side bar menu on just a click. Moreover, its also
+        fully customisable with Jazzy backend theme.</p>
+      <img src="./images/app_bar.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<!-- END OF TWO COLUMN SECTION-->
+
+<!-- RESPONSIVE SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-5 d-flex flex-column justify-content-center align-items-start">
+      <img src="./images/responsive.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+    <div class="col-lg-7 d-flex flex-column justify-content-center">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Responsive
+        Layout</span>
+      <h2 class="mt-3">Truly Responsive</h2>
+      <p class="lead text-muted mb-4">One of the critical highlights of the Jazzy backend theme is that it was genuinely responsive; moreover, it provides an efficient interface to manage a mobile device.</p>
+    </div>
+  </div>
+
+</div>
+<!-- END OF RESPONSIVE SECTION-->
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Custom
+        Kanban View</span>
+      <h2 class="mt-3">Kanban view</h2>
+      <p class="lead text-muted mb-4">Jazzy Backend Theme gives a colorful & elegant kanban view, and it's fully customizable with this theme.</p>
+      <img src="./images/kanban.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Search
+        Option</span>
+      <h2 class="mt-3">Advanced Searching for App Menus</h2>
+      <p class="lead text-muted mb-4">Jazzy Backend Theme gives a more complex and powerful search than standard search, providing search options like enterprise edition.</p>
+      <img src="./images/search.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <span>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">
+        Form View</span>
+      <h2 class="mt-3">Custom Form view</h2>
+      <p class="lead text-muted mb-4">Jazzy Backend theme provides a fully modified and colorful form view with the full view
+        experience.</p>
+      <img src="./images/sale_kanban.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Vibrent
+        ui</span>
+      <h2 class="mt-3">Attractive Customizable User Interface</h2>
+      <p class="lead text-muted mb-4">It provides fully attractive, and a elgant User Interface with completely customizability.</p>
+      <img src="./images/event.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<!-- MOBILE -->
+<div class="container" style="margin: 6rem auto;">
+  <span>
+    <strong>
+      Mobile
+    </strong>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">
+        Kanban View</span>
+      <h2 class="mt-3">Responsive kanban view</h2>
+      <p class="lead text-muted mb-4">It gives a fully responsive kanban view in Mobile view, which is also fully customizable in the Jazzy Backend theme.</p>
+      <img src="./images/mobile_kanban.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Form
+        View</span>
+      <h2 class="mt-3">Visualized form view</h2>
+      <p class="lead text-muted mb-4">It puts forward a fully visualized form view with colorful and attractive aspects which the user can customize. </p>
+      <img src="./images/mobile_form.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<div class="container" style="margin: 6rem auto;">
+  <span>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">
+        List view</span>
+      <h2 class="mt-3">Modified Tree view</h2>
+      <p class="lead text-muted mb-4">Jazzy Backend Theme provides fully modified list view and amazing table designs
+        with stunning look outputs.</p>
+      <img src="./images/mobile_lost.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold"
+        style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">settings</span>
+      <h2 class="mt-3">Fully Redesigned Settings</h2>
+      <p class="lead text-muted mb-4">Mobile friendly and Redesigned settings with stylish view.</p>
+      <img src="./images/mobile_settings.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<div class="container" style="margin: 6rem auto;">
+  <span>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">
+        Employe module</span>
+      <h2 class="mt-3">Modified Form view for employees</h2>
+      <p class="lead text-muted mb-4">It provides the Employees with a form view with redesigned and various modified features.
+      </p>
+      <img src="./images/employe.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Search
+        View</span>
+      <h2 class="mt-3">Ultra Modern Search view</h2>
+      <p class="lead text-muted mb-4">It has an advanced search view with a highly modified search option for easy usage and an improved experience with Odoo.</p>
+      <img src="./images/mobile_search.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+
+
+
+
+
+<!-- END OF TWO COLUMN SECTION-->
+
+<!-- OUR SERVICES -->
+<section class="container" style="margin-top: 6rem !important;">
+  <div class="row">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Our Services</h2>
+      <p class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        We provide following services</p>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Customization</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Implementation</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Support</h6>
+    </div>
+
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Hire
+        Odoo
+        Developer</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Integration</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Migration</h6>
+    </div>
+
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Consultancy</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Implementation</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Licensing Consultancy</h6>
+    </div>
+  </div>
+</section>
+<!-- END OF END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+<section class="container" style="margin-top: 6rem !important;">
+  <div class="row">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Our Industries</h2>
+      <p class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        Our industry specifics and process segments to solve your complex business barriers.</p>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Trading
+        </h5>
+        <p style="font-size: 0.9rem !important;">Easily procure
+          and
+          sell your products</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          POS
+        </h5>
+        <p style="font-size: 0.9rem !important;">Easy
+          configuration
+          and convivial experience</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Education
+        </h5>
+        <p style="font-size: 0.9rem !important;">A platform for
+          educational management</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Manufacturing
+        </h5>
+        <p style="font-size: 0.9rem !important;">Plan, track and
+          schedule your operations</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          E-commerce &amp; Website
+        </h5>
+        <p style="font-size: 0.9rem !important;">Mobile
+          friendly,
+          awe-inspiring product pages</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Service Management
+        </h5>
+        <p style="font-size: 0.9rem !important;">Keep track of
+          services and invoice</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Restaurant
+        </h5>
+        <p style="font-size: 0.9rem !important;">Run your bar or
+          restaurant methodically</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Hotel Management
+        </h5>
+        <p style="font-size: 0.9rem !important;">An
+          all-inclusive
+          hotel management application</p>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<!-- END OF END OF OUR INDUSTRIES -->
+
+<!-- FOOTER -->
+<!-- Footer Section -->
+<section class="container" style="margin: 5rem auto 2rem;">
+  <div class="row" style="max-width:1540px;">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Need Help?</h2>
+      <p class="text-center"
+        style="color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        Do you have any queries regarding our products &amp; services? Let us know.</p>
+    </div>
+  </div>
+
+  <!-- Contact Cards -->
+  <div class="row d-flex justify-content-center align-items-center" style="max-width:1540px; margin: 0 auto 2rem auto;">
+
+    <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+      <div class="row mt-4">
+        <div class="col-lg-6">
+          <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+            style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+              class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+        </div>
+        <div class="col-lg-6">
+          <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+            class="btn btn-block mb-2 deep_hover"
+            style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+              class="fa fa-whatsapp mr-2"></i>+91 86068 27707</a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <!-- End of Contact Cards -->
+</section>
+<!-- Footer -->
+<section class="oe_container" style="padding: 2rem 3rem 1rem;">
+  <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+    <!-- Logo -->
+    <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+      <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+    </div>
+    <!-- End of Logo -->
+    <div class="col-lg-12">
+      <hr
+        style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
+      <!-- End of Footer Section -->
+    </div>
+  </div>
+
+  <!-- END OF FOOTER -->

jazzy_backend_theme/static/src/components/app_menu/menu_order.css

@@ -0,0 +1,113 @@
+.nav-container {
+
+    float: left;
+    position: relative;
+    width: 99vw;
+    height: 100%;
+    background: #fff;
+    display: flex;
+    justify-content: start;
+    align-items: start;
+    padding: 0px 20rem;
+    margin-top: 2rem;
+
+}
+/*.search-results {
+    float: left;
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 20rem;
+}*/
+.o_main_navbar .dropdown-menu .show {
+    max-height: auto !important;
+    min-width: 100%;
+    overflow: auto;
+    margin-top: 0;
+    position: static;
+    top: 0;
+    display: flex;
+    box-shadow: none;
+    border: none;
+    flex-wrap: wrap;
+    flex-direction: row;
+    overflow: unset;
+}
+.dropdown-item.o_app.mt0 {
+    flex-basis: 20%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 23px;
+}
+.o_setting_search {
+                position: relative;
+
+                .searchInput {
+                    height: 28px;
+                    padding: 0px;
+                    border: 0px;
+                    border-dropdown-item bottom: 1px solid gray('400');
+                    border-color: gray('700');
+                    box-shadow: none;
+                    font-weight: 500;
+                }
+
+                .searchIcon {
+                    @include o-position-absolute(4px, 0);
+                    color: gray('700');
+                }
+            }
+            .search-container.has-results {
+                height: 100%;
+
+                .search-input {
+                    height: 3em;
+                }
+
+                .search-results {
+                    height: calc(100% - 3em);
+                    overflow: auto;
+                }
+            }
+
+.app-menu {
+
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+
+}
+.o_main_navbar .dropdown-menu.show {
+    max-height: none !important;
+    min-width: 100%;
+    overflow: auto;
+    margin-top: 0;
+}
+.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+
+    background-repeat: no-repeat;
+    background-size: 100%;
+    padding-left: 30%;
+    margin-bottom: 5%;
+
+}
+@media (max-width: 1371px){
+
+}
+
+@media (max-width:992px) {
+
+}
+
+@media (max-width:400px) {
+
+
+
+
+}

jazzy_backend_theme/static/src/components/app_menu/search_apps.js

@@ -0,0 +1,122 @@
+/** @odoo-module */
+
+import { NavBar } from "@web/webclient/navbar/navbar";
+import { registry } from "@web/core/registry";
+const { fuzzyLookup } = require('@web/core/utils/search');
+import { computeAppsAndMenuItems } from "@web/webclient/menus/menu_helpers";
+import core from 'web.core';
+
+const commandProviderRegistry = registry.category("command_provider");
+
+import { patch } from 'web.utils';
+var rpc = require('web.rpc');
+patch(NavBar.prototype, 'jazzy_backend_theme/static/src/js/appMenu.js', {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+     setup() {
+        this._super();
+        this._search_def = $.Deferred();
+        let { apps, menuItems } = computeAppsAndMenuItems(this.menuService.getMenuAsTree("root"));
+        this._apps = apps;
+        this._searchableMenus = menuItems;
+        this.colors = this.fetch_data();
+    },
+    fetch_data: function() {
+        var self = this;
+        rpc.query({model: 'res.config.settings',method: 'config_color_settings',args: [0],}).then(function(result){
+            self.colors = result;
+            console.log("$$$",result);
+            if (result.primary_accent !== false){
+                document.documentElement.style.setProperty("--primary-accent",result.primary_accent);
+            }
+            if (result.appbar_color !== false){
+                document.documentElement.style.setProperty("--app-bar-accent",result.appbar_color);}
+            if (result.primary_hover !== false){
+                document.documentElement.style.setProperty("--primary-hover",result.primary_hover);}
+            if (result.secondary_color !== false){
+                document.documentElement.style.setProperty("--primary-accent-border",result.secondary_color);}
+            if (result.full_bg_img !== false){
+                document.documentElement.style.setProperty("--full-screen-bg",'url(data:image/png;base64,'+result.full_bg_img+')');
+
+            }
+            if (result.appbar_text !== false){
+                document.documentElement.style.setProperty("--app-menu-font-color",result.appbar_text);}
+            if (result.secoundary_hover !== false){
+                document.documentElement.style.setProperty("--secoundary-hover",result.secoundary_hover);}
+            if (result.kanban_bg_color !== false){
+                document.documentElement.style.setProperty("--kanban-bg-color",result.kanban_bg_color);}
+        });
+    },
+
+    mounted() {
+        this._super();
+        this.$search_container = $(".search-container");
+        this.$search_input = $(".search-input input");
+        this.$search_results = $(".search-results");
+        this.$app_menu = $(".app-menu");
+        this.$dropdown_menu = $(".dropdown-menu");
+    },
+
+     _searchMenusSchedule: function () {
+        this.$search_results.removeClass("o_hidden")
+        this.$app_menu.addClass("o_hidden");
+        this._search_def.reject();
+        this._search_def = $.Deferred();
+        setTimeout(this._search_def.resolve.bind(this._search_def), 50);
+        this._search_def.done(this._searchMenus.bind(this));
+    },
+
+    _searchMenus: function () {
+        var query = this.$search_input.val();
+        if (query === "") {
+            this.$search_container.removeClass("has-results");
+            this.$app_menu.removeClass("o_hidden");
+            this.$search_results.empty();
+            return;
+        }
+        var results = [];
+
+        fuzzyLookup(query, this._apps, (menu) => menu.label)
+        .forEach((menu) => {
+            results.push({
+                category: "apps",
+                name: menu.label,
+                actionID: menu.actionID,
+                id: menu.id,
+                webIconData: menu.webIconData,
+            });
+        });
+
+        fuzzyLookup(query, this._searchableMenus, (menu) =>
+            (menu.parents + " / " + menu.label).split("/").reverse().join("/")
+        ).forEach((menu) => {
+            results.push({
+                category: "menu_items",
+                name: menu.parents + " / " + menu.label,
+                actionID: menu.actionID,
+                id: menu.id,
+            });
+        });
+
+        this.$search_container.toggleClass(
+            "has-results",
+            Boolean(results.length)
+        );
+        this.$search_results.html(
+            core.qweb.render(
+                "jazzy_backend_theme.SearchResults",
+                {
+                    results: results,
+                    widget: this,
+                }
+            )
+        );
+    },
+
+});

jazzy_backend_theme/static/src/components/app_menu/side_menu.xml

@@ -0,0 +1,88 @@
+<templates id="template" xml:space="preserve">
+    <t t-inherit="web.NavBar.AppsMenu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//Dropdown[hasclass('o_navbar_apps_menu')]"
+               position="replace">
+            <li class="dropdown d-flex justify-content-center align-items-center">
+                <a class="full" data-toggle="dropdown" data-display="static"
+                   href="#">
+                    <i class="fa fa-th-large"
+                       style="font-size: 18px !important; color: white; margin-top: 3px;"/>
+                </a>
+                <div class="dropdown-menu fullscreen-menu" role="menu">
+                        <div class="search-container form-row align-items-center m-auto mb-5 col-12">
+                            <div class="search-input col-md-10 ml-auto mr-auto mb-5"
+                                 t-on-input="_searchMenusSchedule">
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <div class="input-group-text">
+                                                <i class="fa fa-search"/>
+                                            </div>
+                                        </div>
+                                        <input type="search"
+                                               autocomplete="off"
+                                               placeholder="Search menus..."
+                                               class="form-control"/>
+                                    </div>
+                                </div>
+                            <div class="search-results col-md-10 ml-auto mr-auto"/>
+                        </div>
+
+                    <div class="nav-container">
+                            <div class="app-menu">
+                                <t t-foreach="menuService.getApps()" t-as="app">
+                                    <a role="menuitem"
+                                       t-attf-href="#menu_id={{app.id}}"
+                                       class="dropdown-item o_app mt0"
+                                       t-att-data-menu-id="app.menuID"
+                                       t-att-data-menu-xmlid="app.xmlID"
+                                       t-att-data-action-id="app.actionID">
+                                        <img t-att-title="app.name"
+                                             style="width: 70px !important;height: 70px !important;border-radius: 10px !important;margin: 5px 5px 5px 5px;"
+                                             t-attf-src="data:image/png;base64,{{app.webIconData}}"/>
+                                        <b class="a_app_menu_title"><t t-esc="app.name"/></b>
+                                    </a>
+                                </t>
+                            </div>
+                        </div>
+                    </div>
+            </li>
+
+        </xpath>
+    </t>
+    <t t-name="jazzy_backend_theme.SearchResults">
+        <t t-foreach="results" t-as="result">
+            <div class="search_icons">
+            <a t-attf-class="o-menu-search-result dropdown-item col-12 ml-auto mr-auto #{result_first ? 'active' : ''}"
+               t-attf-style="background-image:url('data:image/png;base64,#{result.webIconData}')"
+               t-attf-href="#menu_id=#{result.id}&amp;action_id=#{result.actionID}"
+               t-att-data-menu-id="result.id"
+               t-att-data-action-id="result.actionID"
+               t-raw="result.name"
+               onclick="$('.dropdown-menu').removeClass('show'); $('.search-results').addClass('o_hidden'); $('.app-menu').removeClass('o_hidden'); $('.search-input input').val('');"/>
+            </div>
+        </t>
+    </t>
+
+    <t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1">
+        <xpath expr="//nav[hasclass('o_main_navbar')]" position="after">
+
+    <div class="sidebar_panel" id="sidebar_panel">
+        <div class="sidebar">
+            <ul class="sidebar_menu">
+	            <t t-foreach="menuService.getApps()" t-as="app">
+		            <li>
+		            	<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}}"/>
+		            	 </a>
+		            </li>
+		    	</t>
+	        </ul>
+	    </div>
+    </div>
+    </xpath>
+  </t>
+
+</templates>

jazzy_backend_theme/static/src/layout/style/color.css

@@ -0,0 +1,14 @@
+:root{
+    --primary_accent: black !default;
+    --secondary_accent: #ffffff !default;
+    --inverse_accent: #ffffff !default;
+    --kanban-bg-color:#f7f7f7;
+    --o-kanban-color-border-width: 8px;
+    --selected_row: #ffffff !default;
+    --bg_white: #ffffff !default;
+    --f_color: #555b6d !default;
+    --color_white : #ffffff !default;
+    --primary_hover: #00376e !default;
+    --light_hover: #d5d5d5;
+    --fullscreen-bg-color: #C5F0FC !important;
+}

jazzy_backend_theme/static/src/layout/style/layout_colors.scss

@@ -0,0 +1,33 @@
+$primary_accent: var(--primary-accent) !important;
+$secondary_accent: var(--secondary-accent) !important;
+$inverse_accent: var(--inverse-accent) !important;
+$kanban-bg-color:var(--kanban-bg-color) !important;
+$o-kanban-color-border-width: var(--o-kanban-color-border-width) !important;
+$selected_row: var(--selected-row) !important;
+$bg_white: var(--bg-white) !important;
+$f_color: var(--f-color) !important;
+$color_white : var(--color-white) !important;
+$primary_hover: var(--primary-hover) !important;
+$light_hover: var(--light-hover) !important;
+
+$fullscreen-bg-color: var(--fullscreen-bg-color) !important;
+
+
+:root{
+    --primary-accent: #004589 ;
+    --primary-accent-border: #ffffff;
+    --app-bar-accent: #ffffff;
+    --full-screen-bg: url(/jazzy_backend_theme/static/description/assets/background.jpg) ;
+
+    --kanban-bg-color:#f7f7f7;
+    --o-kanban-color-border-width: 8px !important;
+    --selected-row: #ffffff !important;
+    --app-menu-font-color:#ffffff;
+    --bg-white: #ffffff !important;
+    --f-color: #555b6d !important;
+    --color-white : #ffffff !important;
+    --primary-hover: #00376e;
+    --light-hover: #d5d5d5 ;
+    --secoundary-hover:#ffffff;
+    --fullscreen-bg-color: #C5F0FC !important;
+}

jazzy_backend_theme/static/src/layout/style/layout_style.scss

@@ -0,0 +1,684 @@
+.bg-primary{
+    background-color: var(--primary-accent) !important;
+}
+.o_field_widget.o_field_many2one .o_external_button {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+    padding-left:1%;
+    padding-right:0.5%;
+
+    margin-left: 2px;
+    font-size: 19px;
+    color: #7C7BAD;
+    border: none;
+}
+
+.app_bar .app_container a:hover{
+    background:var(--secoundary-hover) !important;
+}
+
+.fullscreen-menu{
+    height: calc(100vh - 46px);
+    background: var(--full-screen-bg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    min-width: 100%;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    margin-top: 0;
+    position: fixed;
+    top: 46px;
+    left: -1px;
+    padding: 2.5rem 0;
+}
+.a_app_menu_title{
+    color: var(--app-menu-font-color) !important;
+}
+.o_main_navbar{
+    background-color:var(--primary-accent) !important;
+    border-bottom: 1px solid var(--primary-hover) !important;
+}
+.dropdown-toggle {
+    &:hover{
+        background: var(--primary-hover) !important;
+    }
+}
+
+.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+
+    background-repeat: no-repeat;
+    background-size: 23px;
+    padding-left: 40px;
+    margin-bottom: 5px;
+
+}
+
+//Top bar
+//icon color
+.o_searchview .o_searchview_facet .o_searchview_facet_label {
+    background-color: var(--primary-accent) !important;
+}
+.btn-secondary {
+    color: #fff !important;
+    background-color: var(--primary-accent) !important;
+    border-color: var(--primary-accent) !important;
+    margin:0 5px 0 0;
+    &:hover{
+        background-color: var(--primary-hover) !important;
+    }
+}
+
+.o_searchview {
+    background-color: var(--bg-white) !important;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 1px 25px 3px 5px;
+}
+.o_searchview .o_searchview_input_container {
+    display: flex;
+    flex-flow: row wrap;
+    position: relative;
+    border-radius: 10px;
+}
+.o_searchview .o_searchview_input_container .o_searchview_facet {
+    display: flex;
+    -webkit-box-flex: 0;
+    flex: 0 0 auto;
+    margin: 1px 3px 0 0;
+    max-width: 100%;
+    border-radius: 10px;
+    position: relative;
+}
+.o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label {
+    align-items: center;
+    color: var(--bg-white) !important;
+    -webkit-box-flex: 0;
+    flex: 0 0 auto;
+    padding: 0 3px;
+    border-radius: 10px;
+    display: flex;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+//module icon
+.oe_module_icon {
+    width: 70px;
+    max-height: 70px;
+    max-width: 23%;
+    float: left;
+    border-radius: 10px;
+}
+
+.o_base_settings .o_setting_container .settings_tab .selected{
+    background-color: var(--primary-hover);
+}
+
+
+.app_bar .app_container .scroll_container .app_items_wrapper .app_items{
+    background-color:var(--app-bar-accent);
+}
+.app_bar .app_container .scroll_container .app_items_wrapper .app_items .o-app-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 5px;
+
+}
+
+//photo
+.o_kanban_view .o_kanban_record.o_kanban_record_has_image_fill .o_kanban_image_fill_left {
+    margin-top: -8px;
+    margin-bottom: -8px;
+    margin-left: -8px;
+    border-radius: 10px;
+}
+
+//drowpdowm
+.o-dropdown.dropup > .o-dropdown--menu, .o-dropdown.dropdown > .o-dropdown--menu, .o-dropdown.dropleft > .o-dropdown--menu, .o-dropdown.dropright > .o-dropdown--menu {
+    left: auto;
+    right: auto;
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 10px;
+}
+
+
+//kanban
+.o_kanban_view.o_kanban_grouped .o_kanban_record, .o_kanban_view.o_kanban_grouped .o_kanban_quick_create {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 10px;
+}
+.o_kanban_view.o_kanban_ungrouped .o_kanban_record {
+    -webkit-box-flex: 1;
+    flex: 1 1 auto;
+    width: 300px;
+    margin: 4px 8px;
+    border-radius: 10px;
+}
+
+.o_kanban_view .o_column_quick_create .o_quick_create_folded .o_kanban_add_column {
+    margin-right: 8px;
+    display: inline-block;
+    padding: 10px 14px;
+    background-color: rgba(73, 80, 87, 0.1);
+    border-radius: 10px;
+}
+.o_kanban_view .o_kanban_record.o_kanban_record_has_image_fill .o_kanban_image_fill_left .o_kanban_image_inner_pic, .o_kanban_view .o_kanban_record.o_kanban_record_has_image_fill .o_kanban_image .o_kanban_image_inner_pic {
+    position: absolute;
+    top: auto;
+    left: auto;
+    bottom: 0;
+    right: 0;
+    max-height: 25px;
+    max-width: 80%;
+    background: var(--bg-white) !important;
+    box-shadow: -1px -1px 0 1px var(--bg-white) !important;
+    border-radius: 10px;
+    margin: 5px;
+}
+.o_purchase_dashboard .table > thead > tr > td, .o_purchase_dashboard .table tbody > tr > td {
+    text-align: center;
+    width: 25%;
+    height: 33px;
+    vertical-align: middle;
+    border-top: 1px solid var(--bg-white) !important;
+    background-color: #f9f9f5;
+    border-radius: 10px;
+}
+.o_kanban_view.o_kanban_ungrouped {
+    min-height: 100%;
+    align-content: flex-start;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    padding: 8px 8px;
+    background-color: var(--kanban-bg-color) !important;
+}
+
+
+//chatter
+.o_Message.o-not-discussion {
+    background-color: #f8f9fa;
+    border-radius: 10px;
+}
+
+
+//field dropdown
+.o_settings_container .o_setting_box .o_setting_right_pane .o_field_widget {
+    width: 50%;
+    -webkit-box-flex: 0;
+    flex: 0 0 auto;
+    border-radius: 10px;
+}
+.o_settings_container .o_setting_box .o_setting_right_pane .o_input_dropdown > .o_input {
+    width: 100%;
+    border-radius: 10px;
+}
+//form input
+//required
+
+.o_form_view .o_form_uri > span:first-child{
+    color:var(--primary-accent) !important;
+}
+.o_form_view .oe_button_box .btn.oe_stat_button > .o_stat_info .o_stat_value, .o_form_view .oe_button_box .btn.oe_stat_button > span .o_stat_value
+{
+    color:var(--primary-accent) !important;
+}
+
+.o_field_widget .o_input_dropdown > input {
+    cursor: pointer;
+    border-radius: 10px;
+}
+.o_field_widget .o_input_dropdown > input, .o_field_widget.o_datepicker > input {
+    padding-right: 14px;
+    border-radius: 10px;
+}
+.o_form_view .o_group .o_field_widget {
+    width: 100%;
+    border-radius: 10px;
+}
+
+.oe_form_field_html .note-editable {
+    font: inherit !important;
+    font-family: inherit !important;
+    line-height: inherit !important;
+    color: inherit !important;
+    border-radius: 10px;
+}
+
+.o_form_view .oe_avatar > img {
+    max-width: 90px;
+    max-height: 90px;
+    vertical-align: top;
+    border: 1px solid #dee2e6;
+    border-radius: 10px;
+}
+
+.o_form_view .o_form_statusbar > .o_field_widget {
+    align-self: center;
+    margin-bottom: 0px;
+    border-radius: 10px;
+
+}
+//settings
+.settings_tab {
+	background-color: var(--primary-accent) !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;
+    border-radius: 5px;
+}
+//satusbar
+.btn-warning:active,
+button[name="action_uninstall"]:active {
+    color: #fff !important;
+    background-color: #c1903d !important;
+    border-color: #b58739 !important;
+}
+
+
+
+.btn-warning:focus,
+button[name="action_uninstall"]:focus {
+    color: #fff !important;
+    background-color: #cd9941 !important;
+    border-color: #c1903d !important;
+    -webkit-box-shadow: 0 0 0 0.15rem rgba(243,191,103,.50) !important;
+    box-shadow: 0 0 0 0.15rem rgba(243,191,1,.50) !important;
+}
+.btn-fill-secondary.disabled, .disabled.btn-secondary, .btn-fill-secondary:disabled, .btn-secondary:disabled {
+    color: #212529 !important;
+    background-color: #fff !important;
+    border-color: #fff !important;
+}
+
+
+
+.o_statusbar_status .o_arrow_button.btn-secondary {
+    /*border: solid 1px var(--primary-accent) !important;*/
+    /*color: var(--primary-accent) !important;*/
+    background-color: #fff ;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child):before {
+    right: -11px;
+    border-left-color:var(--primary-accent) !important;
+}
+
+
+.o_statusbar_status .o_arrow_button.btn-secondary:hover:after {
+    border-color: #fff !important;
+}
+.o_statusbar_status .o_arrow_button.btn-primary {
+    border: solid 1px var(--primary-accent-border);
+    color: #fff !important;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled {
+    background-color: var(--primary-accent) !important;
+    color: #fff;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled:after, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled:before {
+    border-left-color: var(--primary-accent) !important;
+}
+
+
+//Avathar pic
+
+.rounded-circle, .o_status, .o_calendar_invitation, .o_status_bubble, .o_Activity_detailsUserAvatar, .o_Activity_userAvatar {
+    border-radius: 10% !important;
+}
+
+.btn-fill-primary:hover, .btn-primary:hover, .btn-primary:hover,
+.btn-fill-primary:focus, .btn-primary:focus, .btn-primary:focus,
+.btn-fill-primary:active, .btn-primary:active, .btn-primary:active
+{
+    background:var(--primary-accent) !important;
+    border-color:var(--primary-accent) !important;
+}
+
+//chat
+
+.o_ChatWindowHeader {
+    background-color: var(--primary-accent) !important;
+}
+.o_ChatWindow_newMessageFormInput {
+    outline: none;
+    border: 1px solid #dee2e6;
+    border-radius: 10px;
+}
+//a
+a {
+    color: var(--primary-accent);
+    text-decoration: none;
+}
+
+//buttons
+.btn-fill-primary, .btn-primary{
+    background-color:var(--primary-accent) !important;
+    border: none;
+    &:hover{
+        background: var(--primary-hover);
+        color: #fff !important;
+    }
+}
+.btn-primary {
+    color: #fff;
+    background-color: var(--primary-accent) !important;
+    border-color: var(--primary-accent) !important;
+    margin:0 5px 0 0;
+}
+.btn-link {
+    font-weight: 400;
+    color: var(--primary-accent) !important;
+    text-decoration: none;
+}
+.btn-link:hover {
+    color: var(--primary-hover);
+    text-decoration: none;
+}
+.btn-light{
+    &:hover{
+        background-color: var(--light-hover) !important;
+    }
+}
+.o_form_view .oe_button_box .btn.oe_stat_button {
+    color: var(--primary-accent) !important;
+    height: 44px;
+    padding: 0 6px 0 0 !important;
+    text-align: left;
+    white-space: nowrap;
+    background-color: transparent;
+    opacity: 0.8;
+    border-radius: 0px;
+    margin-bottom: 0;
+}
+.o_dashboards .o_website_dashboard div.o_box {
+    color: rgba(73, 80, 87, 0.76);
+    background-color: white;
+    background-size: cover;
+    margin-top: 16px;
+    position: static;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+}
+
+//button
+.custom-control-input:checked ~ .custom-control-label::before {
+    color: #fff;
+    border-color: var(--primary-accent) !important;
+    background-color: var(--primary-accent) !important;
+}
+
+//current date calender
+.o_calendar_view .o_calendar_widget .fc-timeGridDay-view .fc-widget-header.fc-today, .o_calendar_view .o_calendar_widget .fc-timeGridWeek-view .fc-widget-header.fc-today {
+    border-radius: 25px;
+    background: var(--primary-accent) !important;
+    color: var(--bg-white) !important;
+}
+// Tabs Start
+.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
+    border: none;
+    border-bottom: solid;
+    font-weight: bold;
+    background: var(--primary-accent) !important;
+    color: var(--bg-white) !important;
+    border-radius: 5px,50px,5px,50px;
+}
+//website
+.o_dashboards .o_website_dashboard .o_dashboard_common .o_inner_box {
+    padding-top: 10px;
+    text-align: center;
+    border: 1px solid var(--bg-white) !important;
+    height: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    color: var(--color-white) !important;
+    background-color: var(--primary-accent) !important;
+    border-radius:10px;
+
+    &:hover{
+        background-color: var(--primary-hover) !important;
+    }
+}
+.o_purchase_dashboard .table > thead > tr > td.o_main, .o_purchase_dashboard .table tbody > tr > td.o_main {
+    background-color: var(--primary-accent) !important;
+    border-radius:10px;
+}
+
+.dropdown-menu.show {
+    display: block;
+    border-radius: 0;
+
+}
+
+.o_mail_preview .o_mail_preview_image.o_mail_preview_app > img {
+    border-radius: 10px;
+}
+
+//Graph
+.o_calendar_view .fc-view .fc-event.o_calendar_color_3:not(.o_calendar_hatched):not(.o_calendar_striked) {
+    background: var(--primary-hover) !important;
+    border-radius: 10px;
+}
+
+//Event
+.text-center {
+    text-align: center !important;
+    border-radius: 10px;
+}
+
+//form control icons
+.o_form_view .oe_button_box .oe_stat_button .o_button_icon {
+    color: var(--primary-accent) !important;
+}
+//.o_required_modifier.o_input, .o_required_modifier .o_input {
+//    background-color: var(--primary-accent) !important;
+//}
+
+//small icons
+.o_search_panel .o_search_panel_category .o_search_panel_section_icon {
+    color: var(--primary-accent) !important;
+}
+.badge-primary {
+    color: var(--color-white) !important;
+    background-color: var(--primary-accent) !important;
+}
+//wizard
+.modal.o_technical_modal .modal-content {
+    border-radius: 10px;
+}
+//Navbar
+.nav-container{
+    height: auto !important;
+    background: transparent !important;
+    float: none !important;
+    padding: 0 !important;
+    width: 850px !important;
+    margin: 0 auto !important;
+}
+.o_nav_entry{
+    &:hover{
+        background-color: var(--primary-hover) !important;
+    }
+}
+ .app-menu{
+     width: 100%;
+     display: flex;
+     flex-wrap: wrap;
+     justify-content: flex-start;
+     margin: 0 auto;
+
+}
+//Responsive
+.o_MobileMessagingNavbar_tab.o-active{
+    color: var(--primary-accent) !important;
+}
+@media (max-width: 768px){
+    .app-menu{
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        justify-content: flex-start;
+        margin: 0 auto;
+        }
+    .o_cp_bottom{
+        flex-wrap: wrap !important;
+    }
+    .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled {
+
+        margin-right: 10px;
+    }
+    .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary), .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary):hover, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary):focus
+    {
+    margin-left:10px;
+    }
+    .o_form_view .o_form_statusbar > .o_field_widget {
+        margin-left: -24px !important;
+        margin-top: 1px !important;
+    }
+    .o_form_view .o_form_statusbar{
+        flex-direction: column !important;
+        padding-left: 0px !important;
+    }
+}
+@media (min-width: 768px){
+    .o_form_view .o_form_sheet_bg > .o_form_sheet {
+        margin: 12px auto;
+        border-radius: 10px;
+    }
+
+    .search-container{
+        width: 750px;
+        margin: 0 auto;
+    }
+
+}
+
+@media (max-width:767px){
+
+    .o_form_view .o_group{
+        width:100% !important;
+    }
+
+    .dropdown-menu.show {
+        display: block;
+        border-radius:0;
+    }
+    .o_control_panel .breadcrumb > li {
+    display: inline-block;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    }
+    .o_control_panel .o_cp_top_right {
+        min-height: 30px;
+        max-width: 100%;
+        margin-left: 10%;
+    }
+    .o_form_view .o_form_sheet_bg > .o_form_sheet {
+        min-width: 100%;
+        max-width: 100%;
+        min-height: 100%;
+        border: 1px solid #c8c8d3;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        background: white;
+        margin: 4.8px auto;
+        padding: 24px;
+        padding-right: 16px;
+        padding-left: 16px;
+    }
+    .oe_topbar_name{
+        display:none;
+    }
+
+    .nav-container {
+    /*float: left;*/
+    position: relative;
+    width: 100vw !important;
+    /*height: 100%;*/
+    /*background: #fff;*/
+    display: flex;
+    /* justify-content: start; */
+    align-items: start;
+    margin-top: 2rem;
+    }
+
+    .o_cp_top{
+        flex-wrap: wrap !important;
+    }
+    .o_cp_top_left, .o_cp_searchview{
+        width: 100%;
+    }
+    .o_cp_top_right{
+        width: 100%;
+        margin: 1.5rem auto;
+        margin-left: 0 !important;
+    }
+
+    //Search Panel
+    .o_content o_controller_with_searchpanel, .o_controller_with_searchpanel{
+        display:flex !important;
+        flex-direction: column !important;
+    }
+
+    .o_search_panel{
+        display: flex;
+        overflow-x: auto;
+        overflow-y: auto;
+        height: 200px;
+        width: 100%;
+        section{
+            margin-right: 1rem;
+        }
+    }
+    .o_search_panel section {
+        width: 100% !important;
+    }
+    .o_setting_container{
+        display: flex;
+        flex-direction: column;
+    }
+    .settings_tab{
+        display: flex;
+        flex-direction: row !important;
+        overflow-x: auto;
+        height: 40px;
+    }
+    .settings{
+        margin-top: 1.5rem;
+    }
+}
+//@media(max-width:716px){
+
+    //html .o_web_client > .o_action_manager > .o_action > .o_content{
+      //  overflow-x: hidden !important;
+   // }
+//}
+
+@media (max-width:524px){
+
+    .o_control_panel .o_cp_bottom_right > .o_cp_pager
+    {
+        margin-top:5px;
+    }
+    div.app-menu *::before{
+        box-sizing:none;
+    }
+    div.app-menu *::after{
+        box-sizing:none;
+    }
+}
+@media (max-width:493px){
+    .o_control_panel .o_cp_bottom_left > .o_cp_action_menus {
+        margin-left: 0px;
+        padding-right: 10px;
+    }
+}

jazzy_backend_theme/static/src/layout/style/login.scss

@@ -0,0 +1,150 @@
+
+#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;
+}
+.o_main_navbar .o_menu_sections {
+    flex-wrap: w
+}
+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;
+}

jazzy_backend_theme/static/src/layout/style/sidebar.scss

@@ -0,0 +1,60 @@
+#sidebar_panel {
+    height: calc(100% - 0%);
+   position: fixed;
+    background-color: var(--app-bar-accent);
+    width: 50px;
+    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 .sidebar_menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li {
+    margin: 0;
+    padding: 0;
+    border: 0px;
+    display: block;
+    /*margin-bottom:5px;*/
+}
+
+.sidebar_panel .sidebar .sidebar_menu li a {
+    margin: 0;
+    border: 0px;
+    display: block;
+    cursor: pointer;
+    overflow: hidden;
+    color: #ffffff;
+    font-size: 13px;
+    transition:.3s all;
+}
+.sidebar_panel .sidebar .sidebar_menu li:hover  a {
+    background: var(--secoundary-hover) !important;
+    color: #fff;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li a .sidebar_img {
+    width: 30px;
+    border-radius:5px;
+}
+
+html .o_web_client > .o_action_manager{
+    margin-left:50px;
+}
+.sidebar_panel .sidebar .sidebar_menu li .nav-link {
+    padding:10px 10px 10px 10px;
+}

jazzy_backend_theme/views/res_config_settings.xml

@@ -0,0 +1,115 @@
+<odoo>
+    <record id="res_config_cam" model="ir.ui.view">
+        <field name="name">res.config.jazzy.backend.theme</field>
+        <field name="model">res.config.settings</field>
+        <field name="priority" eval="90"/>
+        <field name="inherit_id" ref="base.res_config_settings_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@id='companies']" position='after'>
+                <h2>jazzy Backend Theme</h2>
+                <div class="row mt16 o_settings_container" name="barcode_scanner_using_cam">
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+<!--                            <field name="theme_background"/>-->
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Background Image" for="theme_background" class="ml-4" required="1"/>
+                            <field name="theme_background" widget="image"/>
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="app_bar_color" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="App Bar Background Color" for="app_bar_color"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="appbar_text" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="AppMenu Text color" for="appbar_text"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="secoundary_hover" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="AppBar Hover color" for="secoundary_hover"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="primary_accent" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Navbar Background Color" for="primary_accent"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="secondary_accent" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Primary Border Color" for="secondary_accent"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="kanban_bg_color" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Kanban Background Color" for="kanban_bg_color"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="primary_hover" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Primary Button Hover" for="primary_hover"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+<!--                    <div class="col-xs-12 col-md-6 o_setting_box">-->
+<!--                        <div class="o_setting_left_pane">-->
+
+<!--                        </div>-->
+<!--                        <div class="o_setting_right_pane">-->
+<!--                            <label string="Light Hover color" for="light_hover"/>-->
+<!--                            <field name="light_hover" widget="color"/>-->
+<!--                            <div class="text-muted">-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    </div>-->
+
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>

jazzy_backend_theme/views/style.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+    <template id="code_custom_layout" inherit_id="web.layout" name="Custom Layout">
+        <xpath expr="//meta[@content='IE=edge,chrome=1']" position="after">
+            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+            <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet"/>
+        </xpath>
+    </template>
+</odoo>