New feature that allows color change to be black or white depending on background color

Can anyone suggest a function from material UI that can automatically change text color to either white or black based on the background color? For example:

<AppBar color="primary">
     <Toolbar>
         <Typography color="inherit" > some text </Typography>
     </Toolbar>
</AppBar>

If the primary color is dark, MUI will change the text color to white; if it's light, the text color will be changed to black.

Is there a specific function or method that can achieve this functionality automatically?

I have tried using the CSS property

mix-blend-mode: "difference"

However, this does not result in black/white text like in MUI, but rather creates visible contrast. Any suggestions?

htmlcssreactjsmaterial-ui

Answer №1

Here are two solutions you can try:

  1. One option is to utilize Material-UI's getContrastColor method, like this:
<AppBar color="primary">
     <Toolbar>
         <Typography sx={{color: theme.palette.getContrastText("YourColorHere")}}>
           some text 
         </Typography>
     </Toolbar>
</AppBar>
  1. Alternatively, you can apply 
    mix-blend-mode: "difference"
    along with color: "white" (and optionally include a parent div with filter: "grayscale(1)"). Check out this example for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A flashy Rickshawgraph with the ability to modify the background color of the top data series

I am facing a challenge in modifying the background color of the rickshawgraph widget in dashing based on the maximum value of the highest graph from the latest incoming data. While I have successfully implemented this feature for one series, I am struggli ...

csscoffeescriptrickshawdashing

I am experiencing issues with the rendering of my q-btn elements in Quasar and they are

I recently started using Quasar and encountered an issue with my q-btn component buttons displaying white backgrounds at random, despite having added a background-color in the external stylesheets. Here are some examples of this perplexing problem: The e ...

javascripthtmlvue.jssassquasar-framework

Sending data through AJAX

I am currently working on a calendar project. I want to include a description box next to the calendar, where additional information about an event will be displayed when a user clicks on a specific date. Here is what I have so far in terms of HTML/PHP: ...

javascriptphphtmlajaxvariables

Changing table data using a switch in mui-datatables when my information is stored as boolean values

How can I update my boolean data in a Switch component for each row fetched from Firestore? The data is currently being displayed correctly, but when I click on the Switch to change it from true to false or vice versa, nothing happens. Can someone help me ...

javascriptreactjsfirebasegoogle-cloud-firestore

A guide on importing images into a CSS file with Reactjs

Currently, I am utilizing Reactjs (Nextjs) and have placed my images folder within the "public" directory. In my "style.css" file, I adjusted the path for the image, but unfortunately it is not displaying. Can you please help me identify where I may have ...

javascriptreactjsnext.js

Tips for making a central CSS gradient

I am looking to create a background gradient similar to the one shown in the image (Load more news) and also add a border style. Any suggestions on how to achieve this would be greatly appreciated. ...

htmlcss

Display and conceal different sections using hyperlinks

Hey there, I'm back with another issue related to this code snippet on jsfiddle: https://jsfiddle.net/4qq6xnfr/9/. The problem I'm facing is that when I click on one of the 5 links in the first column, a second div appears with 3 links. Upon clic ...

javascriptjqueryhtmlcss

Is it possible to use the map function to update the class name condition?

Having trouble adjusting a classname condition within a React map. I am attempting to display various modals located within the map, each with a different state name, but unfortunately, {item.value} is not functioning as expected. Here is the code snippet ...

reactjsnext.js

Addressing problems with rendering SVG image elements in Safari and Firefox

While constructing a react app on express 4, I encountered an issue with displaying images within the SVG tag on Safari and Firefox browsers (not Chrome). Here is an example of the code: <svg width="1373.6499999999999" height="250"> <g transfor ...

expressd3.jsreactjssvg

What is the best way to align a drop-down menu within my DIV container?

Here is the code snippet I am working with: <div id="one"> <a href="#" id="test1" > <button title="test1">test1</button> </a> <a href="#" id="test1" > <button title="test1">test1</button> &l ...

css

AJAX Finished Reply

I have successfully implemented a password change function on my website, but I am encountering an issue with displaying a success or fail message. Here is the structure of my HTML code: <form id="change_Pass" action="" method="post"> //stuff ...

phpjqueryhtmlajaxfieldset

bundle.js encountered a TypeError when attempting to read a property that was undefined, specifically while trying to access the PriceIndexationDataControlStandard

In the midst of developing a React component using the Microsoft PCF Framework, I encountered a perplexing error seemingly out of the blue. While making changes in TypeScript without even executing any build commands, the rendering of my component suddenly ...

reactjstypescriptpcf

Is there a way to have Material UI expansion panels expand upwards instead of downwards when opened?

Issue: The expansion panel should expand upwards to display additional information instead of expanding downwards, forcing the user to scroll back up. ...

accordionmaterial-ui

Using React and TypeScript to pass member variables

My component Child has a member variable that can change dynamically. While I am aware of passing props and states, is there a more elegant solution than passing member variables through props or other parameters? class Child extends React.Component< ...

reactjstypescripttsx

Incorporating AngularJS to show sections of a webpage in real-time

, I am working on an angular js application in which I'm using rest services to retrieve http response data. My goal is to display different parts of the webpage conditionally based on the response data. For example, if the data in angular indicates " ...

htmlangularjsrest

larger breakpoints are always overridden by smaller breakpoints

Is there a way to prevent smaller breakpoints from overriding the styles of larger breakpoints? I've attempted the following: <Box mt={{ lg: 0, md: 2 }}></Box> Unfortunately, the styles specified for lg: 0 were overridden by the ones gen ...

reactjsmaterial-ui

Assignment on Ionic's Cascading Style Sheets classes

As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...

cssangulartypescriptionic-frameworksass

Is it possible to customize componentWillLeave(callback) in ReactCSSTransitionGroup?

I am attempting to utilize the componentWillMount hook to fade out a canvas element that is not a child of the transitioning <Home> component. The animation of the <Home> itself is functioning as expected. <ReactCSSTransitionGroup transitio ...

javascriptreactjsreactcsstransitiongroup

Error: Module not located or Image unable to load in React JS

Here is the structure of my project : src -assets fut.png -components -admin_dashboard Sidebar.js -App.js -pages Dashboard.js I encountered an issue trying to load the image fut.png from the file Sidebar.js. Even after attempting ...

javascriptreactjsnpmruntime-error

Executing JavaScript code within ASP.NET Visual Basic

My current web application uses jQuery and JavaScript, but I want to add more features that are supported in ASP.net VB. However, I am unsure if the JavaScript can run after the VB code. Essentially, I would like the web app to follow this sequence: ...

javascriptjqueryasp.netvb.nethtml