Блог

Как панель приложений material ui меняет цвет текста на белый / черный в зависимости от того, темный или светлый цвет панели приложений. Есть ли функция, которую я могу использовать в интерфейсе material? я проверил их документ и не смог найти функцию сам, я попробовал css

 <style>
.container {
  background-color: #ff0001;
  padding: 15px;
}

.container p {
  mix-blend-mode: difference;
  color: white
}
</style>



<div class="container">
  <p> asd </p>
</div>
 

Но это дает не только белый / черный цвет

Интерфейс Material UI имеет встроенную поддержку для легкого переключения между светлым и темным режимами. Все, что вам нужно сделать , это создать объекты темы для обоих режимов, обернуть код с помощью a ThemeProvider и использовать состояние (и контекст) для переключения между светлым и темным режимами. Ссылочные ссылки:

1. Поставщик тем
2. Объект темы. Здесь вы можете настроить palette.type свойство так light или dark иначе в соответствии с вашим удобством.

Правка:

Материал-пользовательский интерфейс использует main цвет в palette.primary/secondary качестве входных данных, чтобы получить идеальный контрастный цвет текста. Это работает для всех компонентов MUI (например, панели приложений). Точный исходный код доступен здесь, в getContrastText функции. Они также связали источники в коде, которые используют scss для достижения того же самого.

Я не до конца понял логику этой реализации, но надеюсь, что связанный код ответит на ваш вопрос.

Правка 2:

Его getContrastText можно использовать с theme объектом следующим образом:

 const useStyles = makeStyles(theme => ({
  "key": {
    "color": theme.palette.getContrastText("#cfe8fc") // returns rgba(0,0,0,0.87)
  }
})
 

Этот theme объект также можно получить с помощью useTheme крючка или withStyles специального.