Add side/top bar variables and minor changes.

client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue

@@ -173,6 +173,8 @@ export default {
         'light',
         'extra-light',
         'body-bg',
+        'sidebar-bg',
+        'topbar-bg',
       ],
       lightModeVariables: {
         'black': '#162425',

client/web/compose/src/components/Namespaces/NamespaceSidebar.vue

@@ -55,7 +55,7 @@
         v-if="namespace"
         class="d-flex flex-column flex-grow-1"
       >
-        <div class="sticky-top bg-white w-100 py-2">
+        <div class="sticky-top w-100 py-2">
           <b-button
             v-if="isAdminPage"
             data-test-id="button-public"

lib/vue/src/components/input/CInputDateTime/index.vue

@@ -130,6 +130,6 @@ export default {
 }
 
 .b-calendar-inner {
-  background-color: white;
+  background-color: var(--white);
 }
 </style>

lib/vue/src/components/navigation/CSidebar.vue

@@ -7,9 +7,9 @@
         v-model="isExpanded"
         data-test-id="sidebar"
         :sidebar-class="`sidebar ${isExpanded ? 'expanded' : ''}`"
-        :header-class="`bg-white d-block sidebar-header ${isExpanded ? 'expanded border-bottom p-2' : ''}`"
-        :body-class="`bg-white ${isExpanded ? 'px-3' : ''}`"
-        :footer-class="`bg-white rounded-right ${isExpanded ? 'px-2' : ''}`"
+        :header-class="`d-block sidebar-header ${isExpanded ? 'expanded border-bottom p-2' : ''}`"
+        :body-class="`${isExpanded ? 'px-3' : ''}`"
+        :footer-class="`rounded-right ${isExpanded ? 'px-2' : ''}`"
         :no-header="!isExpanded"
         :backdrop="isMobile"
         :shadow="isExpanded && 'sm'"
@@ -337,6 +337,10 @@ $header-height: 64px;
 <style lang="scss">
 $nav-width: 320px;
 
+.b-sidebar {
+  background-color: var(--sidebar-bg) !important;
+}
+
 .sidebar {
   display: flex !important;
   left: calc(-#{$nav-width}) !important;

lib/vue/src/components/navigation/CTopbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header-navigation d-flex flex-wrap align-items-center pr-3">
+  <div class="header-navigation d-flex flex-wrap align-items-center pr-3 pb-1 mb-2">
     <div
       class="spacer"
       :class="{
@@ -348,6 +348,7 @@ $nav-user-icon-size: 50px;
 .header-navigation {
   width: 100vw;
   min-height: $header-height;
+  background-color: var(--topbar-bg);
 }
 
 .avatar {

locale/en/corteza-webapp-admin/ui.settings.yaml

@@ -45,6 +45,8 @@ editor:
         light: Light
         extra-light: Extra light
         body-bg: Body background
+        sidebar-bg: Sidebar background
+        topbar-bg: Topbar background
 
   topbar:
     title: Topbar

server/assets/src/scss/theme/theme-specific.scss

@@ -1,6 +1,12 @@
 @if $theme-mode != "light" {
   [data-color-mode="#{$theme-mode}"] {
     // Buttons
+    .btn {
+      color: $body-color;
+      @include hover() {
+        color: $body-color;
+      }
+    }
     @each $color, $value in $theme-colors {
       .btn-#{$color} {
         @include button-variant($value, $value);
@@ -1719,5 +1725,10 @@
         );
       }
     }
+
+    // Custom corteza scss
+    .b-sidebar {
+      background-color: $sidebar-bg !important;
+    }
   }
 }

server/pkg/provision/stylesheet.go

@@ -99,7 +99,7 @@ func provisionTheme(ctx context.Context, s store.Storer, name string, themes []t
 func processNewTheme() (themes []types.Theme) {
 	lightModeValues := `
     {
-				"black":"#162425",
+        "black":"#162425",
         "white":"#FFFFFF",
         "primary":"#0B344E",
         "secondary":"#758D9B",
@@ -108,12 +108,14 @@ func processNewTheme() (themes []types.Theme) {
         "danger":"#E54122",
         "light":"#F3F5F7",
         "extra-light":"#E4E9EF",
-        "body-bg":"#F3F5F7"
+        "body-bg":"#F3F5F7",
+        "sidebar-bg": "#F3F5F7",
+        "topbar-bg": "#F3F5F7"
     }`
 
 	darkModeValues := `
     {
-				"black":"#FBF7F4",
+        "black":"#FBF7F4",
         "white":"#0B344E",
         "primary":"#FF9661",
         "secondary":"#758D9B",
@@ -122,7 +124,9 @@ func processNewTheme() (themes []types.Theme) {
         "danger":"#E54122",
         "light":"#768D9A",
         "extra-light":"#23495F",
-        "body-bg":"#092B40"
+        "body-bg":"#092B40",
+        "sidebar-bg": "#768D9A",
+        "topbar-bg": "#768D9A"
     }`
 
 	themes = []types.Theme{