[UI] Add dark/light theme toggle

assets/scss/_footer_project.scss

@@ -592,4 +592,144 @@
   .footer-company{
     margin-left: 5px;
   }
+}
+
+.footer {
+  .logo-light {
+    display: none !important;
+  }
+  .logo-dark {
+    display: block !important;
+  }
+}
+
+// Light theme styling for Footer (MeshKit / Sistent Design System)
+[data-theme="light"],
+[data-bs-theme="light"] {
+  .footer {
+    background-color: #f6f8f8 !important;
+    color: #28353a !important;
+    border-top: 1px solid #d2d8da !important;
+
+    .logo-dark {
+      display: none !important;
+    }
+    .logo-light {
+      display: block !important;
+    }
+
+    .footer-desc p,
+    .footer-desc {
+      color: #28353a !important;
+    }
+
+    .section-title {
+      color: #000d12 !important;
+      font-weight: 700;
+
+      a {
+        color: #000d12 !important;
+
+        &:hover {
+          color: $primary !important;
+        }
+      }
+    }
+
+    .footer-h5 {
+      a {
+        color: #3c494f !important;
+
+        &:hover {
+          color: $primary !important;
+        }
+      }
+    }
+
+    .footer-icons {
+      a {
+        filter: grayscale(1) opacity(0.7) !important;
+
+        &:hover {
+          filter: none !important;
+          opacity: 1 !important;
+        }
+
+        &.social-icon {
+          filter: grayscale(1) opacity(0.7) !important;
+
+          &:hover {
+            filter: none !important;
+            opacity: 1 !important;
+          }
+        }
+      }
+    }
+
+    .subscribe {
+      p {
+        color: #000d12 !important;
+        font-weight: 600;
+      }
+    }
+
+    input.footer-input {
+      background-color: #ffffff !important;
+      border: 1px solid #d2d8da !important;
+      color: #000d12 !important;
+
+      &::placeholder {
+        color: #647176 !important;
+      }
+
+      &:focus {
+        border-color: $primary !important;
+        background-color: #ffffff !important;
+        color: #000d12 !important;
+        outline: 2px solid $primary;
+        outline-offset: 2px;
+      }
+    }
+
+    .footer-button {
+      background-color: $primary !important;
+      color: #ffffff !important;
+
+      &:hover {
+        background-color: #007763 !important;
+      }
+    }
+
+    .footer-hr {
+      border-color: #d2d8da !important;
+      color: #d2d8da !important;
+    }
+
+    .footer-bottom {
+      span {
+        color: #647176 !important;
+      }
+
+      a {
+        color: #647176 !important;
+
+        &:hover {
+          color: $primary !important;
+        }
+      }
+    }
+
+    .footer-bottom-middle {
+      .status-link {
+        background-color: #eaedee !important;
+        border: 1px solid #d2d8da !important;
+        color: #28353a !important;
+
+        &:hover {
+          color: $primary !important;
+          border-color: $primary !important;
+        }
+      }
+    }
+  }
 }

assets/scss/_kanvas-corner-popup.scss

@@ -277,4 +277,50 @@
   .kanvas-supporting-arrows.in-view {
     opacity: 1;
   }
+}
+
+// ── Light theme overrides (Sistent / MeshKit tokens) ──────────────────────────
+[data-theme="light"],
+[data-bs-theme="light"] {
+  .kanvas-corner-popup .popup-inner {
+    background: #ffffff;
+    border-color: #00b39f;
+    box-shadow: 0 4px 24px rgba(0, 179, 159, 0.18), 0 1px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  .kanvas-corner-popup .close-btn {
+    color: #28353a;
+
+    &:hover {
+      color: #00b39f;
+      opacity: 1;
+    }
+  }
+
+  .kanvas-corner-popup .popup-text {
+    h1 {
+      color: #000d12;
+    }
+
+    h4 {
+      color: #647176;
+    }
+  }
+
+  .kanvas-corner-popup .try-it-text {
+    span {
+      color: #647176;
+    }
+
+    strong {
+      color: #000d12;
+    }
+  }
+
+  // Keep the Kanvas illustration canvas always dark so it looks right
+  .kanvas-transition-container {
+    .canvas-grid {
+      background: radial-gradient(ellipse at 50% 0%, rgba(0, 211, 169, 0.15) 0%, transparent 70%);
+    }
+  }
 }

assets/scss/_landing_project.scss

@@ -240,3 +240,102 @@
   }
 }
 
+// Light theme styles for landing page
+[data-theme="light"],
+[data-bs-theme="light"] {
+  .product-section a {
+    color: #142126 !important;
+  }
+
+  .playground-section {
+    &.playground-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/meshery-light-icon.svg") !important;
+    }
+    &.video-play-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/video-play.svg") !important;
+    }
+  }
+
+  .catalog-section {
+    &.catalog-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/catalog.svg") !important;
+    }
+    &.academy-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/academy.svg") !important;
+    }
+    &.recognition-program-logo {
+      background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/recognition-program.png") !important;
+    }
+  }
+
+  .landing-card {
+    background: #ffffff !important;
+    border: 1.5px solid #d2d8da !important;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04) !important;
+
+    .landing-card-title,
+    span.landing-card-title {
+      color: #000d12 !important;
+    }
+
+    p {
+      color: #28353a !important;
+    }
+
+    &:hover {
+      border: 1.5px solid $primary !important;
+      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06) !important;
+
+      .landing-card-title,
+      span.landing-card-title {
+        color: $primary !important;
+      }
+
+      p {
+        color: #000d12 !important;
+      }
+    }
+  }
+
+  .landing-card-title {
+    color: #000d12 !important;
+  }
+
+  .forum-section {
+    background: #ffffff !important;
+    border: 1.5px solid #d2d8da !important;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04) !important;
+
+    .landing-card-title,
+    h1, h2, h3, h4, h5, h6,
+    span {
+      color: #000d12 !important;
+    }
+
+    p {
+      color: #28353a !important;
+    }
+
+    &:hover {
+      border-color: $primary !important;
+      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06) !important;
+    }
+  }
+
+  .handbook-section {
+    background: linear-gradient(112deg, #ffffff 34.88%, #daf3eb 92.89%, #f0faf8 159.16%) !important;
+    border: 1.5px solid #93e6d1 !important;
+    border-radius: 1rem !important;
+
+    .landing-card-title,
+    h1, h2, h3, h4, h5, h6,
+    span {
+      color: #000d12 !important;
+    }
+
+    p {
+      color: #28353a !important;
+    }
+  }
+}
+

assets/scss/_nav.scss

@@ -1,8 +1,7 @@
 .td-navbar-cover {
   @include media-breakpoint-up(md) {
-
     .nav-link {
-      text-shadow: 1px 1px 2px $dark;
+      text-shadow: none;
     }
   }