diff --git a/package-lock.json b/package-lock.json
index 96be8b35..5c132e26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
     "": {
       "name": "@edly-io/indigo-brand-openedx",
       "version": "1.0.0",
-      "hasInstallScript": true,
       "license": "GPL-3.0-or-later"
     }
   }
diff --git a/package.json b/package.json
index 4ed98b53..d469b611 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "postinstall": "node postinstall.js"
-  },
   "release": {
     "tagFormat": "indigo-${version}",
     "branches": [
diff --git a/paragon/_dark.scss b/paragon/_dark.scss
new file mode 100644
index 00000000..ce86d201
--- /dev/null
+++ b/paragon/_dark.scss
@@ -0,0 +1,29 @@
+
+
+
+body.indigo-dark-theme{
+
+    @import "../themes/dark/variables";
+
+    @import "./header";
+    @import "./footer";
+    @import "./login";
+    @import "./progress";
+    @import "./tour";
+    @import "./learning";
+    @import "./discussion";
+    @import "./account";
+    @import "./profile";
+    @import "./dates";
+    @import "../themes/dark/utilities";
+    @import "../themes/dark/extras";
+
+    color: $text-color !important;
+    background: $body-bg !important;
+    * {
+        accent-color: $primary;
+    }
+}
+
+    
+
diff --git a/paragon/_discussion.scss b/paragon/_discussion.scss
index 2137daf8..1ae3d1ce 100644
--- a/paragon/_discussion.scss
+++ b/paragon/_discussion.scss
@@ -95,6 +95,9 @@ position: static;
             background: $primary-light !important;
             padding-left: 0;
             font-size: 14px;
+            &:focus{
+                box-shadow: none;
+            }
         }
         .pointer-cursor-hover {
             margin: 0 !important;
@@ -213,4 +216,12 @@ width: 100%;
 div[data-learner-type=b2c_learner] div[role=heading].h2, div[role=heading].h2 {
     font-size: 24px;
     line-height: 30px;
+}
+
+html[data-mce-style]{
+    color: lightslategray;
+}
+.mce-content-body{
+    color: inherit;
+    background-color: transparent;
 }
\ No newline at end of file
diff --git a/paragon/_extras.scss b/paragon/_extras.scss
index e69de29b..6704e27e 100644
--- a/paragon/_extras.scss
+++ b/paragon/_extras.scss
@@ -0,0 +1,83 @@
+// theme toggle button
+
+.theme-toggle-button{
+    position: relative;
+    width: 40px;
+    height: 40px;
+}
+
+#darkmode {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(1.5);
+}
+
+.darkmode_icon {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background: $warning-400;
+  transform-origin: center center;
+  transition: transform 0.75s ease-in-out, $page-color-transition;
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: 16px;
+    height: 16px;
+    left: 6px;
+    bottom: 4px;
+    border-radius: 10px;
+    background: $body-bg;
+    transform-origin: center center;
+    transition: transform 0.2s ease, left 0.25s ease, bottom 0.25s ease, $page-color-transition;
+  }
+
+  .ray {
+    position: absolute;
+    left: 7px;
+    top: 7px;
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+    background: transparent;
+    transform-origin: center;
+    transition: transform 0.5s ease-in-out, $page-color-transition;
+
+    &:nth-child(1) {
+        transform: rotate(45deg) translateX(0);
+    }
+    &:nth-child(2) {
+        transform: rotate(90deg) translateX(0);
+    }
+    &:nth-child(3) {
+        transform: rotate(135deg) translateX(0);
+    }
+    &:nth-child(4) {
+        transform: rotate(180deg) translateX(0);
+    }
+    &:nth-child(5) {
+        transform: rotate(225deg) translateX(0);
+    }
+    &:nth-child(6) {
+        transform: rotate(270deg) translateX(0);
+    }
+    &:nth-child(7) {
+        transform: rotate(315deg) translateX(0);
+    }
+    &:nth-child(8) {
+        transform: rotate(360deg) translateX(0);
+    }
+  }
+}
diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
index 788fb418..9a9e6c23 100644
--- a/paragon/_overrides.scss
+++ b/paragon/_overrides.scss
@@ -469,5 +469,5 @@ html {
 @import "./extras";
 
 
-
-
+// Including dark theme
+@import "./dark";
diff --git a/paragon/_variables.scss b/paragon/_variables.scss
index 250a8fc8..dcd6bf8a 100644
--- a/paragon/_variables.scss
+++ b/paragon/_variables.scss
@@ -4,4 +4,8 @@ $light-dark: #374151;
 $text-color: #111827;
 $text-color-primary: #515661;
 $text-color-light: #515661;
+
+// for toggle theme button
+$page-color-transition: transparent .2s ease, color .2s ease;
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
diff --git a/postinstall.js b/postinstall.js
deleted file mode 100644
index 1f69e8bd..00000000
--- a/postinstall.js
+++ /dev/null
@@ -1,31 +0,0 @@
-const fs = require("fs");
-const path = require('path');
-
-const themesSupported = ["dark"]
-let theme = process.env.npm_config_theme;
-
-// INFO: writing copyDirectorySync instead of using fs-extra package because we don't want to have any npm dependency in brand-openedx
-function copyDirectorySync(source, destination) {
-  if (!fs.existsSync(destination)) {
-    fs.mkdirSync(destination);
-  }
-
-  const files = fs.readdirSync(source);
-
-  files.forEach(file => {
-    const sourcePath = path.join(source, file);
-    const destPath = path.join(destination, file);
-
-    if (fs.statSync(sourcePath).isDirectory()) {
-      copyDirectorySync(sourcePath, destPath);
-    } else {
-      fs.copyFileSync(sourcePath, destPath);
-    }
-  });
-}
-
-if (themesSupported.includes(theme)){
-  const srcDir = path.resolve(__dirname, 'themes', theme);
-  const destDir = path.resolve(__dirname, 'paragon'); 
-  copyDirectorySync(srcDir, destDir);
-}
diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss
index e9c7154f..16c4a1fb 100644
--- a/themes/dark/_extras.scss
+++ b/themes/dark/_extras.scss
@@ -232,6 +232,9 @@ a.course-card-title {
         &.is-invalid {
             border-color: $danger !important;
         }
+        &:focus{
+            box-shadow: 0 0 0 1px $primary;
+        }
     }
     .pgn__form-text-default, .has-floating-label {
         color: $text-color;
@@ -645,6 +648,10 @@ a.discussion-post {
     }
     .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text, .form-control.has-value ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text {
         background-color: $primary-light;
+
+        &:focus{
+            box-shadow: 0 0 0 1px $primary;
+        }
     }
 }
 #paragon-portal-root .new-user-tour-dialog {
@@ -927,6 +934,12 @@ a.discussion-post {
                     &.btn-outline-primary {
                         background: none !important;
                         color: $text-color;
+                        &:not(:disabled):not(.disabled):active{
+                            color: $text-color;
+                        }
+                    }
+                    &.btn-primary:not(:disabled):not(.disabled):active {
+                        color: $btn-color;                      
                     }
                 }
             }
@@ -1343,6 +1356,10 @@ input::placeholder {
         background: none !important;
         border: 1px solid $border-color;
         color: $text-color;
+
+        &:focus{
+            box-shadow: 0 0 0 1px $primary;
+        }
     }
 }
 .pgn__card-header-title-md {
@@ -1436,4 +1453,8 @@ section[data-testid=sidebar-NOTIFICATIONS], section[data-testid=sidebar-DISCUSSI
     &.border-light-400 {
         border-color: $primary-light !important;
     }
+}
+
+.donut-chart-text {
+    fill: $primary-500;
 }
\ No newline at end of file
diff --git a/themes/dark/_learning.scss b/themes/dark/_learning.scss
new file mode 100644
index 00000000..22269b68
--- /dev/null
+++ b/themes/dark/_learning.scss
@@ -0,0 +1,95 @@
+// learning MFE
+
+.donut-chart-text {
+    fill: $primary-500;
+}
+
+.donut-ring, .donut-segment, .donut-hole {
+    &.locked-stroke {
+        stroke: $primary-500;
+    }
+}
+
+.grade-bar {
+    .grade-bar__divider {
+        fill: $primary-500;
+    }
+
+    .grade-bar--passing {
+        fill: $primary-500;
+    }
+
+    .grade-bar--current-passing {
+        fill: $success-500;
+    }
+}
+
+#minimum-grade-tooltip {
+    .arrow::after {
+        border-bottom-color: $primary-500;
+    }
+}
+
+#passing-grade-tooltip {
+    .arrow::after {
+        border-top-color: $success-500;
+    }
+
+    background: $success-500;
+}
+
+.modal {
+    button {
+        @extend .btn-primary;
+    }
+}
+
+.lock-paywall-container svg {
+    color: $primary-700;
+}
+
+.upsell-warning {
+    background-color: $danger-100;
+}
+
+.sequence-navigation {
+    .btn{
+        &.complete {
+            color: $success;
+        }
+    }
+}
+
+.sequence-navigation {
+    .sequence-navigation-dropdown {
+        .dropdown-menu .btn {
+                &.active {
+                    .unit-icon {
+                        color: $primary-500;
+                }
+        
+                &:after {
+                    background: $primary;
+                }
+            }
+        }
+    }
+}
+
+.icon-hover {
+    &:hover {
+        color: $primary-500 !important;
+        
+    }
+}
+
+
+.nav-underline-tabs {
+    &:hover,
+        &:focus,
+        &.active {
+        color: $primary-500;
+        border-bottom-color: $primary-500;
+    }
+}
+
diff --git a/themes/dark/_utilities.scss b/themes/dark/_utilities.scss
new file mode 100644
index 00000000..1a7e1e29
--- /dev/null
+++ b/themes/dark/_utilities.scss
@@ -0,0 +1,328 @@
+@import "./variables";
+
+@function theme-color($color-name: "primary", $variant: "default", $theme-colors: $theme-colors-dark, $theme-color-levels: $theme-color-levels-dark ) {
+    $base-color: #808080 !default;
+    $color-level: 500 !default;
+  
+    @if map-has-key($theme-colors, $color-name) {
+      $base-color: map-get($theme-colors, $color-name);
+    }
+  
+    @if type-of($variant) == "number" {
+      $color-level: $variant;
+    }
+
+    @else if map-has-key($element-color-levels, $variant) {
+        $color-level: map-get($element-color-levels, $variant);
+    }
+  
+    @if map-has-key($theme-color-levels, "#{$color-name}-#{$color-level}") {
+      @return map-get($theme-color-levels, "#{$color-name}-#{$color-level}");
+    }
+  
+    @return $base-color;
+}
+
+
+@each $color, $value in $theme-colors-dark {
+    @include text-emphasis-variant(".text-#{$color}", theme-color($color), true);
+    @each $level in $color-levels {
+        @include bg-variant(".bg-#{$color}-#{$level}", theme-color($color, $level), true);
+        @include text-emphasis-variant(".text-#{$color}-#{$level}", theme-color($color, $level), true);
+        .border-#{$color}-#{$level} {
+        border-color: theme-color($color, $level) !important;
+        }
+    }
+}
+
+
+
+@each $color, $value in $theme-colors-dark {
+    .btn-#{$color} {
+      $background: $value;
+      $border: $value;
+  
+      $hover-background: theme-color($color, "hover");
+      $hover-border: theme-color($color, "hover");
+      $active-background: theme-color($color, "active");
+      $active-border: theme-color($color, "active");
+  
+      // Defaults
+      $hover-background: darken($background, 7.5%) !default;
+      $hover-border: darken($border, 10%) !default;
+      $active-background: darken($background, 10%) !default;
+      $active-border: darken($border, 12.5%) !default;
+  
+      @include button-variant(
+        $background,
+        $border,
+        $hover-background,
+        $hover-border,
+        $active-background,
+        $active-border
+      );
+      @include button-focus(theme-color($color, "focus"));
+    }
+  
+    .btn-outline-#{$color} {
+      $text-and-border: $value;
+      
+  
+      $color-hover: theme-color($color, "hover");
+      $active-background: theme-color($color, "background");
+      $active-border: theme-color($color, "active");
+      flood-color: $color-hover;
+  
+    //   Defaults
+      $color-hover: color-yiq($value) !default;
+      $active-background: $value !default;
+      $active-border: $value !default;
+  
+      @include button-outline-variant(
+        $text-and-border,
+        $color-hover,
+        $active-background,
+        $active-border,
+      );
+      @include button-focus(theme-color($color, "focus"));
+    }
+  
+    .btn-inverse-#{$color} {
+      $text: $value;
+  
+      $active-background: theme-color($color, "background");
+      $active-border: theme-color($color, "active");
+  
+      // Defaults
+      $background: color-yiq($value) !default;
+      $active-background: $value !default;
+      $active-border: $value !default;
+  
+      @include button-inverse-variant(
+        $text,
+        $background,
+        $active-background,
+        $active-border,
+      );
+      @include button-focus($white);
+    }
+  
+    .btn-inverse-outline-#{$color} {
+      $text-and-border: $white;
+  
+      $color-hover: theme-color($color, "hover");
+      $active-background: theme-color($color, "background");
+      $active-border: transparent;
+  
+      // Defaults
+      $color-hover: color-yiq($value) !default;
+      $active-background: $value !default;
+      $active-border: $value !default;
+  
+      @include button-outline-variant(
+        $text-and-border,
+        $color-hover,
+        $active-background,
+        $active-border,
+      );
+      @include button-focus($white);
+    }
+}
+
+.btn-link {
+    color: $link-color;
+  
+    @include hover {
+      color: $link-hover-color;
+    }
+}
+
+.btn-icon{
+    @each $name, $color in $theme-colors-dark {
+        &.btn-icon-#{$name} {
+          @include btn-icon-variant($color, $btn-icon-accent-color);
+        }
+    
+        &.btn-icon-inverse-#{$name} {
+          @include btn-icon-variant($btn-icon-accent-color, $color);
+        }
+    
+        &.btn-icon-#{$name}-active {
+          @include btn-icon-variant($color, $btn-icon-accent-color, true);
+        }
+    
+        &.btn-icon-inverse-#{$name}-active {
+          @include btn-icon-variant($btn-icon-accent-color, $color, true);
+        }
+    }
+}
+
+@each $color, $value in $theme-colors-dark {
+    .alert-#{$color} {
+      color: inherit;
+      background-color: theme-color($color, "background");
+      border-color: theme-color($color, "border");
+  
+      .alert-icon {
+        color: theme-color($color, "default");
+      }
+    }
+  }
+
+
+a.muted-link {
+    color: $muted-link-color;
+
+    &:hover {
+        color: $muted-link-hover-color;
+    }
+
+    p > &[href]:not(.btn),
+    &.inline-link {
+        color: $muted-inline-link-color;
+        text-decoration-color: $muted-inline-link-decoration-color;
+
+        &:hover {
+        color: $muted-inline-link-hover-color;
+        text-decoration-color: $muted-inline-link-hover-decoration-color;
+        }
+    }
+}
+
+
+// Paragon form
+.pgn__form-checkbox-input {
+    &:checked {
+      background-image: escape-svg($custom-checkbox-indicator-icon-checked);
+    }
+}
+
+
+.pgn__form-radio-input {
+    &:checked {
+      background-image: escape-svg($custom-radio-indicator-icon-checked);
+    }
+}
+
+
+.pgn__form-checkbox-input,
+.pgn__form-radio-input {
+  &:focus {
+    border-color: $input-focus-border-color;
+  }
+
+  &:focus::before {
+    border: $form-check-border-width solid $input-focus-border-color;
+  }
+}
+
+
+.pgn__form-control-decorator {
+  .btn-icon {
+    &:focus {
+      background-color: transparent !important;
+    }
+  }
+}
+
+
+// profile MFE
+.profile-page {
+  .profile-avatar-menu-container {
+    .dropdown {
+      .btn {
+        background: transparent;
+        border-color: transparent;
+        margin: 0;
+      }
+    }
+  }
+}
+
+// discussion
+.border-primary-500-2 {
+    border: 2px solid $primary-500 !important;
+}
+
+.btn-icon.btn-icon-primary:hover {
+    background-color: $light-300 !important;
+    color: $primary-500 !important
+}
+
+.nav-button-group {
+    .nav-link.active,
+    .show>.nav-link {
+      background-color: $primary-500 !important;
+    }
+}
+
+.text-TA-color {
+  color: $success-700;
+}
+
+.outline-TA-color {
+  outline: $success-700 solid 2px;
+}
+
+
+.nav-underline-tabs {
+  .nav-link {
+    &:hover,
+    &:focus,
+    &.active {
+      color: $primary-500;
+      border-bottom-color: $primary-500;
+    }
+  }
+}
+
+.tox .tox-edit-area__iframe{
+  color: red;
+  background-color: $body-bg;
+}
+
+@import "./learning";
+
+
+// toggle theme button
+
+.darkmode_icon {
+  transform: scale(0.6);
+  background: $warning-400;
+
+  &::after {
+    left: 15px;
+    bottom: 8px;
+    transform: scale(0);
+    transition: transform 1s ease, left 0.25s ease, bottom 0.25s ease, $page-color-transition;
+  }
+  
+  .ray {
+    background: $warning-400;
+
+    &:nth-child(1) {
+      transform: rotate(45deg) translateX(-16px);
+    }
+    &:nth-child(2) {
+      transform: rotate(90deg) translateX(-16px);
+    }
+    &:nth-child(3) {
+      transform: rotate(135deg) translateX(-16px);
+    }
+    &:nth-child(4) {
+      transform: rotate(180deg) translateX(-16px);
+    }
+    &:nth-child(5) {
+      transform: rotate(225deg) translateX(-16px);
+    }
+    &:nth-child(6) {
+      transform: rotate(270deg) translateX(-16px);
+    }
+    &:nth-child(7) {
+      transform: rotate(315deg) translateX(-16px);
+    }
+    &:nth-child(8) {
+      transform: rotate(360deg) translateX(-16px);
+    }    
+  }
+}
diff --git a/themes/dark/_variables.scss b/themes/dark/_variables.scss
index 8c5de24b..41093a73 100644
--- a/themes/dark/_variables.scss
+++ b/themes/dark/_variables.scss
@@ -1,13 +1,113 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
 $primary: #AEC7F6;
+$danger: #FFA07A;
+$success: #54CF5E;
+$body-bg:#0D0D0E;
+
 $primary-light: #292A2C;
 $light-dark: #374151;
 $text-color: #F8F8F8;
 $text-color-primary: #DDDFE2;
 $border-color: #777792;
 $light-overlay: #36383B;
-$danger: #FFA07A;
-$success: #54CF5E;
 $btn-color: #112F6B;
-$body-bg:#0D0D0E;
 $hover-color: #383938;
+
+$theme-colors-dark: () !default;
+$theme-colors-dark: map-merge(
+  (
+    "primary":    $primary,
+    "success":    $success,
+    "danger":     $danger,
+  ),
+  $theme-colors-dark
+);
+
+$primary-100: mix(white, $primary, 94%);
+$primary-200: mix(white, $primary, 75%);
+$primary-300: mix(white, $primary, 50%);
+$primary-400: mix(white, $primary, 25%);
+$primary-500: $primary;
+$primary-600: mix(black, $primary, 10%);
+$primary-700: mix(black, $primary, 20%);
+$primary-800: mix(black, $primary, 25%);
+$primary-900: mix(black, $primary, 30%);
+
+$success-100: mix(white, $success, 94%);
+$success-200: mix(white, $success, 75%);
+$success-300: mix(white, $success, 50%);
+$success-400: mix(white, $success, 25%);
+$success-500: $success;
+$success-600: mix(black, $success, 10%);
+$success-700: mix(black, $success, 20%);
+$success-800: mix(black, $success, 25%);
+$success-900: mix(black, $success, 30%);
+
+$danger-100: mix(white, $danger, 94%);
+$danger-200: mix(white, $danger, 75%);
+$danger-300: mix(white, $danger, 50%);
+$danger-400: mix(white, $danger, 25%);
+$danger-500: $danger;
+$danger-600: mix(black, $danger, 10%);
+$danger-700: mix(black, $danger, 20%);
+$danger-800: mix(black, $danger, 25%);
+$danger-900: mix(black, $danger, 30%);
+
+$theme-color-levels-dark: () !default;
+
+$theme-color-levels-dark: map-merge(
+  (
+    "primary-100": $primary-100,
+    "primary-200": $primary-200,
+    "primary-300": $primary-300,
+    "primary-400": $primary-400,
+    "primary-500": $primary-500,
+    "primary-600": $primary-600,
+    "primary-700": $primary-700,
+    "primary-800": $primary-800,
+    "primary-900": $primary-900,
+    "success-100": $success-100,
+    "success-200": $success-200,
+    "success-300": $success-300,
+    "success-400": $success-400,
+    "success-500": $success-500,
+    "success-600": $success-600,
+    "success-700": $success-700,
+    "success-800": $success-800,
+    "success-900": $success-900,
+    "danger-100": $danger-100,
+    "danger-200": $danger-200,
+    "danger-300": $danger-300,
+    "danger-400": $danger-400,
+    "danger-500": $danger-500,
+    "danger-600": $danger-600,
+    "danger-700": $danger-700,
+    "danger-800": $danger-800,
+    "danger-900": $danger-900,
+  ),
+  $theme-color-levels-dark
+);
+
+$link-color:                              $primary-500;
+$link-hover-color:                        darken($link-color, 15%)s;
+
+$muted-link-color:                              $primary-500;
+$muted-inline-link-color:                       $primary-500;
+$muted-link-hover-color:                        darken($muted-link-color, 15%);
+$muted-inline-link-decoration-color:            rgba($muted-inline-link-color, .3);
+$muted-inline-link-hover-color:                 darken($muted-inline-link-color, 15%);
+
+$component-active-bg:       $primary;
+
+$custom-control-indicator-checked-color:        $component-active-bg;
+$custom-control-indicator-checked-bg:           $component-active-bg;
+
+$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-color}'/></svg>"), "#", "%23");
+$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") ;
+
+
+$input-focus-border-color:    $component-active-bg;
+$input-btn-focus-color:       $component-active-bg;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color;
+$input-focus-box-shadow:      $input-btn-focus-box-shadow;
\ No newline at end of file