Custom Branding
Overview
Entropy Data supports custom branding to match your organization's visual identity. You can customize:
- Logo: Replace the default Entropy Data logo with your own.
- Colors: Override the default color scheme using a custom script.
All branding settings are managed in the Admin Console. Navigate to Organizations, find your organization, and use the Custom Script text area. Only users with the Super Admin role can access the Admin Console.
Logo
You can replace the Entropy Data logo displayed in the top-left navigation bar with your organization's logo.
- Navigate to Admin Console → Organizations → select your organization
- Enter your logo URL in the Logo URL field
- Save your changes
The logo should be an SVG or PNG image hosted on a publicly accessible URL. The recommended height is 38px.
Custom Script
The custom script feature allows you to inject a <script> tag into the <head> of every page. This is useful for adding custom CSS overrides, analytics, or other customizations.
- Navigate to Admin Console → Organizations → select your organization
- Enter your script in the Custom Script text area
- Save your changes
The script is injected as-is into the <head> section of the page. You can use a <style> tag inside the script to override CSS.
Overriding Colors
Entropy Data uses Tailwind CSS v4 with oklch CSS custom properties for its color scheme. The primary color is indigo. You can override these CSS variables to change the primary color across the entire application.
The following CSS variables control the primary color palette:
| Variable | Description |
|---|---|
--color-indigo-50 | Lightest shade (backgrounds, highlights) |
--color-indigo-100 | Light shade |
--color-indigo-200 | Light accent |
--color-indigo-300 | Medium-light accent |
--color-indigo-400 | Medium accent |
--color-indigo-500 | Base color (hover states) |
--color-indigo-600 | Primary buttons, active states |
--color-indigo-700 | Dark accent (borders, active nav) |
--color-indigo-800 | Darker shade |
--color-indigo-900 | Darkest shade |
--color-indigo-950 | Near-black shade |
Overriding the Logo via CSS
In addition to setting the logo URL in the Admin Console, you can override the logo using CSS:
img[src*="logo_indigo"], img[src*="logo_fuchsia"] {
content: url('https://example.com/your-logo.svg');
}
Overriding Link Colors
If your application uses the text--link CSS class for links, you can override link colors:
.text--link {
color: #ea580c !important;
}
.text--link:hover {
color: #c2410c !important;
}
Example: Rebranding Colors
The following example demonstrates how to rebrand Entropy Data with an orange color scheme. Paste this into the Custom Script field:
<style>
:root {
--color-indigo-50: oklch(96.9% 0.024 70.61) !important;
--color-indigo-100: oklch(93.6% 0.048 70.27) !important;
--color-indigo-200: oklch(88.5% 0.085 68.95) !important;
--color-indigo-300: oklch(82.1% 0.128 68.94) !important;
--color-indigo-400: oklch(74.4% 0.163 58.24) !important;
--color-indigo-500: oklch(70.2% 0.183 52.58) !important;
--color-indigo-600: oklch(60.6% 0.178 46.68) !important;
--color-indigo-700: oklch(51.1% 0.148 44.45) !important;
--color-indigo-800: oklch(43.2% 0.117 45.56) !important;
--color-indigo-900: oklch(37.2% 0.088 47.06) !important;
--color-indigo-950: oklch(26.9% 0.066 42.18) !important;
}
.text--link {
color: #ea580c !important;
}
.text--link:hover {
color: #c2410c !important;
}
img[src*="logo_indigo"], img[src*="logo_fuchsia"] {
content: url('https://example.com/your-logo.svg');
}
</style>
This overrides the primary indigo palette with the Tailwind CSS orange palette, affecting all buttons, active navigation items, focus rings, borders, and text accents across the application.
To find the oklch values for other Tailwind colors, refer to the Tailwind CSS color reference.