¡Genial! Necesitarás editar el archivo CSS del tema de tu sitio o agregar los cambios a un componente de tema e incluir ese componente en todos los temas de tu sitio. He utilizado el enfoque de componente de tema en mi sitio de prueba. Aquí hay un intento de mostrar ese proceso con capturas de pantalla:
Asegúrate de agregar el tema (o temas) de tu sitio a la entrada “Incluir componente en estos temas”.
Una vez que lo hayas hecho, haz clic en el botón “Editar CSS/HTML” y agrega lo siguiente a la pestaña CSS común del editor de temas:
.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);
}
Lo que hace ese cambio es establecer los colores del borde del calendario en el color “primario” de tu sitio, el mismo color que se usa para el texto del sitio. Al usar la variable --primary, el cambio funciona tanto con esquemas de colores claros como oscuros:
En lugar de usar var(--primary) para establecer el color, puedes codificar un color hexadecimal. Por ejemplo, #000000 para negro:
.discourse-calendar-wrap {
border: 5px solid #000000;
}
Avísame si ves algún efecto secundario indeseable de este cambio. Es posible que la segunda regla esté seleccionando algunos elementos que preferirías dejar con el color más claro anterior.