change color theme

css/all.css

@@ -17,7 +17,7 @@ body {
     position: relative;
     margin: 0 auto;
     font-family: 'gudea';
-    background: #1a2233;
+    background: #f1f1f1;
 
 }
 .container-in {
@@ -37,8 +37,8 @@ a:focus {
 }
 .navbar {
     padding: 8px 10px;
-    background: #1a2233;
-    border-bottom: 1px solid #28303f;
+    background: #ffff;
+    border-bottom: 1px solid #ec5e69;
     border-radius: 0;
     margin-bottom: 40px;
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
@@ -64,7 +64,6 @@ a:focus {
     display: flex;
     width: 100%;
 }
-
 #sidebar {
     width: 180px;
     position: fixed;
@@ -72,22 +71,28 @@ a:focus {
     left: 0;
     height: 100vh;
     z-index: 999;
-    background: #131c2a;
-    color: #fff;
+    background: #ffffff;
+    color: #ec1c24;
     transition: all 0.3s;
 }
-
 #sidebar.active {
     margin-left: -250px;
 }
-
 #sidebar .sidebar-header {
-    padding: 20px;
-    background: #131c2a;
+    padding: 0;
+    background: #ffffff;
+    height: 57px;
+    border-bottom: 1px solid #ec5e69;
+}
+.width_img {
+    width: 120px;
+    float: none;
+    margin: auto;
+    padding: 14px;
 }
 #sidebar ul.components {
     padding: 20px 0;
-    border-bottom: 1px solid #1f2634;
+    border-bottom: 1px solid #ffffff;
 }
 
 #sidebar ul p {
@@ -98,19 +103,22 @@ a:focus {
     padding: 10px 30px;
     font-size: .875rem;
     display: block;
-    color: #b9c3ce;
+    color: #25344f;
 }
 #sidebar ul li a:hover {
     color: #ffffff;
-    background: rgb(47, 55, 70);
+    background: rgb(253, 75, 75);
 }
-
-#sidebar ul li.active>a,
-a[aria-expanded="true"] {
-    color: #fff;
-    background: #303747;
+#sidebar ul li.active>a, a[aria-expanded="true"] {
+    color: #fff!important;
+    background: #fd4b4b;
+}
+#sidebar a[aria-expanded="true"] i {
+    color: #ffffff!important;
+}
+#sidebar a[aria-expanded="true"]::after {
+    color: #ffffff!important;
 }
-
 a[data-toggle="collapse"] {
     position: relative;
 }
@@ -126,7 +134,7 @@ a[data-toggle="collapse"] {
 ul ul a {
     font-size: 0.9em !important;
     padding-left: 30px !important;
-    background: #1b2235;
+    background: #f1f1f1;
 }
 
 ul.CTAs {
@@ -195,7 +203,7 @@ a.article:hover {
     border: none;
 }
 .btncollapse i {
-    color: #fff;
+    color: #212529;
     cursor: pointer;
     font-size: 14px;
 }
@@ -207,7 +215,7 @@ a.article:hover {
     padding: 0 30px;
 }
 .nav-item a i{
-    color: #fff;
+    color: #212529;
 }
 .nav-item a i:hover{
     color: #c3c3c3;
@@ -614,7 +622,7 @@ table.dataTable tbody th, table.dataTable tbody td {
     transition: all 0.3s;
 }
 .list-unstyled .active i {
-    color: #ec5e69;
+    color: #ffffff;
 }
 .img-container {
     width: 90px;
@@ -1065,7 +1073,7 @@ section.lockscreen {
     vertical-align: middle;
 }
 #elementos i {
-    color: #ec5e69;
+    color: #25344f;
 }
 .error_page{
     display: table;
@@ -1641,4 +1649,12 @@ button.restore_btn:hover {
     width: 150px;
     float: right;
     text-align: center;
-}
+}
+#elementos:hover i {
+    color: #fff;
+    transition: all 0.3s;
+}
+.dropdown-toggle:hover::after {
+    transition: all 0.3s;
+    color: #ffffff;
+}

sidebar.php

@@ -26,7 +26,9 @@
         <!-- Sidebar  -->
         <nav id="sidebar">
             <div class="sidebar-header">
-                <img src="images/logo.png" alt="">
+                <div class="width_img">
+                    <img src="images/logo.png" alt="">
+                </div>
             </div>
             <ul class="list-unstyled components">
                 <li id="home" class="active">