📁 Re‐Skin – ThingsBoard UI Rebrand (Full Detail) - telemetryinsights/thingsboard GitHub Wiki

Author: Stephen Harris
Date: May 13, 2025
Version: v1.0-ui
Goal: Apply Telemetry Insights branding to the full ThingsBoard UI (login flow, primary theme, Material overrides).

---

✅ Overview of All Branding Changes

Area	Old	New
Primary color	Indigo (default)	Green #57b857
Hue 3 / Accent	Blue shades	Light green #9be49b
Header / Sidenav	Indigo (mat-primary)	White background
Icons, Buttons	Blue	Green
Login UI	Angular Material default	Refactored to modern branding
Favicon & logo	ThingsBoard	Telemetry Insights

---

🛠️ 1. theme.scss Changes

✅ Define Brand Colors

$tb-primary-color: #57b857;
$tb-dark-primary-color: #57b857;
$tb-hue3-color: #9be49b;

✅ Define Custom Palette

$tb-mat-indigo: (
  50: #e8f5e9,
  100: #c8e6c9,
  200: #a5d6a7,
  300: #81c784,
  400: #66bb6a,
  500: $tb-primary-color,
  600: #43a047,
  700: #388e3c,
  800: #2e7d32,
  900: #1b5e20,
  A100: $tb-hue3-color,
  A200: #69f0ae,
  A400: #00e676,
  A700: #00c853,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white
  )
);

✅ Replace Theme Declarations

$tb-primary: mat.m2-define-palette($tb-mat-indigo);
$tb-accent: mat.m2-define-palette(mat.$m2-deep-orange-palette);

✅ Define Light and Dark Themes

Use:

$tb-mat-theme: mat.m2-define-light-theme(...)
$tb-dark-theme: mat.m2-define-dark-theme(...)

---

🎨 2. theme-overwrites.scss Changes

✅ White Toolbar and Sidenav

.mat-toolbar.tb-main-toolbar,
.tb-app-header {
  background-color: #ffffff !important;
  color: #000 !important;
  border-bottom: 1px solid #e0e0e0;
}

.tb-side-nav,
.mat-sidenav {
  background-color: #ffffff !important;
  color: #57b857 !important;
  border-right: 1px solid #e0e0e0;

  .mat-icon,
  .mat-list-item .mat-line,
  .tb-menu-link {
    color: #57b857 !important;
  }
}

✅ Icons & Button Overrides

.mat-icon-button,
.mat-button,
.mat-stroked-button {
  color: #57b857 !important;
  border-color: #57b857 !important;
}

✅ Slide Toggle Styling

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar,
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
  background-color: #57b857 !important;
}

---

🔐 3. Login Screen Enhancements

✔️ Updated Files

• login.component.html / .scss
• reset-password-request.component.html
• reset-password.component.html
• create-password.component.html
• two-factor-auth-login.component.html
• link-expired.component.html
• ti-login-component.scss

✔️ Key Changes

• Mobile responsive
• Consistent padding/margins
• Green hover buttons
• Footer with logo branding
• New favicon + logo applied

---

🌙 Optional Dark Mode

If needed later, add:

$tb-dark-theme: mat.m2-define-dark-theme(...)
@include mat.all-component-colors($tb-dark-theme);

---

✅ How to Apply Changes

# Run local build and view in browser
npm run start80

Ensure modified files are committed to your branch, then push to GitHub or local repo.

---

📦 Commit Example

feat(ui-theme): Reskin core ThingsBoard UI and modernize login experience

---

🔚 Result

• Unified green branding (#57b857)
• Modernized login with responsive layout
• White-based UI for better cleanliness and contrast