feat: Add support for dark mode in dashboard (#7460)

- Add config for TailwindCSS - Enable HMR - Add a config in LocalStorage for Dark Mode Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2025-11-01 03:27:52 +00:00 · 2023-07-06 00:43:32 +05:30
parent 71837bedf9
commit 3054a4cb59
64 changed files with 390 additions and 854 deletions
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -3,7 +3,8 @@
    v-if="!authUIFlags.isFetching"
    id="app"
    class="app-wrapper app-root"
-    :class="{ 'app-rtl--wrapper': isRTLView }"
+    :class="{ 'app-rtl--wrapper': isRTLView, dark: theme === 'dark' }"
+    :dir="isRTLView ? 'rtl' : 'ltr'"
  >
    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
    <template v-if="!accountUIFlags.isFetchingItem && currentAccountId">
@@ -34,10 +35,12 @@ import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer';
 import rtlMixin from 'shared/mixins/rtlMixin';
+import { LocalStorage } from 'shared/helpers/localStorage';
 import {
  registerSubscription,
  verifyServiceWorkerExistence,
 } from './helper/pushHelper';
+import { LOCAL_STORAGE_KEYS } from './constants/localStorage';

 export default {
  name: 'App',
@@ -58,6 +61,7 @@ export default {
    return {
      showAddAccountModal: false,
      latestChatwootVersion: null,
+      theme: 'light',
    };
  },

@@ -89,9 +93,34 @@ export default {
    },
  },
  mounted() {
+    this.initializeColorTheme();
+    this.listenToThemeChanges();
    this.setLocale(window.chatwootConfig.selectedLocale);
  },
  methods: {
+    initializeColorTheme() {
+      this.setColorTheme(
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+      );
+    },
+    setColorTheme(isOSOnDarkMode) {
+      const selectedColorScheme =
+        LocalStorage.get(LOCAL_STORAGE_KEYS.COLOR_SCHEME) || 'light';
+      if (
+        (selectedColorScheme === 'auto' && isOSOnDarkMode) ||
+        selectedColorScheme === 'dark'
+      ) {
+        this.theme = 'dark';
+        document.body.classList.add('dark');
+      } else {
+        this.theme = 'light ';
+        document.body.classList.remove('dark');
+      }
+    },
+    listenToThemeChanges() {
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+      mql.onchange = e => this.setColorTheme(e.matches);
+    },
    setLocale(locale) {
      this.$root.$i18n.locale = locale;
    },
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -20,15 +20,6 @@ select {
  margin-left: var(--space-normal);
 }

-.tooltip {
-  background-color: var(--black-transparent);
-  border-radius: $space-smaller;
-  font-size: $font-size-mini;
-  max-width: var(--space-giga);
-  padding: $space-smaller $space-small;
-  z-index: 999;
-}
-
 code {
  border: 0;
  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
--- a/app/javascript/dashboard/assets/scss/_helper-classes.scss
+++ b/app/javascript/dashboard/assets/scss/_helper-classes.scss
@@ -1,5 +1,5 @@
 .bg-light {
-  @include background-light;
+  @apply bg-slate-25 dark:bg-slate-800;
 }

 .flex-center {
--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -22,43 +22,43 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 }

@mixin border-normal() {
-  border: 1px solid $color-border;
+  @apply border border-slate-50 dark:border-slate-700;
 }

@mixin border-normal-left() {
-  border-left: 1px solid $color-border;
+  @apply border-l border-slate-50 dark:border-slate-700;
 }

@mixin border-normal-top() {
-  border-top: 1px solid $color-border;
+  @apply border-t border-slate-50 dark:border-slate-700;
 }

@mixin border-normal-right() {
-  border-right: 1px solid $color-border;
+  @apply border-r border-slate-50 dark:border-slate-700;
 }

@mixin border-normal-bottom() {
-  border-bottom: 1px solid $color-border;
+  @apply border-b border-slate-50 dark:border-slate-700;
 }

@mixin border-light() {
-  border: 1px solid $color-border-light;
+  @apply border border-slate-25 dark:border-slate-700;
 }

@mixin border-light-left() {
-  border-left: 1px solid $color-border-light;
+  @apply border-l border-slate-25 dark:border-slate-700;
 }

@mixin border-light-top() {
-  border-top: 1px solid $color-border-light;
+  @apply border-t border-slate-25 dark:border-slate-700;
 }

@mixin border-light-right() {
-  border-right: 1px solid $color-border-light;
+  @apply border-r border-slate-25 dark:border-slate-700;
 }

@mixin border-light-bottom() {
-  border-bottom: 1px solid $color-border-light;
+  @apply border-b border-slate-25 dark:border-slate-700;
 }

 // background
@@ -67,11 +67,11 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 }

@mixin background-light() {
-  background: $color-background-light;
+  @apply bg-slate-50 dark:bg-slate-800;
 }

@mixin background-white() {
-  background: $color-white;
+  @apply bg-white dark:bg-slate-900;
 }

 // input form
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ b/app/javascript/dashboard/assets/scss/_rtl.scss
@@ -3,9 +3,6 @@

  // Primary sidebar
  .primary--sidebar {
-    border-left: 1px solid var(--s-50);
-    border-right: 0;
-
    .options-menu.dropdown-pane {
      right: var(--space-smaller);

@@ -42,15 +39,6 @@
        margin-right: unset;
      }

-      .account-context--group .account-context--switch-group {
-        --overlay-shadow: linear-gradient(
-          to left,
-          rgba(255, 255, 255, 0) 0%,
-          rgba(255, 255, 255, 1) 50%
-        );
-        background-image: var(--overlay-shadow);
-      }
-
      // Help center sidebar
      .sidebar-header--wrap .header-title--wrap {
        margin-left: unset;
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
@@ -43,17 +43,13 @@
 }

 .border-right {
-  border-right: 1px solid var(--color-border);
+  @apply border-r border-slate-50 dark:border-slate-700;
 }

 .border-left {
  border-left: 1px solid var(--color-border);
 }

-.bg-white {
-  background-color: var(--white);
-}
-
 .text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -1,3 +1,7 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
@import 'shared/assets/fonts/plus-jakarta';
@import 'shared/assets/stylesheets/animations';
@import 'shared/assets/stylesheets/colors';
@@ -67,3 +71,8 @@
@import 'plugins/dropdown';
@import '~shared/assets/stylesheets/ionicons';
@import 'utility-helpers';
+
+
+.tooltip {
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
+}
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
@@ -4,10 +4,8 @@

 // Conversation header - Light BG
 .settings-header {
-  @include background-white;
  @include flex;
  @include flex-align($x: justify, $y: middle);
-  border-bottom: 1px solid var(--s-50);
  height: $header-height;
  min-height: $header-height;
  padding: $space-small $space-normal;
@@ -128,8 +126,8 @@
 }

 .wizard-body {
-  @include background-white;
  @include border-light;
+  @include background-white;
  @include full-height();
  padding: $space-medium;

--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -8,6 +8,11 @@ $default-button-height: 2.5rem;

  .button__content {
    width: 100%;
+
+    img,
+    svg {
+      display: inline-block;
+    }
  }

  .spinner {
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -59,11 +59,6 @@ $resolve-button-width: 8.25rem;
  flex-direction: row;
  flex-grow: 1;
  justify-content: flex-end;
-  margin-top: var(--space-small);
-
-  @include breakpoint(medium up) {
-    margin-top: 0;
-  }

  &.has-open-sidebar {
    justify-content: flex-end;
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
@@ -82,6 +82,11 @@
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 16.875rem;
+
+    img,
+    svg {
+      display: inline-block;
+    }
  }

  .conversation--meta {
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -390,3 +390,42 @@
    margin-bottom: 0;
  }
 }
+
+.conversation-sidebar-wrap {
+  flex: 0 0;
+  flex-basis: 100%;
+  height: auto;
+  overflow: auto;
+  z-index: var(--z-index-low);
+
+  @include breakpoint(medium up) {
+    flex-basis: 17.5rem;
+  }
+
+  @include breakpoint(large up) {
+    flex-basis: 18.75rem;
+  }
+
+  @include breakpoint(xlarge up) {
+    flex-basis: 19.375rem;
+  }
+
+  @include breakpoint(xxlarge up) {
+    flex-basis: 20.625rem;
+  }
+
+  @include breakpoint(xxxlarge up) {
+    flex-basis: 25rem;
+  }
+}
+
+
+.activity-wrap {
+  .message-text--metadata {
+    .time {
+      @include breakpoint(xlarge up) {
+        margin-left: var(--space-small);
+      }
+    }
+  }
+}
--- a/app/javascript/dashboard/assets/scss/widgets/_forms.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_forms.scss
@@ -61,3 +61,7 @@ input {
    border-color: var(--r-400);
  }
 }
+
+label {
+  @apply dark:text-slate-300;
+}
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -34,7 +34,6 @@
 .modal-container {
  @include normal-shadow;

-  background-color: $color-white;
  border-radius: $space-smaller;
  max-height: 100%;
  overflow: auto;
--- a/app/javascript/dashboard/assets/scss/widgets/_states.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_states.scss
@@ -1,18 +1,3 @@
-.loading-state {
-  padding: $space-jumbo $space-smaller;
-
-  .message {
-    color: $color-gray;
-    display: block;
-    text-align: center;
-    width: 100%;
-  }
-
-  .spinner {
-    float: none;
-    top: -$space-smaller;
-  }
-}

 // EMPTY STATES
 .empty-state {
--- a/app/javascript/dashboard/assets/scss/widgets/_widget_builder.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_widget_builder.scss
--- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
@@ -4,15 +4,13 @@ table {

  thead {
    th {
-      font-weight: var(--font-weight-bold);
-      text-align: left;
-      text-transform: uppercase;
+      @apply font-medium text-left uppercase text-slate-900 dark:text-slate-200;
    }
  }

  tbody {
    tr {
-      border-bottom: 1px solid var(--color-border-light);
+      @apply border-b border-slate-50 dark:border-slate-700;
    }

    td {
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -956,8 +956,6 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~dashboard/assets/scss/woot';
-
 .spinner {
  margin-top: var(--space-normal);
  margin-bottom: var(--space-normal);
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -52,7 +52,8 @@ export default {
  },
  computed: {
    modalContainerClassName() {
-      let className = 'modal-container skip-context-menu';
+      let className =
+        'modal-container bg-white dark:bg-slate-800 skip-context-menu';
      if (this.fullWidth) {
        return `${className} modal-container--full-width`;
      }
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="column page-top-bar">
    <img v-if="headerImage" :src="headerImage" alt="No image" />
-    <h2 class="page-sub-title">
+    <h2 class="text-slate-800 text-lg dark:text-slate-100">
      {{ headerTitle }}
    </h2>
    <p v-if="headerContent" class="small-12 column wrap-content">
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -3,8 +3,8 @@
    size="small"
    variant="clear"
    color-scheme="secondary"
+    class="-ml-3 text-black-900 dark:text-slate-300"
    icon="list"
-    class="toggle-sidebar"
    @click="onMenuItemClick"
  />
 </template>
@@ -20,8 +20,3 @@ export default {
  },
 };
 </script>
-<style scoped lang="scss">
-.toggle-sidebar {
-  margin-left: var(--space-minus-small);
-}
-</style>
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <aside class="woot-sidebar">
+  <aside class="h-full flex">
    <primary-sidebar
      :logo-source="globalConfig.logoThumbnail"
      :installation-name="globalConfig.installationName"
@@ -11,7 +11,7 @@
      @key-shortcut-modal="toggleKeyShortcutModal"
      @open-notification-panel="openNotificationPanel"
    />
-    <div class="secondary-sidebar">
+
    <secondary-sidebar
      v-if="showSecondarySidebar"
      :class="sidebarClassName"
@@ -26,7 +26,6 @@
      @add-label="showAddLabelPopup"
      @toggle-accounts="toggleAccountModal"
    />
-    </div>
  </aside>
 </template>

@@ -214,87 +213,3 @@ export default {
  },
 };
 </script>
-
-<style lang="scss" scoped>
-.woot-sidebar {
-  background: var(--white);
-  display: flex;
-  min-height: 0;
-  height: 100%;
-  width: fit-content;
-}
-</style>
-
-<style lang="scss">
-@import '~dashboard/assets/scss/variables';
-
-.account-selector--modal {
-  .modal-container {
-    width: 25rem;
-  }
-}
-
-.secondary-sidebar {
-  overflow-y: auto;
-  height: 100%;
-}
-
-.account-selector {
-  cursor: pointer;
-  padding: $space-small $space-large;
-
-  .selected--account {
-    margin-top: -$space-smaller;
-
-    & + .account--details {
-      padding-left: $space-normal - $space-micro;
-    }
-  }
-
-  .account--details {
-    padding-left: $space-large + $space-smaller;
-  }
-
-  &:last-child {
-    margin-bottom: $space-large;
-  }
-
-  a {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-
-    .account--name {
-      cursor: pointer;
-      font-size: $font-size-medium;
-      font-weight: $font-weight-medium;
-      line-height: 1;
-    }
-
-    .account--role {
-      cursor: pointer;
-      font-size: $font-size-mini;
-      text-transform: capitalize;
-    }
-  }
-}
-
-.app-context-menu {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  height: 3.75rem;
-}
-
-.current-user--options {
-  font-size: $font-size-big;
-  margin-bottom: auto;
-  margin-left: auto;
-  margin-top: auto;
-}
-
-.secondary-menu .nested.vertical.menu {
-  margin-left: var(--space-small);
-}
-</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -1,26 +1,30 @@
 <template>
  <div
    v-if="showShowCurrentAccountContext"
-    class="account-context--group"
+    class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
    @mouseover="setShowSwitch"
    @mouseleave="resetShowSwitch"
  >
    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
-    <p class="account-context--name text-ellipsis">
+    <p class="text-ellipsis font-medium mb-0">
      {{ account.name }}
    </p>
    <transition name="fade">
-      <div v-if="showSwitchButton" class="account-context--switch-group">
+      <div
+        v-if="showSwitchButton"
+        class="bg-gradient-to-r rtl:bg-gradient-to-l from-transparent via-white dark:via-slate-700 to-white dark:to-slate-700 flex items-center h-full justify-end absolute top-0 right-0 w-full"
+      >
+        <div class="my-0 mx-2">
          <woot-button
            variant="clear"
            size="tiny"
            icon="arrow-swap"
-          class="switch-button"
            @click="$emit('toggle-accounts')"
          >
            {{ $t('SIDEBAR.SWITCH') }}
          </woot-button>
        </div>
+      </div>
    </transition>
  </div>
 </template>
@@ -51,51 +55,6 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.account-context--group {
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  font-size: var(--font-size-mini);
-  padding: var(--space-small);
-  margin: var(--space-small) var(--space-small) 0 var(--space-small);
-  position: relative;
-
-  &:hover {
-    background: var(--b-100);
-  }
-
-  .account-context--name {
-    font-weight: var(--font-weight-medium);
-    margin-bottom: 0;
-  }
-}
-
-.switch-button {
-  margin: 0 var(--space-small);
-}
-
-.account-context--switch-group {
-  --overlay-shadow: linear-gradient(
-    to right,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 1) 50%
-  );
-
-  align-items: center;
-  background-image: var(--overlay-shadow);
-  border-top-left-radius: 0;
-  border-top-right-radius: var(--border-radius-normal);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: var(--border-radius-normal);
-  display: flex;
-  height: 100%;
-  justify-content: flex-end;
-  opacity: 1;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 100%;
-}
-
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 300ms ease;
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -2,31 +2,38 @@
  <woot-modal
    :show="showAccountModal"
    :on-close="() => $emit('close-account-modal')"
-    class="account-selector--modal"
  >
    <woot-modal-header
      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
    />
-    <div class="account-selector--wrap">
+    <div class="px-8 pt-4 pb-8">
      <div
        v-for="account in currentUser.accounts"
        :key="account.id"
-        class="account-selector"
+        class="pt-0 pb-0"
      >
        <button
-          class="button expanded clear link"
+          class="flex justify-between items-center expanded clear link cursor-pointer px-4 py-3 w-full rounded-lg hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
          @click="onChangeAccount(account.id)"
        >
-          <span class="button__content">
-            <label :for="account.name" class="account-details--wrap">
-              <div class="account--name">{{ account.name }}</div>
-              <div class="account--role">{{ account.role }}</div>
+          <span class="w-full">
+            <label :for="account.name" class="text-left rtl:text-right">
+              <div
+                class="text-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
+              >
+                {{ account.name }}
+              </div>
+              <div
+                class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
+              >
+                {{ account.role }}
+              </div>
            </label>
          </span>
          <fluent-icon
            v-show="account.id === accountId"
-            class="selected--account"
+            class="text-slate-800 dark:text-slate-100"
            icon="checkmark-circle"
            type="solid"
            size="24"
@@ -74,32 +81,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-.account-selector--wrap {
-  margin-top: var(--space-normal);
-}
-.account-selector {
-  padding-top: 0;
-  padding-bottom: 0;
-  .button {
-    display: flex;
-    justify-content: space-between;
-    padding: var(--space-one) var(--space-normal);
-    .account-details--wrap {
-      text-align: left;
-      .account--name {
-        cursor: pointer;
-        font-size: var(--font-size-medium);
-        font-weight: var(--font-weight-medium);
-        line-height: 1;
-      }
-
-      .account--role {
-        cursor: pointer;
-        font-size: var(--font-size-mini);
-        text-transform: capitalize;
-      }
-    }
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="logo">
+  <div class="w-8 h-8">
    <router-link :to="dashboardPath" replace>
      <img :src="source" :alt="name" />
    </router-link>
@@ -30,17 +30,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-$logo-size: 32px;
-
-.logo {
-  padding: var(--space-normal);
-
-  img {
-    width: $logo-size;
-    height: $logo-size;
-    object-fit: cover;
-    object-position: left center;
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,15 +1,25 @@
 <template>
-  <div class="notifications-link">
-    <woot-button
-      class-names="notifications-link--button"
-      variant="clear"
-      color-scheme="secondary"
-      :class="{ 'is-active': isNotificationPanelActive }"
+  <div class="mb-4">
+    <button
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
+      }"
      @click="openNotificationPanel"
    >
-      <fluent-icon icon="alert" />
-      <span v-if="unreadCount" class="badge warning">{{ unreadCount }}</span>
-    </woot-button>
+      <fluent-icon
+        icon="alert"
+        :class="{
+          'text-woot-500': isNotificationPanelActive,
+        }"
+      />
+      <span
+        v-if="unreadCount"
+        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 p-1 text-xxs min-w-[1rem] rounded-full"
+      >
+        {{ unreadCount }}
+      </span>
+    </button>
  </div>
 </template>
 <script>
@@ -43,37 +53,3 @@ export default {
  },
 };
 </script>
-
-<style scoped lang="scss">
-.notifications-link {
-  margin-bottom: var(--space-small);
-}
-
-.badge {
-  position: absolute;
-  right: var(--space-minus-smaller);
-  top: var(--space-minus-smaller);
-}
-.notifications-link--button {
-  display: flex;
-  position: relative;
-  border-radius: var(--border-radius-large);
-  border: 1px solid transparent;
-  color: var(--s-600);
-  margin: var(--space-small) 0;
-
-  &:hover {
-    background: var(--w-50);
-    color: var(--s-600);
-  }
-
-  &:focus {
-    border-color: var(--w-500);
-  }
-
-  &.is-active {
-    background: var(--w-50);
-    color: var(--w-500);
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -7,7 +7,6 @@
      :class="{ 'dropdown-pane--open': show }"
    >
      <availability-status />
-      <li class="divider" />
      <woot-dropdown-menu>
        <woot-dropdown-item v-if="showChangeAccountOption">
          <woot-button
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -1,11 +1,14 @@
 <template>
-  <div class="primary--sidebar">
+  <div
+    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-700 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
+  >
+    <div class="flex flex-col items-center">
      <logo
        :source="logoSource"
        :name="installationName"
        :account-id="accountId"
+        class="m-4 mb-10"
      />
-    <nav class="menu vertical">
      <primary-nav-item
        v-for="menuItem in menuItems"
        :key="menuItem.toState"
@@ -14,8 +17,8 @@
        :to="menuItem.toState"
        :is-child-menu-active="menuItem.key === activeMenuItem"
      />
-    </nav>
-    <div class="menu vertical user-menu">
+    </div>
+    <div class="flex flex-col items-center justify-end pb-6">
      <primary-nav-item
        v-if="!isACustomBrandedInstance"
        icon="book-open-globe"
@@ -101,27 +104,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-.primary--sidebar {
-  display: flex;
-  flex-direction: column;
-  width: var(--space-jumbo);
-  border-right: 1px solid var(--s-50);
-  box-sizing: content-box;
-  height: 100%;
-  flex-shrink: 0;
-}
-
-.menu {
-  align-items: center;
-  margin-top: var(--space-medium);
-}
-
-.user-menu {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  justify-content: flex-end;
-  margin-bottom: var(--space-normal);
-}
-</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
@@ -3,15 +3,28 @@
    <a
      v-tooltip.right="$t(`SIDEBAR.${name}`)"
      :href="href"
-      class="button clear button--only-icon menu-item"
-      :class="{ 'is-active': isActive || isChildMenuActive }"
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isActive || isChildMenuActive,
+      }"
      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
      :target="openInNewPage ? '_blank' : undefined"
      @click="navigate"
    >
-      <fluent-icon :icon="icon" />
-      <span class="show-for-sr">{{ name }}</span>
-      <span v-if="count" class="badge warning">{{ count }}</span>
+      <fluent-icon
+        :icon="icon"
+        :class="{
+          'text-woot-500': isActive || isChildMenuActive,
+        }"
+      />
+      <span class="sr-only">{{ name }}</span>
+      <span
+        v-if="count"
+        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
+      >
+        {{ count }}
+      </span>
    </a>
  </router-link>
 </template>
@@ -45,40 +58,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-.button {
-  margin: var(--space-small) 0;
-}
-
-.menu-item {
-  display: inline-flex;
-  position: relative;
-  border-radius: var(--border-radius-large);
-  border: 1px solid transparent;
-  color: var(--s-600);
-
-  &:hover {
-    background: var(--w-25);
-    color: var(--s-600);
-  }
-
-  &:focus {
-    border-color: var(--w-500);
-  }
-
-  &.is-active {
-    background: var(--w-50);
-    color: var(--w-500);
-  }
-}
-
-.icon {
-  font-size: var(--font-size-default);
-}
-
-.badge {
-  position: absolute;
-  right: var(--space-minus-smaller);
-  top: var(--space-minus-smaller);
-}
-</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -1,7 +1,14 @@
 <template>
-  <div v-if="hasSecondaryMenu" class="main-nav secondary-menu">
+  <div
+    v-if="hasSecondaryMenu"
+    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
+  >
    <account-context @toggle-accounts="toggleAccountModal" />
-    <transition-group name="menu-list" tag="ul" class="menu vertical">
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="pt-2 list-none ml-0 mb-0"
+    >
      <secondary-nav-item
        v-for="menuItem in accessibleMenuItems"
        :key="menuItem.toState"
@@ -249,27 +256,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/woot';
-
-.secondary-menu {
-  display: flex;
-  flex-direction: column;
-  background: var(--white);
-  border-right: 1px solid var(--s-50);
-  height: 100%;
-  width: 12.5rem;
-  flex-shrink: 0;
-  overflow-y: hidden;
-  position: unset;
-
-  &:hover {
-    overflow-y: hidden;
-  }
-
-  .menu {
-    padding: var(--space-small);
-    overflow-y: auto;
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -5,38 +5,69 @@
    custom
    active-class="active"
  >
-    <li :class="{ active: isActive }">
-      <a
-        :href="href"
-        class="button clear menu-item text-truncate"
-        :class="{ 'is-active': isActive, 'text-truncate': shouldTruncate }"
+    <li
+      class="font-medium h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
+      :class="{
+        'bg-woot-25 dark:bg-slate-800': isActive,
+        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
+      }"
      @click="navigate"
    >
-        <span v-if="icon" class="badge--icon">
-          <fluent-icon class="inbox-icon" :icon="icon" size="12" />
+      <a
+        :href="href"
+        class="inline-flex text-left max-w-full w-full items-center"
+      >
+        <span
+          v-if="icon"
+          class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
+        >
+          <fluent-icon
+            class="text-xxs text-slate-600 dark:text-slate-200"
+            :class="{
+              'text-woot-500 dark:text-woot-500': isActive,
+            }"
+            :icon="icon"
+            size="12"
+          />
        </span>
+
        <span
          v-if="labelColor"
-          class="badge--label"
+          class="inline-flex rounded-sm bg-slate-100 h-3 w-3.5 mr-1.5 rtl:mr-0 rtl:ml-1.5 border border-slate-50 dark:border-slate-900"
          :style="{ backgroundColor: labelColor }"
        />
+        <div
+          class="items-center flex overflow-hidden whitespace-nowrap text-ellipsis w-full justify-between"
+        >
          <span
            :title="menuTitle"
-          class="menu-label button__content"
-          :class="{ 'text-truncate': shouldTruncate }"
+            class="text-sm text-slate-600 dark:text-slate-100"
+            :class="{
+              'text-woot-500 dark:text-woot-500': isActive,
+              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
+            }"
          >
            {{ label }}
-          <span v-if="showChildCount" class="count-view">
+          </span>
+          <span
+            v-if="showChildCount"
+            class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
+            :class="
+              isCountZero
+                ? `text-slate-300 dark:text-slate-600`
+                : `text-slate-600 dark:text-slate-50`
+            "
+          >
            {{ childItemCount }}
          </span>
-        </span>
-        <span v-if="count" class="badge" :class="{ secondary: !isActive }">
-          {{ count }}
-        </span>
-        <span v-if="warningIcon" class="badge--icon">
+        </div>
+        <span
+          v-if="warningIcon"
+          class="inline-flex rounded-sm mr-1 bg-slate-100"
+        >
          <fluent-icon
            v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
-            class="inbox-icon"
+            class="text-xxs"
            :icon="warningIcon"
            size="12"
          />
@@ -72,10 +103,6 @@ export default {
      type: String,
      default: '',
    },
-    count: {
-      type: String,
-      default: '',
-    },
    showChildCount: {
      type: Boolean,
      default: false,
@@ -89,96 +116,12 @@ export default {
    showIcon() {
      return { 'text-truncate': this.shouldTruncate };
    },
+    isCountZero() {
+      return this.childItemCount === 0;
+    },
    menuTitle() {
      return this.shouldTruncate ? this.label : '';
    },
  },
 };
 </script>
-<style lang="scss" scoped>
-$badge-size: var(--space-normal);
-$label-badge-size: var(--space-slab);
-
-.button {
-  margin: var(--space-small) 0;
-}
-
-.menu-item {
-  display: inline-flex;
-  color: var(--s-600);
-  font-weight: var(--font-weight-medium);
-  width: 100%;
-  height: var(--space-medium);
-  padding: var(--space-smaller) var(--space-smaller);
-  margin: var(--space-smaller) 0;
-  text-align: left;
-  line-height: 1.2;
-
-  &:hover {
-    background: var(--s-25);
-    color: var(--s-600);
-  }
-
-  &:focus {
-    border-color: var(--w-300);
-  }
-
-  &.is-active {
-    background: var(--w-25);
-    color: var(--w-500);
-    border-color: var(--w-25);
-  }
-  &.is-active .count-view {
-    background: var(--w-75);
-    color: var(--w-500);
-  }
-}
-
-.menu-label {
-  flex-grow: 1;
-}
-
-.inbox-icon {
-  font-size: var(--font-size-nano);
-}
-
-.badge--label,
-.badge--icon {
-  display: inline-flex;
-  border-radius: var(--border-radius-small);
-  margin-right: var(--space-smaller);
-  background: var(--s-100);
-}
-
-.badge--icon {
-  align-items: center;
-  height: $badge-size;
-  justify-content: center;
-  min-width: $badge-size;
-}
-
-.badge--label {
-  height: $label-badge-size;
-  min-width: $label-badge-size;
-  margin-left: var(--space-smaller);
-  border: 1px solid var(--color-border-light);
-}
-
-.badge.secondary {
-  min-width: unset;
-  background: var(--s-75);
-  color: var(--s-600);
-  font-weight: var(--font-weight-bold);
-}
-
-.count-view {
-  background: var(--s-50);
-  border-radius: var(--border-radius-normal);
-  color: var(--s-600);
-  font-size: var(--font-size-micro);
-  font-weight: var(--font-weight-bold);
-  margin-left: var(--space-smaller);
-  padding: var(--space-zero) var(--space-smaller);
-  line-height: var(--font-size-small);
-}
-</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -1,46 +1,41 @@
 <template>
-  <li v-show="isMenuItemVisible" class="sidebar-item">
-    <div v-if="hasSubMenu" class="secondary-menu--wrap">
-      <span class="secondary-menu--header fs-small">
+  <li v-show="isMenuItemVisible" class="mt-1">
+    <div v-if="hasSubMenu" class="flex justify-between">
+      <span
+        class="text-sm text-slate-700 dark:text-slate-200 font-semibold my-2 px-2 pt-1"
+      >
        {{ $t(`SIDEBAR.${menuItem.label}`) }}
      </span>
-      <div v-if="menuItem.showNewButton" class="submenu-icons">
-        <woot-button
-          size="tiny"
-          variant="clear"
-          color-scheme="secondary"
-          icon="add"
-          class="submenu-icon"
-          @click="onClickOpen"
-        />
-      </div>
    </div>
    <router-link
      v-else
-      class="secondary-menu--title secondary-menu--link fs-small"
+      class="rounded-lg leading-4 font-medium flex items-center p-2 m-0 text-sm text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
      :class="computedClass"
      :to="menuItem && menuItem.toState"
    >
      <fluent-icon
        :icon="menuItem.icon"
-        class="secondary-menu--icon"
+        class="min-w-[1rem] mr-2 rtl:mr-0 rtl:ml-2"
        size="14"
      />
      {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      <span v-if="showChildCount(menuItem.count)" class="count-view">
+      <span
+        v-if="showChildCount(menuItem.count)"
+        class="rounded-xl text-xxs font-medium mx-1 py-0 px-1"
+      >
        {{ `${menuItem.count}` }}
      </span>
      <span
        v-if="menuItem.beta"
        data-view-component="true"
        label="Beta"
-        class="beta"
+        class="px-1 mx-1 inline-block font-medium leading-4 border border-green-400 text-green-500 rounded-lg text-xxs"
      >
        {{ $t('SIDEBAR.BETA') }}
      </span>
    </router-link>

-    <ul v-if="hasSubMenu" class="nested vertical menu">
+    <ul v-if="hasSubMenu" class="list-none ml-0 mb-0">
      <secondary-child-nav-item
        v-for="child in menuItem.children"
        :key="child.id"
@@ -55,21 +50,21 @@
      />
      <router-link
        v-if="showItem(menuItem)"
-        v-slot="{ href, isActive, navigate }"
+        v-slot="{ href, navigate }"
        :to="menuItem.toState"
        custom
      >
-        <li class="menu-item--new">
-          <a
-            :href="href"
-            class="button small link clear secondary"
-            :class="{ 'is-active': isActive }"
+        <li class="pl-1">
+          <a :href="href">
+            <woot-button
+              size="tiny"
+              variant="clear"
+              color-scheme="secondary"
+              icon="add"
              @click="e => newLinkClick(e, navigate)"
            >
-            <fluent-icon icon="add" size="16" />
-            <span class="button__content">
              {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
-            </span>
+            </woot-button>
          </a>
        </li>
      </router-link>
@@ -178,7 +173,7 @@ export default {
        this.isUnattended ||
        this.isCurrentRoute
      ) {
-        return 'is-active';
+        return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500';
      }
      if (this.hasSubMenu) {
        if (
@@ -187,12 +182,12 @@ export default {
          this.isIntegrationsSettings ||
          this.isApplicationsSettings
        ) {
-          return 'is-active';
+          return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500';
        }
-        return ' ';
+        return 'hover:text-slate-700 dark:hover:text-slate-100';
      }

-      return '';
+      return 'hover:text-slate-700 dark:hover:text-slate-100';
    },
  },
  methods: {
@@ -233,132 +228,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-.sidebar-item {
-  margin: var(--space-smaller) 0 0;
-}
-
-.secondary-menu--wrap {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--space-small);
-}
-
-.secondary-menu--header {
-  color: var(--s-700);
-  display: flex;
-  font-weight: var(--font-weight-bold);
-  line-height: var(--space-normal);
-  margin: var(--space-small) 0;
-  padding: 0 var(--space-small);
-}
-.secondary-menu--title {
-  color: var(--s-600);
-  display: flex;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--space-normal);
-  margin: var(--space-small) 0;
-  padding: 0 var(--space-small);
-}
-
-.secondary-menu--link {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  padding: var(--space-small);
-  font-weight: var(--font-weight-medium);
-  border-radius: var(--border-radius-normal);
-  color: var(--s-700);
-
-  &:hover {
-    background: var(--s-25);
-    color: var(--s-600);
-  }
-
-  &:focus {
-    border-color: var(--w-300);
-  }
-
-  &.router-link-exact-active,
-  &.is-active {
-    background: var(--w-25);
-    color: var(--w-500);
-    border-color: var(--w-25);
-  }
-
-  &.is-active .count-view {
-    background: var(--w-75);
-    color: var(--w-600);
-  }
-}
-
-.secondary-menu--icon {
-  margin-right: var(--space-smaller);
-  min-width: var(--space-normal);
-}
-
-.sub-menu-link {
-  color: var(--s-600);
-}
-
-.wrap {
-  display: flex;
-  align-items: center;
-}
-
-.label-color--display {
-  border-radius: var(--space-smaller);
-  height: var(--space-normal);
-  margin-right: var(--space-small);
-  min-width: var(--space-normal);
-  width: var(--space-normal);
-}
-
-.inbox-icon {
-  position: relative;
-  top: -1px;
-}
-
-.sidebar-item .menu-item--new {
-  padding: var(--space-small) 0;
-
-  .button {
-    display: inline-flex;
-    color: var(--s-500);
-  }
-}
-
-.beta {
-  padding-right: var(--space-smaller) !important;
-  padding-left: var(--space-smaller) !important;
-  margin: 0 var(--space-smaller) !important;
-  display: inline-block;
-  font-size: var(--font-size-micro);
-  font-weight: var(--font-weight-medium);
-  line-height: 14px;
-  border: 1px solid transparent;
-  border-radius: 2em;
-  color: var(--g-800);
-  border-color: var(--g-700);
-}
-
-.count-view {
-  background: var(--s-50);
-  border-radius: var(--border-radius-normal);
-  color: var(--s-600);
-  font-size: var(--font-size-micro);
-  font-weight: var(--font-weight-bold);
-  margin: 0 var(--space-smaller);
-  padding: var(--space-zero) var(--space-smaller);
-}
-
-.submenu-icons {
-  display: flex;
-  align-items: center;
-
-  .submenu-icon {
-    padding: 0;
-    margin-left: var(--space-small);
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -5,7 +5,7 @@
      delay: { show: 1500, hide: 0 },
      hideOnClick: true,
    }"
-    class="time-ago"
+    class="text-xxs text-black-600 leading-4 ml-auto hover:text-black-900"
  >
    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
  </div>
@@ -109,16 +109,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-.time-ago {
-  color: var(--b-600);
-  font-size: var(--font-size-micro);
-  font-weight: var(--font-weight-normal);
-  line-height: var(--space-normal);
-  margin-left: auto;
-
-  &:hover {
-    color: var(--b-900);
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/widgets/LoadingState.vue
+++ b/app/javascript/dashboard/components/widgets/LoadingState.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="row loading-state">
-    <h6 class="message">{{ message }}<span class="spinner" /></h6>
+  <div class="flex items-center justify-center p-8">
+    <h6
+      class="block text-base text-center w-100 text-slate-800 dark:text-slate-300"
+    >
+      <span class="mr-3">{{ message }}</span>
+      <span class="spinner" />
+    </h6>
  </div>
 </template>
 <script>
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -121,8 +121,7 @@ export default {
 .top-box {
  display: flex;
  justify-content: space-between;
-
-  background: var(--b-50);
+  @apply bg-black-50 dark:bg-slate-800;
 }

 .button-group {
@@ -145,11 +144,11 @@ export default {

  .button--reply {
    border-radius: 0;
-    border-right: 1px solid var(--color-border);
+    @apply border-r border-slate-50 dark:border-slate-700;

    &:hover,
    &:focus {
-      border-right: 1px solid var(--color-border);
+      @apply border-r border-slate-50 dark:border-slate-700;
    }
  }

@@ -157,7 +156,7 @@ export default {
    border-radius: 0;

    &.is-active {
-      border-right: 1px solid var(--color-border);
+      @apply border-r border-slate-50 dark:border-slate-700;
      background: var(--y-50);
    }

--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="conversation-details-wrap"
+    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
    :class="{ 'with-border-right': !isOnExpandedLayout }"
  >
    <conversation-header
@@ -23,7 +23,10 @@
        :show-badge="false"
      />
    </woot-tabs>
-    <div v-show="!activeIndex" class="messages-and-sidebar">
+    <div
+      v-show="!activeIndex"
+      class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
+    >
      <messages-view
        v-if="currentChat.id"
        :inbox-id="inboxId"
@@ -139,16 +142,14 @@ export default {
 </script>
 <style lang="scss" scoped>
@import '~dashboard/assets/scss/woot';
-
 .conversation-details-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
-  background: var(--color-background-light);

  &.with-border-right {
-    border-right: 1px solid var(--color-border);
+    @apply border-r border-slate-50 dark:border-slate-700;
  }
 }

@@ -158,20 +159,8 @@ export default {
  min-height: var(--dashboard-app-tabs-height);
 }

-.messages-and-sidebar {
-  display: flex;
-  background: var(--color-background-light);
-  margin: 0;
-  height: 100%;
-  min-height: 0;
-}
-
 .conversation-sidebar-wrap {
-  border-right: 1px solid var(--color-border);
-  height: auto;
-  flex: 0 0;
-  z-index: var(--z-index-low);
-  overflow: auto;
+  @apply border-r border-slate-50 dark:border-slate-700;
  background: white;
  flex-basis: 100%;

--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="conv-header">
-    <div class="conversation-header--details">
+  <div class="conv-header flex-col md:flex-row">
+    <div
+      class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center"
+    >
      <div class="user">
        <back-button v-if="showBackButton" :back-url="backButtonUrl" />
        <Thumbnail
@@ -44,7 +46,7 @@
        </div>
      </div>
      <div
-        class="header-actions-wrap"
+        class="header-actions-wrap mt-3 lg:mt-0"
        :class="{ 'has-open-sidebar': isContactPanelOpen }"
      >
        <more-actions :conversation-id="currentChat.id" />
@@ -159,27 +161,9 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/woot';
-
 .conv-header {
  flex: 0 0 var(--space-jumbo);
  flex-direction: row;
-
-  @include breakpoint(medium up) {
-    flex-direction: column;
-  }
-}
-
-.conversation-header--details {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-
-  @include breakpoint(medium up) {
-    flex-direction: row;
-  }
 }

 .option__desc {
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -30,7 +30,7 @@
          </p>
        </div>
        <div class="features-item">
-          <h2 class="block-title">
+          <h2 class="block-title text-black-900 dark:text-slate-200">
            <span class="emoji">💬</span>
            <span class="conversation--title">{{
              $t('ONBOARDING.ALL_CONVERSATION.TITLE')
@@ -41,7 +41,7 @@
          </p>
        </div>
        <div class="features-item">
-          <h2 class="block-title">
+          <h2 class="block-title text-black-900 dark:text-slate-200">
            <span class="emoji">👥</span>
            {{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
          </h2>
@@ -53,7 +53,7 @@
          </router-link>
        </div>
        <div class="features-item">
-          <h2 class="block-title">
+          <h2 class="block-title text-black-900 dark:text-slate-200">
            <span class="emoji">📥</span>{{ $t('ONBOARDING.INBOXES.TITLE') }}
          </h2>
          <p class="intro-body">
@@ -64,7 +64,7 @@
          </router-link>
        </div>
        <div class="features-item">
-          <h2 class="block-title">
+          <h2 class="block-title text-black-900 dark:text-slate-200">
            <span class="emoji">🔖</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
          </h2>
          <p class="intro-body">
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -6,8 +6,11 @@
      delay: { show: 1500, hide: 0 },
      hideOnClick: true,
    }"
-    class="conversation-priority-mark"
-    :class="{ urgent: priority === CONVERSATION_PRIORITY.URGENT }"
+    class="shrink-0 rounded-xs inline-flex w-3 h-3 "
+    :class="{
+      'bg-red-50 text-red-500': isUrgent,
+      'bg-slate-50 text-slate-600': !isUrgent,
+    }"
  >
    <fluent-icon
      :icon="`priority-${priority.toLowerCase()}`"
@@ -41,24 +44,9 @@ export default {
        `CONVERSATION.PRIORITY.OPTIONS.${this.priority.toUpperCase()}`
      );
    },
+    isUrgent() {
+      return this.priority === CONVERSATION_PRIORITY.URGENT;
+    },
  },
 };
 </script>
-
-<style scoped lang="scss">
-.conversation-priority-mark {
-  align-items: center;
-  flex-shrink: 0;
-  background: var(--s-50);
-  border-radius: var(--border-radius-small);
-  color: var(--s-600);
-  display: inline-flex;
-  width: var(--space-snug);
-  height: var(--space-snug);
-
-  &.urgent {
-    background: var(--r-50);
-    color: var(--r-500);
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1144,8 +1144,7 @@ export default {
 }

 .reply-box {
-  border-top: 1px solid var(--color-border);
-  background: white;
+  @apply border-r border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;

  &.is-private {
    background: var(--y-50);
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -254,8 +254,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/woot';
-
 .right {
  .message-text--metadata {
    align-items: center;
@@ -319,10 +317,6 @@ export default {
      text-align: center;
      font-size: var(--font-size-micro);
      margin-left: 0;
-
-      @include breakpoint(xlarge up) {
-        margin-left: var(--space-small);
-      }
    }
  }
 }
--- a/app/javascript/dashboard/constants/localStorage.js
+++ b/app/javascript/dashboard/constants/localStorage.js
@@ -2,4 +2,5 @@ export const LOCAL_STORAGE_KEYS = {
  DISMISSED_UPDATES: 'dismissedUpdates',
  WIDGET_BUILDER: 'widgetBubble_',
  DRAFT_MESSAGES: 'draftMessages',
+  COLOR_SCHEME: 'color_scheme',
 };
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row app-wrapper">
+  <div class="row app-wrapper dark:text-slate-300">
    <sidebar
      :route="currentRoute"
      :show-secondary-sidebar="isSidebarOpen"
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -154,12 +154,11 @@ export default {
 }
 .contact--panel {
  height: 100%;
-  background: white;
  font-size: var(--font-size-small);
  overflow-y: auto;
  overflow: auto;
  position: relative;
-  border-right: 1px solid var(--color-border);
+  @apply border-r border-slate-50 dark:border-slate-700;
 }

 .list-group {
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="wrap">
    <div class="header">
-      <h5 class="block-title">
+      <h5 class="block-title text-black-900 dark:text-slate-200">
        {{ $t('EVENTS.HEADER.TITLE') }}
      </h5>
    </div>
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -124,7 +124,7 @@ export default {
@import '~dashboard/assets/scss/mixins';

 .left {
-  border-right: 1px solid var(--color-border);
+  @apply border-r border-slate-50 dark:border-slate-700;
  overflow: auto;
 }

--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="medium-3 bg-white contact--panel">
+  <div
+    class="medium-3 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 contact--panel"
+  >
    <contact-info
      :contact="contact"
      :channel-type="channelType"
@@ -258,7 +260,6 @@ export default {
@import '~dashboard/assets/scss/variables';

 .contact--panel {
-  background: white;
  border-left: 1px solid var(--color-border);
  font-size: $font-size-small;
  overflow-y: auto;
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="conversation-page">
+  <section class="conversation-page bg-white dark:bg-slate-900">
    <chat-list
      :show-conversation-list="showConversationList"
      :conversation-inbox="inboxId"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -22,7 +22,7 @@
    </div>
    <draggable
      tag="div"
-      class="article-container--border"
+      class="border-t-0"
      :disabled="!dragEnabled"
      :list="localArticles"
      ghost-class="article-ghost-class"
@@ -142,11 +142,6 @@ export default {
 .article-container {
  width: 100%;

-  & > :not([hidden]) ~ :not([hidden]) {
-    border-top-width: 1px;
-    border-bottom-width: 0px;
-  }
-
  .article-container--header {
    margin: 0 var(--space-minus-normal);
    padding: 0 var(--space-normal);
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -2,7 +2,7 @@
  <div v-on-clickaway="closePortalPopover" class="portal-popover__container">
    <header>
      <div class="actions">
-        <h2 class="block-title">
+        <h2 class="block-title text-black-900 dark:text-slate-200">
          {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
        </h2>
        <div>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="wizard-body columns content-box small-9">
    <div class="medium-12 columns">
-      <h3 class="block-title">
+      <h3 class="block-title text-black-900 dark:text-slate-200">
        {{
          $t(
            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE'
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="wizard-body height-auto small-9 columns">
    <div class="medium-12 columns">
-      <h3 class="block-title">
+      <h3 class="block-title text-black-900 dark:text-slate-200">
        {{
          $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
        }}
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -98,7 +98,7 @@ export default {
 </script>

 <style scoped lang="scss">
-@import '~dashboard/assets/scss/woot';
+@import '~dashboard/assets/scss/variables';
 .secondary-menu {
  display: flex;
  flex-direction: column;
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -1,7 +1,7 @@
 <template>
  <transition name="popover-animation">
    <div class="article-settings--container">
-      <h3 class="block-title">
+      <h3 class="block-title text-black-900 dark:text-slate-200">
        {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
      </h3>
      <div class="form-wrap">
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="settings-header">
-    <h1 class="page-title">
+  <div
+    class="settings-header bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800"
+  >
+    <h1 class="page-title text-black-900 dark:text-slate-300">
      <woot-sidemenu-icon v-if="showSidemenuIcon" />
      <back-button
        v-if="showBackButton"
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -1,9 +1,11 @@
 <template>
  <div class="columns profile--settings">
    <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
-      <div class="small-12 row profile--settings--row">
+      <div
+        class="small-12 row profile--settings--row border-b border-slate-25 dark:border-slate-700"
+      >
        <div class="columns small-3">
-          <h4 class="block-title">
+          <h4 class="block-title text-black-900 dark:text-slate-200">
            {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
          </h4>
          <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
@@ -82,9 +84,11 @@
        </div>
      </div>

-      <div class="profile--settings--row row">
+      <div
+        class="profile--settings--row border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 row"
+      >
        <div class="columns small-3">
-          <h4 class="block-title">
+          <h4 class="block-title text-black-900 dark:text-slate-200">
            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
          </h4>
          <p>
@@ -288,7 +292,6 @@ export default {
 }

 .profile--settings--row {
-  @include border-normal-bottom;
  padding: $space-normal;
  .small-3 {
    padding: $space-normal $space-medium $space-normal 0;
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="settings--content">
    <div class="widget-builder-container">
-      <div class="settings-container">
+      <div class="settings-container w-100 lg:w-[40%]">
        <div class="settings-content">
          <form @submit.prevent="updateWidget">
            <woot-avatar-uploader
@@ -123,7 +123,7 @@
          </form>
        </div>
      </div>
-      <div class="widget-container">
+      <div class="widget-container w-100 lg:w-[60%]">
        <input-radio-group
          name="widget-view-options"
          :items="getWidgetViewOptions"
@@ -428,11 +428,6 @@ export default {
 }

 .settings-container {
-  width: 40%;
-  @include breakpoint(900px down) {
-    width: 100%;
-  }
-
  .settings-content {
    padding: var(--space-normal) var(--space-zero);
    overflow-y: scroll;
@@ -445,12 +440,6 @@ export default {
 }

 .widget-container {
-  width: 60%;
-
-  @include breakpoint(900px down) {
-    width: 100%;
-  }
-
  .widget-preview {
    display: flex;
    flex-direction: column;
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
@@ -1,8 +1,8 @@
 <template>
  <form @submit.prevent="changePassword()">
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
      <div class="columns small-3">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
          {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE') }}
        </h4>
        <p>{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.NOTE') }}</p>
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -3,7 +3,7 @@
    <form @submit.prevent="updateUser('profile')">
      <div class="small-12 row profile--settings--row">
        <div class="columns small-3">
-          <h4 class="block-title">
+          <h4 class="block-title text-black-900 dark:text-slate-200">
            {{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.TITLE') }}
          </h4>
          <p>{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.NOTE') }}</p>
@@ -70,9 +70,9 @@
      </div>
    </form>
    <message-signature />
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
      <div class="columns small-3">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
          {{ $t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE') }}
        </h4>
        <p>
@@ -97,9 +97,9 @@
    </div>
    <change-password v-if="!globalConfig.disableUserProfileUpdate" />
    <notification-settings />
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
      <div class="columns small-3">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
          {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE') }}
        </h4>
        <p>
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -1,8 +1,8 @@
 <template>
  <form @submit.prevent="updateSignature()">
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
      <div class="columns small-3">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
          {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE') }}
        </h4>
        <p>{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE') }}</p>
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
@@ -1,8 +1,8 @@
 <template>
  <div id="profile-settings-notifications">
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
      <div class="columns small-3 ">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
          {{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE') }}
        </h4>
        <p>
@@ -139,9 +139,9 @@
        </div>
      </div>
    </div>
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
      <div class="columns small-3 ">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
          {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
        </h4>
        <p>
@@ -236,10 +236,10 @@
    </div>
    <div
      v-if="vapidPublicKey && hasPushAPISupport"
-      class="profile--settings--row row push-row"
+      class="profile--settings--row text-black-900 dark:text-slate-300 row push-row"
    >
      <div class="columns small-3 ">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
          {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
        </h4>
        <p>{{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.NOTE') }}</p>
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@@ -62,7 +62,7 @@ development:
    host: 0.0.0.0
    port: 3035
    public: 0.0.0.0:3035
-    hmr: false
+    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,20 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
 module.exports = {
  darkMode: 'class',
  content: [
    './app/javascript/widget/**/*.vue',
    './app/javascript/v3/**/*.vue',
+    './app/javascript/dashboard/**/*.vue',
    './app/javascript/portal/**/*.vue',
    './app/javascript/shared/**/*.vue',
    './app/javascript/survey/**/*.vue',
    './app/views/**/*.html.erb',
  ],
  theme: {
+    fontSize: {
+      xxs: '0.625rem',
+      ...defaultTheme.fontSize,
+    },
    colors: {
      transparent: 'transparent',
      white: '#fff',