May 17 : [ADD] Initial Commit 'multicolor_backend_theme'

multicolor_backend_theme/README.rst

@@ -0,0 +1,50 @@
+.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg
+    :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+Chameleon Multi color Backend Theme
+===================================
+* Configurable multi color backend theme for Odoo 16,Only Admin can have the role to create, update, and removing the themes
+
+Installation
+============
+   - www.odoo.com/documentation/16.0/setup/install.html
+   - Install our custom addon
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.odoo.com/documentation/user/16.0/legal/licenses/licenses.html)
+
+Company
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Credits
+-------
+* Developer:
+    Linto CT @ Cybrosys
+    Sanjith Rashin  @ Cybrosys
+    V14 Dino  @ Cybrosys
+    V15 Sigha Ck  @ Cybrosys
+    V16 Sigha Ck  @ Cybrosys
+
+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
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+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>`__

multicolor_backend_theme/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-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/>.
+#
+##############################################################################
+from . import models
+from . import controllers

multicolor_backend_theme/__manifest__.py

@@ -0,0 +1,71 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-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": "Chameleon Multi Color Backend Theme",
+    "summary": "Configurable multi color backend theme for Odoo 16",
+    "version": "16.0.1.0.0",
+    "category": "Themes/Backend",
+    "website": "https://www.cybrosys.com",
+    "description": """
+        Configurable multi color backend theme for Odoo 16, 
+        Only Admin can have the role to create, update, and removing the themes.
+    """,
+    'images': [
+        'static/description/banner.png',
+        'static/description/theme_screenshot.png',
+    ],
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    "depends": [
+        'website',
+        'portal',
+        'mail'
+    ],
+    "data": [
+        'security/security_groups.xml',
+        'security/ir.model.access.csv',
+        'data/theme_data.xml',
+        'views/login_templates.xml',
+    ],
+    "assets": {
+        'web.assets_backend': [
+            '/multicolor_backend_theme/static/src/xml/sidebar_menu_icon.xml',
+            '/multicolor_backend_theme/static/src/xml/systray_ext.xml',
+            '/multicolor_backend_theme/static/src/scss/theme_style_backend.scss',
+            '/multicolor_backend_theme/static/src/css/backend.css',
+            '/multicolor_backend_theme/static/src/wcolpick/wcolpick.css',
+            '/multicolor_backend_theme/static/src/js/sidebar_menu.js',
+            '/multicolor_backend_theme/static/src/wcolpick/wcolpick.js',
+            '/multicolor_backend_theme/static/src/js/systray_theme_menu.js',
+            '/multicolor_backend_theme/static/src/js/search_apps.js'
+        ],
+        'web.assets_frontend': [
+            '/multicolor_backend_theme/static/src/scss/theme_style.scss',
+            '/multicolor_backend_theme/static/src/js/login_page.js'
+        ],
+    },
+    'license': 'LGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

multicolor_backend_theme/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-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/>.
+#
+##############################################################################
+from . import main

multicolor_backend_theme/controllers/main.py

@@ -0,0 +1,42 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-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/>.
+#
+##############################################################################
+import json
+
+from odoo import http
+from odoo.http import request
+
+
+class LoginPage(http.Controller):
+    """Controller for the login page. This controller provides methods for
+    retrieving the active theme's main color, view font color, and theme font
+    color and updating the theme of the login page.
+    """
+    @http.route(['/active_theme'], auth='public', type='http')
+    def find_active_theme(self):
+        """find the active theme for updating theme of login page"""
+        active_theme = request.env['theme.config'].sudo().search_read(
+            domain=[('theme_active', '=', True)],
+            fields=['theme_main_color',
+                    'view_font_color',
+                    'theme_font_color'])
+        active_theme = active_theme[0] if active_theme else []
+        return json.dumps(active_theme)

multicolor_backend_theme/data/theme_data.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <data noupdate="1">
+        <record id="theme_01" model="theme.config">
+            <field name="name">Theme 1</field>
+            <field name="theme_main_color">#6fb702</field>
+            <field name="theme_font_color">#fff</field>
+            <field name="view_font_color">#333</field>
+            <field name="theme_active">true</field>
+        </record>
+        <record id="theme_02" model="theme.config">
+            <field name="name">Theme 2</field>
+            <field name="theme_main_color">#404a5e</field>
+            <field name="theme_font_color">#fff</field>
+            <field name="view_font_color">#404a5e</field>
+            <field name="theme_active">false</field>
+        </record>
+        <record id="theme_03" model="theme.config">
+            <field name="name">Theme 3</field>
+            <field name="theme_main_color">#f39b12</field>
+            <field name="theme_font_color">#000</field>
+            <field name="view_font_color">#333</field>
+            <field name="theme_active">false</field>
+        </record>
+    </data>
+</odoo>

multicolor_backend_theme/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <multicolor_backend_theme>
+
+#### 05.05.2023
+#### Version 16.0.1.0.0
+#### ADD
+- Initial Commit for Chameleon Multi color Backend Theme

multicolor_backend_theme/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-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/>.
+#
+##############################################################################
+from . import theme_config

multicolor_backend_theme/models/theme_config.py

@@ -0,0 +1,104 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-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/>.
+#
+##############################################################################
+from odoo import api, fields, models
+
+
+class ThemeConfig(models.Model):
+    """Model for storing configuration settings related to the theme"""
+    _name = 'theme.config'
+    _description = "Model for storing configuration settings related to the " \
+                   "theme"
+
+    name = fields.Char(string="Name")
+    theme_main_color = fields.Char(
+        string="Theme main color", help="main theme color")
+    view_font_color = fields.Char(
+        string="View font color", help="backend font color")
+    theme_font_color = fields.Char(
+        string="Font color", help="backend view font color")
+    theme_active = fields.Boolean(string="Active")
+
+    def write(self, vals_data):
+        """only one theme can be active at a time"""
+        if ('theme_active' in vals_data.keys() and
+                vals_data['theme_active']):
+            for theme_rec in self.search([]):
+                theme_rec.theme_active = False
+        res = super(ThemeConfig, self).write(vals_data)
+        return res
+
+    @api.model
+    def create_new_theme(self):
+        """create a new theme"""
+        theme_data = self.theme_defaults()
+        theme_obj = self.create(theme_data)
+        theme_data = self.search_read([])
+        return [theme_obj.id, theme_data]
+
+    @api.model
+    def update_color(self, vals):
+        """update the color"""
+        vals_data = {
+            vals['key']: '#' + vals['value']
+        }
+        self.browse(int(vals['theme_id'])).write(vals_data)
+        return
+
+    @api.model
+    def find_active(self):
+        """find the active theme"""
+        active_theme = self.search_read([('theme_active', '=', True)])
+        return active_theme[0] if active_theme else False
+
+    @api.model
+    def update_active_theme(self, theme_id):
+        """update active theme """
+        for theme_obj in self.search([]):
+            if theme_obj.theme_active and theme_obj.id != int(theme_id):
+                theme_obj.theme_active = False
+            elif not theme_obj.theme_active and theme_obj.id == int(theme_id):
+                theme_obj.theme_active = True
+        return
+
+    @api.model
+    def check_for_removal(self, theme_id):
+        """removal of a theme"""
+        theme_rec = self.browse(int(theme_id))
+        if not theme_rec:
+            return False
+        if not theme_rec.theme_active:
+            theme_rec.unlink()
+        theme_data = self.search_read([])
+        return theme_data
+
+    def theme_defaults(self):
+        """set default theme"""
+        cr = self._cr
+        cr.execute("select count(*) from theme_config")
+        max_id = cr.fetchone()
+        return {
+            'name': 'Theme ' + str(max_id[0] + 1 if max_id else 1),
+            'theme_main_color': '#6fb702',
+            'view_font_color': '#333',
+            'theme_font_color': '#fff',
+            'theme_active': False,
+        }

multicolor_backend_theme/security/ir.model.access.csv

@@ -0,0 +1,3 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_themes_manager,themes_selection,model_theme_config,multicolor_theme_manager_access,1,1,1,1
+access_themes_user,themes_selection,model_theme_config,base.group_user,1,0,0,0

multicolor_backend_theme/security/security_groups.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+     <data>
+         <record model="ir.module.category" id="multicolor_theme_module_access">
+             <field name="name">Multicolor Backend Theme </field>
+             <field name="description">User access levels for Theme selection</field>
+             <field name="sequence">10</field>
+        </record>
+        <record id="multicolor_theme_manager_access" model="res.groups">
+            <field name="name">Administrator</field>
+            <field name="category_id" ref="multicolor_theme_module_access"/>
+            <field name="users" eval="[(4, ref('base.user_root')), (4, ref('base.user_admin'))]"/>
+        </record>
+     </data>
+</odoo>

multicolor_backend_theme/static/description/index.html

@@ -0,0 +1,680 @@
+<!-- HERO -->
+<div class="container">
+    <div class="row"
+         style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
+        <div class="col-lg-12 d-flex flex-column align-items-center">
+            <h1 class="text-center text-uppercase"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bolder !important; font-size: 2.5rem !important; color: #212121;">
+                Chameleon Backend theme
+            </h1>
+            <p class="my-1 text-center text-uppercase"
+               style="letter-spacing: 4px !important; color: #74788D !important;">
+                Choose your color by yourself.</p>
+        </div>
+        <div class="col-lg-12 d-flex justify-content-center align-items-center"
+             style="margin: 2rem 0;">
+            <img src="./assets/hero.gif" width="100%" height="auto"
+                 class="img-responsive">
+        </div>
+    </div>
+</div>
+<!-- END OF HERO -->
+
+<!-- OVERVIEW -->
+<div class="container">
+    <div class="row"
+         style="padding: 0rem 2.5rem !important; background-color: #fff !important;">
+        <div class="col-lg-12 d-flex flex-column justify-content-center">
+            <p class="my-1 text-center"
+               style="font-family: Montserrat, 'sans-serif' !important; color: #212121 !important;">
+                Enables a user friendly backend theme for Odoo 16.0 community
+                edition.
+            </p>
+        </div>
+        <div class="col-lg-12 mt-4">
+            <div class="alert alert-warning text-center" role="alert">
+                <i class="fa fa-exclamation-triangle mr-2"
+                   aria-hidden="true"></i>Please make sure that you install
+                all
+                your apps prior to the installation of this theme.
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END OF OVERVIEW-->
+
+<!-- FEATURE -->
+<div class="container" style="margin-top: 3rem;">
+    <div class="row">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+            <hr class="position-absolute"
+                style="border: 1px solid #c4c6cc !important; width: 40% !important; z-index: 0 !important;">
+            <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                Features</h2>
+        </div>
+    </div>
+    <!-- RESPONSIVE -->
+    <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 #e4e3fe; border-radius: 50%; background-color: #d9d7fe; box-shadow: 0px 0px 0px 8px #f0efff;"
+                        class="d-flex justify-content-center align-items-center">
+                    <img height="60px" src="./assets/icons/design.png">
+                </div>
+                <h6 class="my-4 text-center">Carefully 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 #e4e3fe; border-radius: 50%; background-color: #d9d7fe; box-shadow: 0px 0px 0px 8px #f0efff;"
+                        class="d-flex justify-content-center align-items-center">
+                    <img height="60px" src="./assets/icons/responsive.png">
+                </div>
+                <h6 class="my-4 text-center">Responsive 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 #e4e3fe; border-radius: 50%; background-color: #d9d7fe; box-shadow: 0px 0px 0px 8px #f0efff;"
+                        class="d-flex justify-content-center align-items-center">
+                    <img height="60px" src="./assets/icons/quality.png">
+                </div>
+                <h6 class="my-4 text-center">Quality Checked</h6>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END OF RESPONSIVE -->
+<!-- FEATURE -->
+<div class="container" style="margin-top: 3rem;">
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+            <div class="row mt-4">
+                <div class="col-lg-6">
+                    <div class="d-flex">
+                        <i class="fa fa-check-square mr-2"
+                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                        <p>Modified Font</p>
+                    </div>
+                    <div class="d-flex">
+                        <i class="fa fa-check-square mr-2"
+                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                        <p>New Color Combination</p>
+                    </div>
+                    <div class="d-flex">
+                        <i class="fa fa-check-square mr-2"
+                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                        <p>Full Screen View</p>
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div class="d-flex">
+                        <i class="fa fa-check-square mr-2"
+                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                        <p>Stages are Seperated in View</p>
+                    </div>
+                    <div class="d-flex">
+                        <i class="fa fa-check-square mr-2"
+                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                        <p>Clean Layout</p>
+                    </div>
+
+                    <div class="d-flex">
+                        <i class="fa fa-check-square mr-2"
+                           style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                        <p>Buttons with New Colors</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+        </div>
+    </div>
+</div>
+<!-- SCREENSHOTS -->
+<div class="container" style="margin-top: 3rem;">
+    <div class="row">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+            <hr class="position-absolute"
+                style="border: 1px solid #c4c6cc !important; width: 40% !important; z-index: 0 !important;">
+            <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                Screenshots</h2>
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        1</h6>
+                </div>
+                <h6 class="mt-2 ml-2">Login Page</h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/login1.png" width="100%" height="auto"
+                 class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        2</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Expanded side bar </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/exp_sidebar1.png" width="100%"
+                 height="auto" class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        3</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Minimized side bar </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/min_sidebar1.png" width="100%"
+                 height="auto" class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        4</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Tree view </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/tree.png" width="100%" height="auto"
+                 class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        5</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Kanban view </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/kanban.png" width="100%" height="auto"
+                 class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        6</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Form view </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/form.png" width="100%" height="auto"
+                 class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        7</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Color picker </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/color_picker.png" width="100%"
+                 height="auto" class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        8</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Control panel
+                </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/control_panel.png" width="100%"
+                 height="auto" class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        8</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Chat Box
+                </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/chatbot.png" width="100%" height="auto"
+                 class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        8</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Advanced Search
+                </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/adv_search.png" width="100%"
+                 height="auto" class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        8</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Only Administrator can create, update and
+                    remove theme.
+                </h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/access.png" width="100%" height="auto"
+                 class="img-responsive">
+        </div>
+    </div>
+    <div class="row shadow"
+         style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+        <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+            <div class="d-flex my-3">
+                <div class="d-flex justify-content-center align-items-center"
+                     style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                    <h6 style="margin-top: 0.3rem; color: #fff !important;">
+                        8</h6>
+                </div>
+                <h6 class="mt-2 ml-2"> Responsive</h6>
+            </div>
+        </div>
+        <div class="col-lg-12"
+             style="padding-left: 0 !important; padding-right: 0!important;">
+            <img src="assets/screenshots/responsive_screenshot.png" width="100%"
+                 height="auto" class="img-responsive">
+        </div>
+    </div>
+</div>
+<!-- END OF SCREENSHOTS -->
+
+<!-- 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 mb-4">
+            <hr class="position-absolute"
+                style="border: 1px solid #c4c6cc !important; width: 40% !important; z-index: 0 !important;">
+            <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                Our Services</h2>
+        </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 OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+<section class="container"
+         style="margin-top: 6rem !important; background-color: #fff !important;">
+    <div class="row">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">
+            <hr class="position-absolute"
+                style="border: 1px solid #c4c6cc !important; width: 40% !important; z-index: 0 !important;">
+            <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                Our Industries</h2>
+        </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="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; 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="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; 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="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; 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="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; 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="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; 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="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; 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="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; 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="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An
+                    all-inclusive
+                    hotel management application</p>
+            </div>
+        </div>
+    </div>
+</section>
+<!--END OF OUR INDUSTRIES -->
+<!-- FOOTER -->
+<!-- Footer Section -->
+<section class="container"
+         style="margin: 5rem auto 2rem; background-color: #fff !important;">
+    <div class="row" style="max-width:1540px;">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">
+            <hr class="position-absolute"
+                style="border: 1px solid #c4c6cc !important; width: 40% !important; z-index: 0 !important;">
+            <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                Need Help?</h2>
+        </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-4">
+                    <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-4">
+                    <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>WhatsApp</a>
+                </div>
+                <div class="col-lg-4">
+                    <a href="skype:cybrosystechnologies?chat" target="_blank"
+                       class="btn btn-block deep_hover"
+                       style="text-decoration: none; background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                            class="fa fa-envelope mr-2"></i>cybrosystechnologies</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- End of Contact Cards -->
+</section>
+<!-- Footer -->
+<section class="oe_container"
+         style="padding: 2rem 3rem 1rem; background-color: #fff !important;">
+    <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>
+</section>
+<!-- END OF FOOTER -->

multicolor_backend_theme/static/src/css/backend.css

@@ -0,0 +1,5 @@
+:root{
+    --theme_main_color: #AD7B90 !default;
+    --theme_font_color: black !default;
+    --view_font_color
+    }

multicolor_backend_theme/static/src/js/login_page.js

@@ -0,0 +1,25 @@
+odoo.define('multicolor_backend_theme.LoginPage', function(require) {
+    "use strict";
+    var publicWidget = require('web.public.widget');
+    // change the theme of login page according to the active backend theme
+    publicWidget.registry.LoginPage = publicWidget.Widget.extend({
+        selector: '.oe_login_buttons',
+        start: function() {
+            $.ajax({
+                url: '/active_theme',
+                type: 'get',
+            }).then(function(result) {
+                var colors = JSON.parse(result);
+                $('.cybro-login-btn').css({
+                    'background-color': colors.theme_main_color,
+                    'color': colors.theme_font_color
+                });
+                $('.cybro-super-btn').css({
+                    'color': colors.view_font_color
+                });
+            });
+            return this._super(...arguments);
+        },
+    });
+    return publicWidget.registry.LoginPage;
+});

multicolor_backend_theme/static/src/js/search_apps.js

@@ -0,0 +1,84 @@
+/** @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 {onMounted} = owl;
+import {patch} from 'web.utils';
+
+// patch NavaBar for searching apps and contents by extending navbar
+patch(NavBar.prototype, 'multicolor_backend_theme/static/src/js/search_apps.js', {
+    //--------------------------------------------------------------------------
+    // Public
+    // For advance search bar feature, and this will enable a global search for apps and related content
+    //--------------------------------------------------------------------------
+    /**
+     * @override
+     */
+    setup() {
+        this._super();
+        this._search_def = $.Deferred();
+        let {
+            apps,
+            menuItems
+        } = computeAppsAndMenuItems(this.menuService.getMenuAsTree("root"));
+        this._apps = apps;
+        this._searchableMenus = menuItems;
+        onMounted(this.onMounted);
+    },
+    onMounted() {
+        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");
+    },
+    // to show the search results
+    _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));
+    },
+    // function for searching all apps and content
+    _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;
+        }
+        // search for all apps
+        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,
+                });
+            });
+        // search for all content
+        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("multicolor_backend_theme.SearchResults", {
+            results: results,
+            widget: this,
+        }));
+    },
+});

multicolor_backend_theme/static/src/js/sidebar_menu.js

@@ -0,0 +1,84 @@
+odoo.define('multicolor_backend_theme.sidebar', 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': '320px','transition':'all .1s linear'});
+
+        //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'});
+
+        //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");
+
+    });
+
+    $(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'});
+        $("#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");
+    });
+});

multicolor_backend_theme/static/src/js/systray_theme_menu.js

@@ -0,0 +1,480 @@
+/** @odoo-module **/
+import SystrayMenu from 'web.SystrayMenu';
+import Widget from 'web.Widget';
+import Session from 'web.session';
+import {patch} from 'web.utils';
+import {Discuss} from "@mail/components/discuss/discuss";
+var core = require('web.core');
+var session = require('web.session');
+var QWeb = core.qweb;
+var rpc = require('web.rpc');
+var ControlPanel = require('web.ControlPanel');
+var DropdownMenu = require('web.DropdownMenu');
+var FormRenderer = require('web.FormRenderer');
+var ListRenderer = require('web.ListRenderer');
+var KanbanRenderer = require('web.KanbanRenderer');
+var KanbanRecord = require('web.KanbanRecord');
+var AbstractController = require('web.AbstractController');
+var utils = require('web.utils');
+var selected_theme = {};
+var themes_to_update = {};
+var Temple = Widget.extend({
+    name: 'activity_menu',
+    template: 'multicolor_backend_theme.systray.ThemeMenu',
+    events: {
+        'click .themes_selector_button': '_onThemeSelectorClick',
+        'change .theme_select': '_onThemeClick',
+        'click .button-create': '_onThemeCreate',
+        'click .button-remove': '_onThemeRemove',
+        'click .button-apply': '_onThemeApply',
+        'click .row.name i.fa-pencil': '_onNameEdit',
+        'click .row.name i.fa-check': '_onNameSave',
+        'change .row.name input#name': '_onNameSave',
+        'keyup .row.name input#name': '_onNameChange',
+        'click .color': '_colorPick'
+    },
+    start: function() {
+        this._loadDefaults();
+        this._apply_theme();
+        return this._super();
+    },
+    init: function(parent) {
+        this.theme_data = {};
+        this.selected_theme = {};
+        this.themes_by_id = {};
+        return this._super.apply(this, arguments);
+    },
+    willStart: function() {
+        var self = this;
+        var get_them_data = rpc.query({
+            model: 'theme.config',
+            method: 'search_read',
+            args: []
+        });
+        session.user_has_group('multicolor_backend_theme.multicolor_theme_manager_access').then(hasGroup => {
+            this.administrator = hasGroup;
+        });
+        return $.when(get_them_data).then(function(theme_data) {
+            self.theme_data = theme_data;
+            for (var i in theme_data) {
+                if (theme_data[i].theme_active == true) {
+                    self.selected_theme = theme_data[i];
+                    selected_theme = theme_data[i];
+                }
+                self.themes_by_id[theme_data[i].id] = theme_data[i];
+            }
+            if (!self.selected_theme) {
+                self.selected_theme = theme_data[0];
+            }
+        });
+    },
+    //load default theme
+    _loadDefaults: function() {
+        var self = this;
+        var item_theme = ''
+        var theme = ''
+        if (self.themes_by_id[$('.theme_select').val()] != undefined) {
+            item_theme = self.themes_by_id[$('.theme_select').val()]
+        }
+        self.active_theme = item_theme
+        var color_el = [
+            'theme_main_color',
+            'theme_font_color',
+            'view_font_color'
+        ];
+        for (var color in color_el) {
+            var el_color = self.selected_theme[color_el[color]];
+            $('#' + color_el[color]).loads({
+                layout: 'hex',
+                flat: false,
+                enableAlpha: false,
+                color: el_color,
+                onSubmit: function(ev) {
+                    var el_id = $(ev.el).attr('id');
+                    $('#' + el_id).css('background-color', '#' + ev.hex);
+                    $('#' + el_id).val("#" + ev.hex);
+                    $('#' + el_id).hides();
+                    self._onchangeColor($(ev.el), ev.hex);
+                },
+
+                onLoaded: function(ev) {
+                    $('.picker').css('color', 'green');
+                },
+                onChange: function(ev) {
+                    var el_id = $(ev.el).attr('id');
+                    $('#' + el_id).setColor(ev.hex, false);
+                    $('.picker').css('color', 'red');
+                }
+            });
+        }
+        return;
+    },
+    //function to edit the name
+    _onNameEdit: function() {
+        $('.row.name #name').removeAttr('readonly');
+        $('.row.name #name').css('background-color', 'rgb(238, 250, 239)');
+    },
+    //function for saving the name and theme
+    _onNameSave: function() {
+        var name_inp = $('.row.name input#name').val().trim();
+        if (this.themes_by_id[$('.theme_select').val()].theme_active == true) {
+            this.selected_theme.name = name_inp;
+        }
+        this.themes_by_id[$('.theme_select').val()].name = name_inp;
+        rpc.query({
+            model: 'theme.config',
+            method: 'write',
+            args: [
+                parseInt($('.theme_select').val()),
+                {
+                    'name': name_inp
+                }
+            ]
+        }).then(function() {
+            $('.button-apply.fa-check').css('color', 'green');
+            themes_to_update[$('.theme_select').val()] = true;
+        });
+        $('.row.name #name').attr('readonly', 'readonly');
+        $('.row.name #name').css('background-color', 'white');
+        $('.row.name i').replaceWith(
+            "<i class='fa fa-pencil'/>"
+        );
+        $('option#' + $('.theme_select').val()).text(name_inp);
+    },
+    _onNameChange: function() {
+        $('.button-apply.fa-check').css('color', 'red');
+        delete themes_to_update[$('.theme_select').val()];
+        var name_inp = $('.row.name input#name').val().trim();
+        if (name_inp && (this.themes_by_id[$('.theme_select').val()].name != name_inp)) {
+            $('.row.name i').replaceWith(
+                "<i class='fa fa-check'/>"
+            );
+        }
+    },
+    // click function for color select
+    _colorPick: function(){
+    this._loadDefaults();
+    },
+
+    // function for selecting theme from the selection
+    _onThemeSelectorClick: function() {
+        this._loadDefaults();
+        $('.themes_selector').toggleClass('show');
+        $('.row.name #name').attr('readonly', 'readonly');
+        $('.row.name #name').css('background-color', 'white');
+    },
+    // function for customizing the color
+    _onchangeColor: function(element, data) {
+        var $apply = $('.button-apply.fa-check');
+        var current_theme = this.themes_by_id[$('.theme_select').val()];
+        if ('#' + data != current_theme[element.attr('id')]) {
+            $apply.css('color', 'red');
+            current_theme[element.attr('id')] = '#' + data;
+            this.themes_by_id[current_theme.id][element.attr('id')] = '#' + data;
+            var el_id = element.attr('id');
+            var vals = {
+                'theme_id': current_theme.id,
+                'key': el_id,
+                'value': data
+            };
+            rpc.query({
+                model: 'theme.config',
+                method: 'update_color',
+                args: [vals]
+            }).then(function() {
+                $apply.css('color', 'green');
+            });
+        }
+        return;
+    },
+    //  theme change function
+    _onThemeClick: function() {
+        var $theme_el = QWeb.render(
+            'multicolor_backend_theme.selected_theme', {
+                widget: {
+                    selected_theme: this.themes_by_id[$('.theme_select').val()]
+                }
+            });
+        $('div.theme_data').replaceWith($($theme_el));
+        this._loadDefaults();
+        if (themes_to_update[$('.theme_select').val()] == true) {
+            $('.button-apply.fa-check').css('color', 'green');
+        } else {
+            $('.button-apply.fa-check').css('color', '#4c4c4c');
+        }
+    },
+    // create new theme
+    _onThemeCreate: function() {
+        var self = this;
+        rpc.query({
+            model: 'theme.config',
+            method: 'create_new_theme'
+        }).then(function(result) {
+            self._updateThemeData(result[1]);
+            var theme_el = QWeb.render(
+                'multicolor_backend_theme.selected_theme', {
+                    widget: {
+                        selected_theme: self.themes_by_id[result[0]]
+                    }
+                });
+            $('div.theme_data').replaceWith($(theme_el));
+
+            var opt_el = "<option value='" + result[0] + "' >" +
+                self.themes_by_id[result[0]].name + "</option>";
+            $('.theme_select').append($(opt_el));
+            $('.theme_select').val(result[0]);
+            self._loadDefaults();
+        });
+    },
+    // remove the theme from the inactive themes
+    _onThemeRemove: function() {
+        var self = this;
+        var curr_theme = $('.theme_select').val();
+        var theme_rec = this.themes_by_id[curr_theme];
+        if (theme_rec.theme_active == true) {
+            alert("You cannot delete an active theme.")
+        } else {
+            rpc.query({
+                model: 'theme.config',
+                method: 'check_for_removal',
+                args: [curr_theme]
+            }).then(function(theme_data) {
+                if (theme_data) {
+                    self._updateThemeData(theme_data);
+                    var theme_el = QWeb.render(
+                        'multicolor_backend_theme.selected_theme', {
+                            widget: self
+                        });
+                    $('div.theme_data').replaceWith($(theme_el));
+                    $(".theme_select option[value='" + theme_rec.id + "']").remove();
+                    $(".theme_select").val(self.selected_theme.id);
+                    self._loadDefaults();
+                }
+            });
+        }
+    },
+    // apply the selected theme and make it active
+    _onThemeApply: function() {
+        var curr_theme_id = $('.theme_select').val();
+        rpc.query({
+            model: 'theme.config',
+            method: 'update_active_theme',
+            args: [curr_theme_id]
+        }).then(function() {
+            window.location.reload();
+        });
+    },
+    //For updating the theme
+    _updateThemeData: function(theme_data) {
+        this.themes_by_id = {};
+        this.theme_data = theme_data;
+        for (var theme in theme_data) {
+            this.themes_by_id[theme_data[theme].id] = theme_data[theme];
+        }
+        return;
+    },
+    // apply the selected theme
+    _apply_theme: function() {
+        if (this.selected_theme) {
+            document.documentElement.style.setProperty("--theme_main_color", this.selected_theme.theme_main_color);
+            document.documentElement.style.setProperty("--theme_font_color", this.selected_theme.theme_font_color);
+            document.documentElement.style.setProperty("--view_font_color", this.selected_theme.view_font_color);
+            $('.cybro-main-menu .input-group-text').css({
+                'background-color': this.selected_theme.theme_main_color,
+                'border-color': this.selected_theme.theme_main_color,
+                'color': this.selected_theme.theme_font_color,
+            });
+            $('.o_loading').css({
+                'background-color': this.selected_theme.theme_main_color,
+                'color': this.selected_theme.theme_font_color,
+            });
+            $('.btn-primary').css({
+                'background-color': this.selected_theme.theme_main_color,
+                'color': this.selected_theme.theme_font_color,
+            });
+        }
+    },
+});
+patch(Discuss.prototype, 'multicolor_backend_theme/static/src/js/systray_theme_menu.js', {
+    _onDiscussItemClicked: function(ev) {
+        this._super(ev);
+        this.$('.o_mail_discuss_title_main').css({
+            'box-shadow': 'none',
+        });
+        this.$('.o_mail_discuss_title_main.o_active').css({
+            'box-shadow': 'inset 3px 0 0 ' + selected_theme.theme_main_color,
+        });
+    },
+    _renderSidebar: function(options) {
+        var res = this._super(options);
+        res.find('.o_mail_discuss_title_main').css({
+            'box-shadow': 'none',
+        });
+        res.find('.o_mail_discuss_title_main.o_active').css({
+            'box-shadow': 'inset 3px 0 0 ' + selected_theme.theme_main_color,
+        });
+        return res;
+    },
+});
+// add the brush icon into systray
+SystrayMenu.Items.push(Temple);
+patch(ControlPanel.prototype, 'multicolor_backend_theme/static/src/js/systray_theme_menu.js', {
+    _update_search_view: function(searchview, isHidden, groupable, enableTimeRangeMenu) {
+        this._super(searchview, isHidden, groupable, enableTimeRangeMenu);
+        if (selected_theme) {
+            this.$('span.o_searchview_more').css({
+                background: selected_theme.theme_main_color,
+                color: selected_theme.theme_font_color
+            });
+            document.documentElement.style.setProperty("--theme_main_color", this.selected_theme.theme_main_color);
+            this.$('.o_searchview .o_searchview_facet .o_searchview_facet_label').css({
+                'background-color': selected_theme.theme_main_color
+            });
+            this.$('.o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label').css({
+                'color': selected_theme.theme_font_color
+            });
+            // button properties
+            this.$('.btn-primary').css({
+                'background-color': selected_theme.theme_main_color,
+                'border-color': selected_theme.theme_main_color,
+                'color': selected_theme.theme_font_color
+            });
+            this.$('.btn-primary:hover').css({
+                'background-color': selected_theme.theme_main_color,
+                'border-color': selected_theme.theme_main_color,
+                'color': selected_theme.theme_font_color
+            });
+        }
+    },
+    update: function(status, options) {
+        this._super(status, options);
+        this.$('button.o_dropdown_toggler_btn.btn.btn-secondary.dropdown-toggle').css({
+            'background-color': selected_theme.theme_main_color,
+            'border-color': selected_theme.theme_main_color,
+            'color': selected_theme.theme_font_color
+        });
+    },
+    /**
+     * Private function that renders a breadcrumbs' li Jquery element
+     */
+    _render_breadcrumbs_li: function(bc, index, length) {
+        var $bc = this._super(bc, index, length);
+        $bc.find('a').css({
+            'color': selected_theme.view_font_color
+        });
+        return $bc;
+    }
+});
+// apply theme colors in form view
+FormRenderer.include({
+    _renderTagSheet: function(node) {
+        var sheet = this._super(node);
+        sheet.find('.fa, .o_stat_value').css(
+            'color', selected_theme.view_font_color);
+        return sheet;
+    },
+    _renderHeaderButtons: function(node) {
+        var buttons_obj = this._super(node);
+        buttons_obj.find('.btn-primary').css({
+            'background-color': selected_theme.theme_main_color,
+            'border-color': selected_theme.theme_main_color,
+            'color': selected_theme.theme_font_color
+        });
+        buttons_obj.find('.btn-primary:hover').css({
+            'background-color': selected_theme.theme_main_color,
+            'border-color': selected_theme.theme_main_color,
+            'color': selected_theme.theme_font_color
+        });
+        return buttons_obj;
+    },
+    _renderTagHeader: function(node) {
+        var statusbar_el = this._super(node);
+        statusbar_el.find('button.btn.o_arrow_button.btn-primary.disabled').css({
+            'color': selected_theme.view_font_color
+        });
+        return statusbar_el;
+    },
+    _renderTagForm: function(node) {
+        var $res = this._super(node);
+        $res.find('a').css(
+            'color', selected_theme.view_font_color);
+        $res.find('.o_field_widget.o_field_many2one .o_external_button').css(
+            'color', selected_theme.view_font_color);
+        $res.find('.btn-primary').css(
+            'background-color', selected_theme.theme_main_color);
+        $res.find('.btn-primary').css(
+            'color', selected_theme.theme_font_color);
+        return $res;
+    },
+});
+// apply changes in listview
+ListRenderer.include({
+    setRowMode: function(recordID, mode) {
+        var self = this;
+        return this._super(recordID, mode).then(function() {
+            self.$('.o_external_button').css('color', selected_theme.view_font_color);
+        });
+    }
+});
+// apply theme changes in kanban view
+KanbanRenderer.include({
+    _renderView: function() {
+        return this._super().then(function() {
+            $('.btn-primary').css('background-color',
+                selected_theme.theme_main_color);
+            $('.btn-primary').css('color',
+                selected_theme.theme_font_color);
+        });
+    }
+});
+KanbanRecord.include({
+    _render: function() {
+        var self = this;
+        return this._super().then(function() {
+            self.$el.find('.o_kanban_image_fill_left.d-none.d-md-block').css({
+                'border': '2px solid ' + selected_theme.theme_main_color
+            });
+            self.$el.find('.o_field_widget.badge.badge-primary').css({
+                'background': selected_theme.theme_main_color
+            });
+        });
+    }
+});
+// change the theme of the dropdown menus according to the current theme
+patch(DropdownMenu.prototype, 'multicolor_backend_theme/static/src/js/systray_theme_menu.js', {
+    _renderMenuItems: function() {
+        this._super();
+        if (selected_theme) {
+            $('span.o_searchview_more').css({
+                background: selected_theme.theme_main_color,
+                color: selected_theme.theme_font_color
+            });
+            $('.o_searchview .o_searchview_facet .o_searchview_facet_label').css({
+                'background-color': selected_theme.theme_main_color
+            });
+            $('.o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label').css({
+                'color': selected_theme.theme_font_color
+            });
+        }
+    },
+});
+// change the theme of the onboarding panel according to the current theme
+patch(AbstractController.prototype, 'multicolor_backend_theme/static/src/js/systray_theme_menu.js', {
+    _renderBanner: function() {
+        var self = this;
+        return this._super().then(function() {
+            if (selected_theme) {
+                self.$('.o_onboarding_wrap').css({
+                    'background-color': selected_theme.theme_main_color
+                });
+                var color_val = 'color:' +
+                    selected_theme.theme_font_color +
+                    ' !important;';
+                self.$('.o_onboarding_wrap a,.o_onboarding_wrap p').attr(
+                    'style', color_val
+                );
+            }
+        });
+    },
+});
+return Temple;

multicolor_backend_theme/static/src/scss/theme_style.scss

@@ -0,0 +1,202 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+body {
+  font-size: 14px;
+  font-family: lato, sans-serif
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-family: poppins, sans-serif
+}
+
+p {
+  font-family: lato, sans-serif;
+  font-size: 15px;
+  line-height: 26px;
+  color: #444;
+  margin-bottom: 0
+}
+
+p img {
+  margin: 0
+}
+
+a, a:visited {
+  text-decoration: none;
+  transition: all .3s ease-in-out;
+  -webkit-transition: all .3s ease-in-out;
+  -moz-transition: all .3s ease-in-out;
+  -o-transition: all .3s ease-in-out;
+  outline: 0;
+  font-family: poppins, sans-serif
+}
+
+a:hover {
+  text-decoration: none
+}
+
+a:focus {
+  text-decoration: none;
+  outline: 0
+}
+
+p a, p a:visited {
+  line-height: inherit;
+  outline: 0
+}
+
+ul, ol {
+  margin-bottom: 0;
+  margin-top: 0;
+  padding: 0
+}
+
+ul {
+  margin: 0;
+  list-style-type: none
+}
+
+ol {
+  list-style: decimal
+}
+
+ol, ul.square, ul.circle, ul.disc {
+  margin-left: 0
+}
+
+ul.square {
+  list-style: square outside
+}
+
+ul.circle {
+  list-style: circle outside
+}
+
+ul.disc {
+  list-style: disc outside
+}
+
+ul ul, ul ol, ol ol, ol ul {
+  margin: 0
+}
+
+ul ul li, ul ol li, ol ol li, ol ul li {
+  margin-bottom: 0
+}
+
+button {
+  cursor: pointer;
+  outline: none !important;
+  letter-spacing: 0
+}
+
+blockquote {
+  padding: 60px;
+  position: relative;
+  background: #853bfa
+}
+
+blockquote:before {
+  content: '\f10d';
+  font-family: fontawesome;
+  color: #fff;
+  font-size: 32px;
+  position: absolute;
+  left: 16px;
+  top: 46px
+}
+
+blockquote p {
+  font-size: 17px;
+  color: #fff
+}
+
+.blockquote-footer {
+  color: #fff
+}
+/*==============login================*/
+.oe_website_login_container {
+    padding: 1rem 5rem 5rem;
+    background: #f1f4f5;
+}
+.oe_login_form, .oe_signup_form, .oe_reset_password_form {
+  color: #fff !important;
+}
+.oe_login_form, .oe_signup_form, .oe_reset_password_form {
+    max-width: 360px;
+    position: relative;
+    margin: 50px auto;
+    border-radius: 7px;
+    padding: 3rem;
+    background: #ffffff;
+    box-shadow: 0 0 11px 0px #4477d4;
+}
+
+.oe_login_form input {
+    height: 40px !important;
+    border-radius: 0 !important;
+    background: #fff !important;
+    border: 1px solid #ffffff;
+}
+
+.oe_login_form i.fa.fa-database {
+  margin-left: 6px;
+}
+
+.oe_login_form a.btn.btn-secondary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 0 !important;
+}
+.cybro-login-btn {
+    height: 47px;
+    border-radius: 0;
+    //background: #3e8df7 !important;
+    border: none;
+    //color: #ffffff !important;
+    font-size: 16px;
+}
+.cybro-super-btn {
+    //color: #fff;
+    font-size: 14px;
+  text-decoration: none;
+}
+.cybro-super-btn:hover {
+    color: black !important;
+    text-decoration: none;
+}
+.cybro-bg footer{
+    background: #303641 !important;
+    color: #fff;
+    padding-top: 2rem;
+}
+.cybro-bg .navbar {
+    background: #303641 !important;
+    color: #fff;
+}
+.cybro-bg footer a,.cybro-bg footer p,.cybro-bg header a,.cybro-bg header p {
+    color: #fff;
+}
+.cybro-bg .navbar-light .navbar-nav .nav-link {
+    color: #ffffff !important;
+}
+.homepage .dropdown-menu.js_usermenu.dropdown-menu-right.show {
+    background: #303641;
+}
+.oe_website_login_container .btn-secondary {
+    color: #FFFFFF;
+    background-color: #afafaf;
+    border-color: #afafae;
+}
+input {
+    border: 1px solid #e4eaec !important;
+}
+.oe_login_form, .oe_signup_form, .oe_reset_password_form {
+    color: #37474f !important;
+    font-weight: 300 !important;
+}
+form label {
+    font-weight: 300 !important;
+}
+/*==============//login================*/

multicolor_backend_theme/static/src/xml/sidebar_menu_icon.xml

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+<!--    Advanced sidebar view-->
+    <t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1">
+        <xpath expr="//nav[hasclass('o_main_navbar')]" position="after">
+            <t t-name="AppsMenuSidebar">
+                <div class="cybro-sidebar-qweb">
+                    <div class="sidebar-menus" role="menu">
+                        <t t-foreach="menuService.getApps()" t-as="app"
+                           t-key="app_index">
+                         <a t-attf-href="#menu_id={{app.id}}">
+                            <img t-if="app.webIcon.includes('.png')"
+                                 t-att-title="app.name"
+                                 style="width: 40px !important;height: 40px !important; border-radius: 10px !important;margin: 5px 5px 5px 5px;"
+                                 t-attf-src="data:image/png;base64,{{app.webIconData}}"/>
+                             <img t-if="app.webIcon.includes('.svg')"
+                                  t-att-title="app.name"
+                                  style="width: 40px !important;height: 40px !important; border-radius: 10px !important;margin: 5px 5px 5px 5px;"
+                                  t-attf-src="data:image/svg+xml;base64,{{app.webIconData}}"/>
+                            </a>
+                        </t>
+                    </div>
+                </div>
+                <div class="sidebar_panel" id="sidebar_panel">
+                    <div class="sidebar">
+			            <div class="sidebar_close">
+				            <a id="closeSidebar" style="cursor: pointer;">
+                            </a>
+                        </div>
+                        <div class="search-container form-row align-items-center m-auto mb-5 col-12"
+                             style="padding-top: 32px;">
+                            <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>
+                        <ul class="sidebar_menu">
+	                         <t t-foreach="menuService.getApps()" t-as="app"
+                                t-key="app_index">
+		                    <li>
+		            	        <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-if="app.webIcon.includes('.png')"
+                                         t-att-title="app.name"
+                                         style="width: 40px !important;height: 40px !important;
+                                         border-radius: 10px !important;margin: 5px 5px 5px 5px;"
+                                         t-attf-src="data:image/png;base64,{{app.webIconData}}"/>
+                                    <img t-if="app.webIcon.includes('.svg')"
+                                         t-att-title="app.name"
+                                         style="width: 40px !important;height: 40px !important;
+                                         border-radius: 10px !important;margin: 5px 5px 5px 5px;"
+                                         t-attf-src="data:image/svg+xml;base64,{{app.webIconData}}"/>
+                                    <b class="a_app_menu_title"><t t-esc="app.name"/></b>
+		            	        </a>
+		                    </li>
+		    	        </t>
+	                </ul>
+	            </div>
+            </div>
+        </t>
+        </xpath>
+     </t>
+    <!--    Toggle icon for Advanced sidebar-->
+    <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; margin-left: 10px;">
+                        <i class="fa fa-bars fa-lg"/>
+                    </a>
+                    <a id="closeSidebar"
+                       style="display: none; cursor: pointer; margin-left: 10px;">
+                        <i class="fa fa-bars fa-lg"/>
+                    </a>
+                </li>
+            </xpath>
+        </t>
+    <!--    Show search result apps-->
+    <t t-name="multicolor_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>
+</templates>

multicolor_backend_theme/static/src/xml/systray_ext.xml

@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates>
+    <!--    Systray view-->
+    <t t-name="multicolor_backend_theme.systray.ThemeMenu">
+        <li class="themes_selector_li">
+            <a class="themes_selector_button"
+               data-display="static" aria-expanded="false" title="Themes"
+               role="button">
+                <t t-if="widget.administrator">
+                    <i class="fa fa-paint-brush" role="img"
+                       aria-label="Themes Configuration"/>
+                </t>
+            </a>
+            <!--            Theme customization -->
+            <div class="themes_selector dropdown-menu-right"
+                 role="menu">
+                <div class="row">
+                    <div class="themes_list">
+                        <div class="row theme_obj">
+                            <select class="theme_select">
+                                <t t-foreach="widget.theme_data"
+                                   t-as="theme_data">
+                                    <t t-if="widget.selected_theme.id == theme_data.id">
+                                        <option t-att-id="theme_data.id"
+                                                selected="selected"
+                                                t-att-value="theme_data.id">
+                                            <span t-esc="theme_data.name"/>
+                                        </option>
+                                    </t>
+                                    <t t-else="widget.selected_theme.id == theme_data.id">
+                                        <option t-att-id="theme_data.id"
+                                                t-att-value="theme_data.id">
+                                            <span t-esc="theme_data.name"/>
+                                        </option>
+                                    </t>
+                                </t>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="selected_theme">
+                        <t t-call="multicolor_backend_theme.selected_theme"/>
+                    </div>
+                </div>
+                <!--View for Theme create, remove and apply buttons-->
+                <div class="header_buttons row">
+                    <div class="button-create cell">
+                        Create
+                    </div>
+                    <div class="button-remove cell">
+                        Remove
+                    </div>
+                    <div class="button-apply cell fa fa-check">
+                        Apply
+                    </div>
+                </div>
+
+            </div>
+        </li>
+    </t>
+    <t t-name="multicolor_backend_theme.selected_theme">
+        <div class="theme_data">
+            <t t-set="selected_theme" t-value="widget.selected_theme"/>
+            <div class="theme_extra">
+                <t t-if="selected_theme.theme_active==true">
+                    <div class="theme-active">
+                        <p>Active</p>
+                    </div>
+                </t>
+            </div>
+            <div class="row name">
+                <div class="cell">
+                    <p>Name</p>
+                </div>
+                <div class="cell">
+                    <input type="text"
+                           id="name"
+                           readonly="readonly"
+                           t-att-value="selected_theme.name"/>
+                    <i class="fa fa-pencil"></i>
+                </div>
+            </div>
+            <!--            Color selector -->
+            <div class="color_selector">
+                <div class="row theme_main_color">
+                    <div class="cell">
+                        <p>Base color</p>
+                    </div>
+                    <div class="cell">
+                        <div class="color" id="theme_main_color"
+                             t-att-style="'background-color:'+selected_theme.theme_main_color"/>
+                    </div>
+                </div>
+                <div class="row theme_font_color">
+                    <div class="cell">
+                        <p>Font color</p>
+                    </div>
+                    <div class="cell">
+                        <div class="color" id="theme_font_color"
+                             t-att-style="'background-color:'+selected_theme.theme_font_color"/>
+                    </div>
+                </div>
+                <div class="row view_font_color">
+                    <div class="cell">
+                        <p>View font color</p>
+                    </div>
+                    <div class="cell">
+                        <div class="color" id="view_font_color"
+                             t-att-style="'background-color:'+selected_theme.view_font_color"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>

multicolor_backend_theme/views/login_templates.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<!--    Login page view-->
+    <template id="login_templated_ext" inherit_id="web.login"
+              name="Login Ext">
+        <xpath expr="//button[@type='submit'][1]" position="replace">
+            <button type="submit"
+                    class="btn btn-primary btn-block cybro-login-btn">Log
+                in
+            </button>
+        </xpath>
+        <xpath expr="//t[@t-if='debug']/button" position="replace">
+            <button type="submit" name="redirect"
+                    value="/web/become"
+                    class="btn btn-link btn-sm btn-block cybro-super-btn">Log in
+                as
+                superuser
+            </button>
+        </xpath>
+    </template>
+    <template id="layout" name="Main layout Ext"
+              inherit_id="portal.frontend_layout">
+        <xpath expr="//div[@id='wrapwrap']" position="attributes">
+            <attribute name="t-attf-class"
+                       add="cybro-bg #{pageName or ''} #{direction == 'rtl' and 'o_rtl' or ''} #{'o_portal' if is_portal else ''}"
+                       separator=" "/>
+        </xpath>
+    </template>
+    <template id="webclient_bootstrap_ext" inherit_id="web.webclient_bootstrap">
+        <xpath expr="//t[@t-set='head']" position="after">
+            <div class="cybro-sidebar"></div>
+        </xpath>
+    </template>
+</odoo>