カレンダープラグインに表示されるカレンダーの色を簡単に調整する方法はありますか？白地に薄灰色の配色ではアクセシビリティについて苦情が出ています。
カレンダーの色を調整するための設定はありませんが、CSSで色を上書きすることができます。私はCSSの専門家ではありませんが、これはお探しのものに近いでしょうか？
変更したのは、外枠とカレンダーの日を区切る線だけです。もしこのような変更をお探しでしたら、適切なCSSセレクターをお探しします。（このスクリーンショットでの調整は、ブラウザのCSSツールで行いました。）
「いいね！」 1
ありがとうございます。それは大きな改善になります。適切なセレクターを見つけるのに役立ちます。
素晴らしい！サイトのテーマCSSファイルを編集するか、テーマコンポーネントに変更を追加してから、そのテーマコンポーネントをすべてのサイトのテーマに含める必要があります。私はテストサイトでテーマコンポーネントのアプローチを使用しました。スクリーンショットでそのプロセスを示そうとします。
「これらのテーマにコンポーネントを含める」入力にサイトのテーマ（またはテーマ）を追加してください。
その後、「CSS/HTMLの編集」ボタンをクリックし、テーマエディタの「共通CSS」タブに以下を追加します。
.discourse-calendar-wrap {
border: 5px solid var(--primary);
}
.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
border-color: var(--primary);
}
この変更は、カレンダーの境界線の色をサイトの「プライマリ」カラー、つまりサイトのテキストに使用されている色と同じ色に設定します。--primary 変数を使用することで、ライトカラーとダークカラーの両方のスキームで変更が機能します。
var(--primary) を使用して色を設定する代わりに、16進数の色をハードコーディングすることもできます。たとえば、黒の場合は #000000 です。
.discourse-calendar-wrap {
border: 5px solid #000000;
}
この変更による望ましくない副作用が見られた場合はお知らせください。2番目のルールが、古い明るい色にしておきたい要素を選択している可能性があります。
「いいね！」 2
素晴らしい！ありがとうございます。明日試してみます。
「いいね！」 2