--- title: Update! Creating a Custom Material-UI Theme description: Last year, we released a series of articles on creating a Material-UI theme, but now Material-UI has streamlined the process... image: https://info.keylimeinteractive.com/hubfs/ux-787980_1920.jpg --- [![Key Lime Logo](https://info.keylimeinteractive.com/hs-fs/hubfs/Key%20Lime%20Logo.png?width=200&height=39&name=Key%20Lime%20Logo.png "Key Lime Logo")](https://keylimeinteractive.com/) - SERVICES - [All Services](https://keylimeinteractive.com/services) - [UX Strategy](https://keylimeinteractive.com/ux-strategy-design/) - [User Research](https://keylimeinteractive.com/user-research/) - [UX/UI Design](https://keylimeinteractive.com/ux-design-strategy/) - [EmTech Strategy](https://keylimeinteractive.com/emerging-technology/) - OUR WORK - [Our Approach](https://dev.keylimeinteractive.com/our-approach/) - [Enterprise Clients](https://keylimeinteractive.com/work/) - [Public Sector](https://keylimeinteractive.com/public-sector-gsa-schedule/) - [ABOUT US](https://keylimeinteractive.com/about-us/) - [Who We Are](https://keylimeinteractive.com/about-us/) - [People](https://keylimeinteractive.com/our-team/) - [Careers](https://workforcenow.adp.com/mascsr/default/mdf/recruitment/recruitment.html?cid=1eb079d3-bb50-438a-a731-eaa18a982193&ccId=19000101_000001&lang=en_US) - INSIGHTS - [CX Blog](https://info.keylimeinteractive.com) - [Events](https://keylimeinteractive.com/upcoming-events/) - [Competitive Indexes](https://keylimeinteractive.com/reports/#rankings) - [White Papers](https://keylimeinteractive.com/reports/) - [CONTACT US](https://keylimeinteractive.com/contact/) [![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg)](https://info.keylimeinteractive.com/) - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Blog](https://info.keylimeinteractive.com/) - Resources - [Case Studies](https://keylimeinteractive.com/case-studies/) - [Events](https://info.keylimeinteractive.com/events) - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Blog](https://info.keylimeinteractive.com/) - Resources - [Case Studies](https://keylimeinteractive.com/case-studies/) - [Events](https://info.keylimeinteractive.com/events) [Contact us](https://info.keylimeinteractive.com/contact) [![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg)](https://info.keylimeinteractive.com/) - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Blog](https://info.keylimeinteractive.com/) - Resources - [Case Studies](https://keylimeinteractive.com/case-studies/) - [Events](https://info.keylimeinteractive.com/events) - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Blog](https://info.keylimeinteractive.com/) - Resources - [Case Studies](https://keylimeinteractive.com/case-studies/) - [Events](https://info.keylimeinteractive.com/events) [Contact us](https://info.keylimeinteractive.com/contact) - - - # Update! Creating a Custom Material-UI Theme [By Key Lime Interactive](https://info.keylimeinteractive.com/author/key-lime-interactive) November 18, 2020 [User Interface](https://info.keylimeinteractive.com/topic/user-interface) - [Tweet](https://twitter.com/share) ![Material-UI Theme](https://info.keylimeinteractive.com/hubfs/ux-787980_1920.jpg) Last year, I created a series of blogs regarding creating a custom Material-UI theme ([Part 1](https://info.keylimeinteractive.com/creating-a-custom-material-ui-theme), [Part 2](https://info.keylimeinteractive.com/creating-a-custom-material-ui-theme-part-2), [Part 3](https://info.keylimeinteractive.com/creating-a-custom-material-ui-theme-part-3-customizing-individual-components)). While many parts of that blog are still relevant, such as how to customize different components, Material-UI (user interface) has streamlined the process to create a custom theme. ## Use of Color in a Material-UI Theme Thankfully, there’s no longer the need to create a massive color palette with 14 shades of 13 hues. Making that huge color palette about made my eyes cross, and I noticed that when wireframing, we really only used a handful of colors. At one point, I created customized chips for all of the 13 hues for use when we’re categorizing filters. We found that by using more than two colors one the screen in one place was distracting to the user, and pulling all of their focus on those customized chips. It also seemed unorganized and a bit confusing. We ended up not using them to categorize filters, and just used one color for the chips and used icons to categorize. The guidance from Material-UI is to create a color palette for multiple different background colors, including a light and dark theme mode, primary, secondary (with variants for both), error, info, warning, and success. Each color has a light, main, and dark variation. The awesome part is that if you only provide a main hex or RGB value, Material-UI will calculate the light and dark variations for you! However, we found that the contrast wasn’t enough and we needed to raise the tonalOffset value. The tonalOffset value is a decimal value that determines how much difference there is between the light and main and main and dark variations, if the light and dark are not provided manually. The default tonal Offset value is 0.2. If you’re referencing the previous way to create a color palette, the main color would be a \[500\] shade, light \[300\], and dark \[700\]. If the tonalOffset is raised to 0.4, then the main color is still \[500\], but light would be \[100\], and dark \[900\]. Since our users often use the dark theme mode, we have to make it seamless to switch back and forth from light to dark mode. We found it too difficult to create a color palette that was pleasing to our client, and that provided enough contrast in both light and dark modes. So, we created one palette for light mode, and a separate palette for dark mode. If you want more guidance on creating a [Material-UI palette](https://material-ui.com/customization/palette/), check it out straight from the source! ## Implementation ![Material UI](https://info.keylimeinteractive.com/hs-fs/hubfs/tirza-van-dijk-o1SKqmgSDbg-unsplash%20-%20user%20interface.jpg?width=707&name=tirza-van-dijk-o1SKqmgSDbg-unsplash%20-%20user%20interface.jpg) When creating the custom theme object, I created variables for primary, secondary, error, info, warning, and success. `var primary = state.darkTheme ? ‘#9ac53d’ : ‘rgb(14, 139, 68)’;` We have a state variable, darkTheme, that lets us know which mode (light or dark) the user has chosen. While I don’t suggest mixing hex and RGB values, the theme object will take either color value. To create the theme object: `var theme = React.useMemo(function() {   return core.createMuiTheme({     palette: {: {       type: state.darkTheme ? ‘dark’ : ‘light’,       primary: {         main: primary,       },     },   }); }, [state.darkTheme]);` More documentation on the [default Material-UI theme](https://material-ui.com/customization/default-theme/) Material-UI 4.0 and above has a lot of documentation in both JavaScript and TypeScript. In fact, all of their components have a TypeScript version. Implementing the theme in TypeScript vs JavaScript is just slightly different, and if you’re not paying close attention to the details, it will cause some very confusing errors. Note that both the import and const statements are different. If you’ve previously used the JavaScript version and are switching to the TypeScript version, make sure you import from core/styles, or your const won’t be able to find the theme object. **TypeScript:** `import (makeStyles, createStyles} from ‘@material-ui/core/styles’;` `const useStyles = makeStyles((theme) => createStyles({…}));` **JavaScript:** `import { makeStyles } from ‘@material-ui/styles’;` `const useStyles = makeStyles((theme) => ({…}));` There have been several times where I’m using a JavaScript library for components on the screen (such as data visualization libraries), and I need to use theme specifications for those components. Or I can’t use the const for the styles listed above. The theme component can be called from inside a function with the useTheme hook. `import { useTheme } from ‘@material-ui/core/styles’;` `function coolStuff() {   const theme=useTheme(); }` More documentation on [Material-UI useTheme](https://material-ui.com/styles/advanced/#main-content) hook ###### More by this Author [Key Lime Interactive](https://info.keylimeinteractive.com/author/key-lime-interactive) ##### You might also like ![Gender Bias in User Interface Design](https://info.keylimeinteractive.com/hubfs/Gender%20Bias%20-%20pexels-magda-ehlers.jpg) [Gender Bias in User Interface Design](https://info.keylimeinteractive.com/gender-bias-in-user-interface-design) November 18, 2020 ![What To Know When Considering Dark Mode](https://info.keylimeinteractive.com/hubfs/dark-mode-Pabitra%20Kaity%20-%20Pixabay.png) [What To Know When Considering Dark Mode](https://info.keylimeinteractive.com/what-to-know-when-considering-dark-mode) November 18, 2020 ![A Review Of Svelte: Improving UI Development](https://info.keylimeinteractive.com/hubfs/roman-synkevych-vXInUOv1n84-unsplash.jpg) [A Review Of Svelte: Improving UI Development](https://info.keylimeinteractive.com/a-review-of-svelte-improving-ui-development) November 18, 2020 #### Comments [Add Comment](https://info.keylimeinteractive.com/update-creating-a-custom-material-ui-theme#comment-form) ABOUT KLI [Key Lime Interactive](https://keylimeinteractive.com/about-us)is a user experience research and service design agency, with a sweet spot for emerging technology. As UX experts, our goal is to make your life easier, optimize user experiences, and make the world a better place. - [Recent](https://info.keylimeinteractive.com/update-creating-a-custom-material-ui-theme#tabs-0) - [Popular](https://info.keylimeinteractive.com/update-creating-a-custom-material-ui-theme#tabs-1) ![Upsell with Purpose: Fueling SaaS Growth Through User Insight](https://info.keylimeinteractive.com/hubfs/Multiethnic%20group%20of%20young%20people%20sitting%20in%20conference%20room%20and%20brainstorming%20on%20business%20meeting.jpeg) [Upsell with Purpose: Fueling SaaS Growth Through User Insight](https://info.keylimeinteractive.com/upselling-in-a-saas-environment-with-a-user-centric-approach) Aug 22, 2024 ![5 Ways to Get the Most Out of Working with a UX Research Consultant](https://info.keylimeinteractive.com/hubfs/Attractive%20businessman%20speaking%20with%20fellow%20coworkers.jpeg) [5 Ways to Get the Most Out of Working with a UX Research Consultant](https://info.keylimeinteractive.com/5-ways-to-get-the-most-out-of-working-with-a-ux-research-consultant) Aug 22, 2024 ![Designing Engagement Through Micro-Interactions](https://info.keylimeinteractive.com/hubfs/AI-Generated%20Media/Images/A%20closeup%20shot%20of%20a%20finger%20gently%20tapping%20a%20digital%20button%20on%20a%20sleek%2c%20modern%20interface.jpeg) [Designing Engagement Through Micro-Interactions](https://info.keylimeinteractive.com/the-significance-of-micro-interactions-in-shaping-user-engagement-and-experience) Aug 22, 2024 ![What is the Keystroke-Level Model?](https://info.keylimeinteractive.com/hubfs/Keystroke.jpg) [What is the Keystroke-Level Model?](https://info.keylimeinteractive.com/what-is-the-keystroke-level-model) Aug 22, 2024 ![Current-State vs. Future-State Journey Mapping](https://info.keylimeinteractive.com/hubfs/destination-2386255_1280.jpg) [Current-State vs. Future-State Journey Mapping](https://info.keylimeinteractive.com/current-state-vs.-future-state-journey-mapping) Aug 22, 2024 ![A History of Voice Technology](https://info.keylimeinteractive.com/hubfs/Screen%20Shot%202020-08-11%20at%2012.18.34%20PM.png) [A History of Voice Technology](https://info.keylimeinteractive.com/history-of-voice-technology) Aug 22, 2024 Create a UX Strategy [![key-lime-interactive-ux](https://info.keylimeinteractive.com/hs-fs/hubfs/key-lime-interactive-ux.png?width=635&height=634&name=key-lime-interactive-ux.png)](https://keylimeinteractive.com/ux-strategy-design) ### Post By Topics - [Research Methods](https://info.keylimeinteractive.com/topic/research-methods) - [UX Strategy](https://info.keylimeinteractive.com/topic/ux-strategy) - [Events & News](https://info.keylimeinteractive.com/topic/events-news) - [UX Research](https://info.keylimeinteractive.com/topic/ux-research) - [User Experience](https://info.keylimeinteractive.com/topic/user-experience) - [User Interface](https://info.keylimeinteractive.com/topic/user-interface) - [UX](https://info.keylimeinteractive.com/topic/ux) - [News](https://info.keylimeinteractive.com/topic/news) - [Mobile UX](https://info.keylimeinteractive.com/topic/mobile-ux) - [Usability Testing](https://info.keylimeinteractive.com/topic/usability-testing) - [Competitive Research](https://info.keylimeinteractive.com/topic/competitive-research) - [UX Design](https://info.keylimeinteractive.com/topic/ux-design) - [Eye tracking & Biometrics](https://info.keylimeinteractive.com/topic/eye-tracking-biometrics) - [Qualitative Research](https://info.keylimeinteractive.com/topic/qualitative-research) - [Customer Experience](https://info.keylimeinteractive.com/topic/customer-experience) - [Journey Mapping](https://info.keylimeinteractive.com/topic/journey-mapping) - [DEI](https://info.keylimeinteractive.com/topic/dei) - [Remote Testing](https://info.keylimeinteractive.com/topic/remote-testing) - [User Experience Consultant](https://info.keylimeinteractive.com/topic/user-experience-consultant) - [VR](https://info.keylimeinteractive.com/topic/vr) - [XR](https://info.keylimeinteractive.com/topic/xr) - [Multicultural UX](https://info.keylimeinteractive.com/topic/multicultural-ux) - [Mobile Banking](https://info.keylimeinteractive.com/topic/mobile-banking) - [Quantitative Research](https://info.keylimeinteractive.com/topic/quantitative-research) - [App Development](https://info.keylimeinteractive.com/topic/app-development) - [User Experience Research Studies](https://info.keylimeinteractive.com/topic/user-experience-research-studies) - [Diversity Equity Inclusion](https://info.keylimeinteractive.com/topic/diversity-equity-inclusion) - [UI](https://info.keylimeinteractive.com/topic/ui) - [Voice Technology](https://info.keylimeinteractive.com/topic/voice-technology) - [Accessibility](https://info.keylimeinteractive.com/topic/accessibility) - [Behavioral Personas](https://info.keylimeinteractive.com/topic/behavioral-personas) - [Diary Study & Ethnography](https://info.keylimeinteractive.com/topic/diary-study-ethnography) - [Global Research](https://info.keylimeinteractive.com/topic/global-research) - [Inclusivity Index](https://info.keylimeinteractive.com/topic/inclusivity-index) - [User Testing](https://info.keylimeinteractive.com/topic/user-testing) - [Card Sort & Tree Test](https://info.keylimeinteractive.com/topic/card-sort-tree-test) - [Human-first Approach](https://info.keylimeinteractive.com/topic/human-first-approach) - [Personalization](https://info.keylimeinteractive.com/topic/personalization) - [CX](https://info.keylimeinteractive.com/topic/cx) - [Diary Study](https://info.keylimeinteractive.com/topic/diary-study) - [In-Depth Interviews](https://info.keylimeinteractive.com/topic/in-depth-interviews) - [Inclusivity](https://info.keylimeinteractive.com/topic/inclusivity) - [A/B Testing](https://info.keylimeinteractive.com/topic/a-b-testing) - [CX Research](https://info.keylimeinteractive.com/topic/cx-research) - [IDIs](https://info.keylimeinteractive.com/topic/idis) - [Bias](https://info.keylimeinteractive.com/topic/bias) - [Personas](https://info.keylimeinteractive.com/topic/personas) - [Research Participant Recruitment](https://info.keylimeinteractive.com/topic/research-participant-recruitment) - [Usability](https://info.keylimeinteractive.com/topic/usability) - [Women in UX](https://info.keylimeinteractive.com/topic/women-in-ux) - [Workshops](https://info.keylimeinteractive.com/topic/workshops) - [Customer Journey Mapping](https://info.keylimeinteractive.com/topic/customer-journey-mapping) - [Remote Research](https://info.keylimeinteractive.com/topic/remote-research) - [Research Analysis](https://info.keylimeinteractive.com/topic/research-analysis) - [UX Methods](https://info.keylimeinteractive.com/topic/ux-methods) - [Webinars](https://info.keylimeinteractive.com/topic/webinars) - [Anthropology](https://info.keylimeinteractive.com/topic/anthropology) - [Competitive Benchmarking](https://info.keylimeinteractive.com/topic/competitive-benchmarking) - [Competitive Insights](https://info.keylimeinteractive.com/topic/competitive-insights) - [Competitive Intelligence](https://info.keylimeinteractive.com/topic/competitive-intelligence) - [Confirmation Bias](https://info.keylimeinteractive.com/topic/confirmation-bias) - [Ethnography](https://info.keylimeinteractive.com/topic/ethnography) - [Gaming](https://info.keylimeinteractive.com/topic/gaming) - [Healthcare CX Design](https://info.keylimeinteractive.com/topic/healthcare-cx-design) - [Healthcare Customer Experience Design](https://info.keylimeinteractive.com/topic/healthcare-customer-experience-design) - [Heuristics](https://info.keylimeinteractive.com/topic/heuristics) - [Unmoderated](https://info.keylimeinteractive.com/topic/unmoderated) - [sample size calculation](https://info.keylimeinteractive.com/topic/sample-size-calculation) - [AI development](https://info.keylimeinteractive.com/topic/ai-development) - [Biometrics](https://info.keylimeinteractive.com/topic/biometrics) - [Communication](https://info.keylimeinteractive.com/topic/communication) - [Competitive Intelligence Analysis](https://info.keylimeinteractive.com/topic/competitive-intelligence-analysis) - [Concept Testing](https://info.keylimeinteractive.com/topic/concept-testing) - [Consultant](https://info.keylimeinteractive.com/topic/consultant) - [Custom Projects](https://info.keylimeinteractive.com/topic/custom-projects) - [Dedicated Services](https://info.keylimeinteractive.com/topic/dedicated-services) - [Digital Divide](https://info.keylimeinteractive.com/topic/digital-divide) - [Impact](https://info.keylimeinteractive.com/topic/impact) - [Keystroke Level Model](https://info.keylimeinteractive.com/topic/keystroke-level-model) - [Literature Review](https://info.keylimeinteractive.com/topic/literature-review) - [Negotiation in UX](https://info.keylimeinteractive.com/topic/negotiation-in-ux) - [Nonprofit UX](https://info.keylimeinteractive.com/topic/nonprofit-ux) - [Presentation](https://info.keylimeinteractive.com/topic/presentation) - [Rapid Research](https://info.keylimeinteractive.com/topic/rapid-research) - [Report](https://info.keylimeinteractive.com/topic/report) - [SaaS](https://info.keylimeinteractive.com/topic/saas) - [UX Templates](https://info.keylimeinteractive.com/topic/ux-templates) - [World Usability Day](https://info.keylimeinteractive.com/topic/world-usability-day) - [digital design](https://info.keylimeinteractive.com/topic/digital-design) - [persona](https://info.keylimeinteractive.com/topic/persona) - [user engagement](https://info.keylimeinteractive.com/topic/user-engagement) ![ ](https://keylimeinteractive.com/wp-content/uploads/2024/05/aicpa-soc-certified.png) ![Logo of the National Minority Supplier Development Council with colorful abstract shapes and text.](https://keylimeinteractive.com/wp-content/uploads/2024/05/NMSDC-Logo-NATIONAL-1024x716.jpg) ![Logo with the text "Insights Association" and colorful squares forming a pattern above the text.](https://keylimeinteractive.com/wp-content/uploads/2024/02/insights-association-logo-v2.png) ![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg) Your Trusted Partner for UX Research Key Lime Interactive - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) Resources - [Case Studies](https://info.keylimeinteractive.com/case-studies) - [Events + Workshops](https://info.keylimeinteractive.com/events) - [Blog](https://info.keylimeinteractive.com/) Company - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Security & Compliance](https://app.vanta.com/keylimeinteractive.com/trust/cylnxu23wx6pzvej7bloh9) - [Public Sector GSA](https://keylimeinteractive.com/public-sector-gsa-schedule/) Get in touch - [Contact Us](https://keylimeinteractive.com/contact) © 2025 All Rights Reserved. - [Privacy Policy](https://keylimeinteractive.com/privacy-policy/) - [Terms of Use](https://keylimeinteractive.com/terms/)