Как прочитать цвет фона и рассчитать контрастный цвет лицевой панели в компоненте функции React?

Question

Я пытаюсь прочитать цвет фона из компонента функции React (заголовок навигации).

Проблема в том, что элемент моего сайта меняет цвет фона в зависимости от события. Когда это происходит, текст шрифта может стать нечитаемым (недостаточный контраст).

Часть моей проблемы может быть решена в связанной цепочке, но я не знаю, как читать статус. У меня есть импорт S CSS для функции, но фон определяется глобально.

Пока я на нем: есть ли идеальный контраст между цветом шрифта и цветом фона?

Как изменить цвет шрифта в зависимости от цвета фона, используя reactJs

Answer 1

Я не знаю, как вы сейчас меняете цвет фона, ограничен ли он некоторыми предопределенными цветами или нет, но если он предопределен, я бы создал классы цветовой темы в CSS и назначил бы правильную тему для root или тело страницы, когда оно должно измениться. Затем, используя специфику CSS, я бы перезаписал цвет текста через веб-сайт.

.darkGrayTheme {
   background-color: #5d5b5b;
}

 .lightGrayTheme {
   background-color: #ccc;
}

 // in other CSS file
 .darkGrayTheme .myCustomWidget {
   color: #FFF;
 }

 .lightGrayTheme .myCustomWidget {
   color: #ddd;
 }

, если цвет фона может быть любым, я бы сгруппировал все возможные цвета, создав карту цветовой темы для группировки цветового диапазона, который может иметь общий цвет текста, а затем следовать приведенной выше CSS цветовой теме во всем приложении.

Подробнее о создании цветовой темы

Обновление на основе комментария:

, если оно предопределено и будет использоваться в качестве реквизита, я бы предложил установить тему в качестве контекста в компоненте верхнего уровня и иметь возможность для доступа к объекту темы в любых дочерних компонентах.

Пример из Документация ловушки React

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}