White-Labeling Kibana Dashboard
Transforming Kibana’s default UI into a seamless, branded experience while maintaining functionality and scalability.
Overview
This case study explores the process of white-labeling the Kibana dashboard to align with a custom brand identity. The project involved modifying Kibana’s UI elements, including colors, logos, and themes, to create a seamless experience for end users.
Problem Statement
Kibana is a powerful data visualization tool, but its default branding does not always align with an organization's visual identity. Our goal was to:
- Customize the Kibana dashboard to reflect our brand.
- Change the color palette, logos, and other UI elements.
- Ensure that updates and maintenance remain manageable post-customization.
Our Approach
A strategic, step-by-step process to transform Kibana while preserving functionality
Understanding Kibana’s Theming Architecture
We started by analyzing Kibana’s source code structure to determine how styles and branding
elements were applied. Kibana primarily uses SCSS and EUI (Elastic UI) components for theming.
Customizing the Color Palette
- Identified primary, secondary, and accent colors in the SCSS variables.
- Modified the SCSS files to replace default Elastic colors with our brand’s palette.
- Ensured contrast and accessibility compliance for better user experience.
Replacing Logos and Branding Elements
- Updated Kibana’s default logos with our custom brand assets.
- Modified the loading screen, login page, and header elements to reflect our brand.
- Ensured that the favicon and metadata aligned with the new branding.
Adjusting UI Components
- Customized the sidebar navigation styles for a cohesive look.
- Tweaked button styles, typography, and icons to match the overall brand identity.
- Used CSS overrides and component modifications to maintain consistency across all views.
Ensuring Upgrade Compatibility
- Documented all changes for future reference.
- Implemented version control to track modifications and facilitate updates.
- Created a script to reapply branding changes after Kibana updates.
Our Approach
A strategic, step-by-step process to transform Kibana while preserving functionality
Understanding Kibana’s Theming Architecture
We started by analyzing Kibana’s source code structure to determine how styles and branding elements were applied. Kibana primarily uses SCSS and EUI (Elastic UI) components for theming.
Customizing the Color Palette
- Identified primary, secondary, and accent colors in the SCSS variables.
- Modified the SCSS files to replace default Elastic colors with our brand’s palette.
- Ensured contrast and accessibility compliance for better user experience.
Replacing Logos and Branding Elements
- Updated Kibana’s default logos with our custom brand assets.
- Modified the loading screen, login page, and header elements to reflect our brand.
- Ensured that the favicon and metadata aligned with the new branding.
Adjusting UI Components
- Customized the sidebar navigation styles for a cohesive look.
- Tweaked button styles, typography, and icons to match the overall brand identity.
- Used CSS overrides and component modifications to maintain consistency across all views.
Ensuring Upgrade Compatibility
- Documented all changes for future reference.
- Implemented version control to track modifications and facilitate updates.
- Created a script to reapply branding changes after Kibana updates.
How we can help you transform your business
Transforming Kibana’s default UI into a seamless, branded experience while maintaining functionality and scalability.
Challenges and Solutions
Overcoming obstacles to deliver a seamless white-labeled experience
Unlocking the data’s potential
Kibana’s updates overwriting
custom styles
Implemented a structured patching strategy using SCSS overrides and build automation.
Theme Consistency
Ensuring theme consistency across different visualizations
Conducted UI audits and refined styles iteratively.
Performance
Performance impact of modifications
Optimized styles and removed unnecessary overrides.
Results
The impact of our white-labeling transformation
Achieved a fully branded Kibana dashboard that aligns with our company’s identity.
Maintained a seamless user experience without compromising Kibana’s core functionality.
Established a scalable approach for future branding updates.
Conclusion
White-labeling Kibana required an in-depth understanding of its theming system and a strategic approach to customization. By implementing a structured branding process, we successfully transformed Kibana into a more cohesive and brand-aligned visualization tool for our users.
