Настроить цвета React Big Calendar

Я новичок в React Big Calendar, и он кажется очень полезным, но я застрял. Я создаю веб-сайт в темном режиме, кнопки по умолчанию работают так, как я хочу, но текст черный и плохо отображается на темном фоне. Есть ли способ не создавать настраиваемую панель инструментов, а изменять только цвет текста (цвета активной кнопки, кнопки наведения и неактивной кнопки)? Я видел настраиваемые панели инструментов, но это похоже на то, чтобы просто изменить цвет текста кнопок по умолчанию.

Спасибо за помощь.

Я использую React Typescript, конечно, React Big Calendar


reactjs typescript react-big-calendar
person user1184205    schedule 01.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

@import 'react-big-calendar/lib/sass/styles';

$out-of-range-color: lighten(#333, 40%);
$out-of-range-bg-color: lighten(#333, 70%);

$calendar-border: #DDD;
$cell-border: #DDD;

$border-color: #CCC;

$segment-width: percentage(1 / 7);

$time-selection-color: white;
$time-selection-bg-color: rgba(0,0,0, .50);
$date-selection-bg-color: rgba(0,0,0, .10);


$event-bg: #3174ad;
$event-border: darken(#3174ad, 10%);
$event-outline: #3b99fc;
$event-color: #fff;
$event-border-radius: 5px;
$event-padding: 2px 5px;
$event-zindex: 4;

$btn-color: #373a3c;
$btn-bg: #fff;
$btn-border: #ccc;

$current-time-color: #74ad31;

$rbc-css-prefix: rbc-i;

$today-highlight-bg: #eaf6ff;
person edlouth    schedule 28.05.2019