Реагировать на темы с помощью селекторов css - PullRequest
Новая
       25

Реагировать на темы с помощью селекторов css

1 голос
/ 10 мая 2019

Вот фрагмент кода реакции того, как я закодировал всплывающую подсказку, чтобы иметь светлую и темную тему.Он определяет положение всплывающей подсказки.Я хочу подойти к этому по-другому, используя темы, но я не уверен, как: 

  static defaultProps = {
    theme: 'light',
    eventsEnabled: true,
  };

  firstOrderPlacement(placement) {
    if (!placement) return null;
    return placement.split('-')[0];
  }

  arrowDirectionClass(firstOrderPlacement) {
    const { theme } = this.props;

    switch (firstOrderPlacement) {
      case 'right':
        return cx(css.arrowLeft, theme === 'dark' ? css.arrowLeftDark : css.arrowLeftLight);
      case 'left':
        return cx(css.arrowRight, theme === 'dark' ? css.arrowRightDark : css.arrowRightLight);
      case 'top':
        return cx(css.arrowDown, theme === 'dark' ? css.arrowDownDark : css.arrowDownLight);
      case 'bottom':
        return cx(css.arrowUp, theme === 'dark' ? css.arrowUpDark : css.arrowUpLight);
      default:
        return cx(css.arrowUp, theme === 'dark' ? css.arrowUpDark : css.arrowUpLight);
    }
  }

и css для его позиций: 

.backgroundLight {
  background: white;
  color: #262626;
}

.backgroundDark {
  background: #2d2d2d;
  color: #ffffff;
}

.arrow {
  position: relative;
  width: 0;
  height: 0;
}

.arrowRight {
  border-top: 0.4375rem solid transparent;
  border-bottom: 0.4375rem solid transparent;
}

.arrowRightLight {
  border-left: 0.4375rem solid var(--color-white);
}

.arrowRightDark {
  border-left: 0.4375rem solid #2d2d2d;
}

.arrowLeft {
  border-top: 0.4375rem solid transparent;
  border-bottom: 0.4375rem solid transparent;
}

.arrowLeftLight {
  border-right: 0.4375rem solid var(--color-white);
}

.arrowLeftDark {
  border-right: 0.4375rem solid #2d2d2d;
}

.arrowDown {
  margin: 0 auto;
  border-left: 0.4375rem solid transparent;
  border-right: 0.4375rem solid transparent;
}

.arrowDownLight {
  border-top: 0.4375rem solid var(--color-white);
}

.arrowDownDark {
  border-top: 0.4375rem solid #2d2d2d;
}

.arrowUp {
  margin: 0 auto;
  border-left: 0.4375rem solid transparent;
  border-right: 0.4375rem solid transparent;
}

.arrowUpLight {
  border-bottom: 0.4375rem solid var(--color-white);
}

.arrowUpDark {
  border-bottom: 0.4375rem solid #2d2d2d;
}

Конечно, это может быть эффективно сделано с помощью тем, ноЯ читал об этом, я не уверен, как это сделать.

1 Ответ

1 голос
/ 10 мая 2019

Вы можете разрешить CSS выполнять тяжелую работу по применению тем , используя CSS variables:

  • создайте две переменные для background и color - скажем, --bg и --color (обратите внимание, что здесь вы определяете все свойства, которые меняются в теме),

  • определяют правила .wrapper.light и wrapper.dark, которые определяют эти переменные в соответствии с темой light или dark , например,

  • теперь тема будет применена к wrapper с использованием: 

    .wrapper {
  color: var(--color);
  background-color: var(--bg);
}

См. Демо ниже: 

const App = ({theme}) => {
  return (
    <div className={'wrapper ' + theme}>
      <h1>Hello {theme}!</h1>
      <span className="arrow arrowLeft"/>
      <span className="arrow arrowUp"/>
      <span className="arrow arrowRight"/>
      <span className="arrow arrowDown"/>
    </div>
  )
}
ReactDOM.render(<App theme="light"/>, document.getElementById('theme1'));
ReactDOM.render(<App theme="dark"/>, document.getElementById('theme2'));
.wrapper.light {
  --bg: white;
  --color: #262626;
}

.wrapper.dark {
  --bg: #2d2d2d;
  --color: #ffffff;
}

.wrapper {
  color: var(--color);
  background-color: var(--bg);
}

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 10px;
}

.arrowRight {
  border-top: 0.4375rem solid transparent;
  border-bottom: 0.4375rem solid transparent;
  border-left: 0.4375rem solid var(--color);
}

.arrowLeft {
  border-top: 0.4375rem solid transparent;
  border-bottom: 0.4375rem solid transparent;
  border-right: 0.4375rem solid var(--color);
}

.arrowDown {
  border-left: 0.4375rem solid transparent;
  border-right: 0.4375rem solid transparent;
  border-top: 0.4375rem solid var(--color);
}

.arrowUp {
  border-left: 0.4375rem solid transparent;
  border-right: 0.4375rem solid transparent;
  border-bottom: 0.4375rem solid var(--color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="theme1"></div>
<div id="theme2"></div>
...