CSS Personalizado

los espacios alojados y publicados se pueden personalizar utilizando css tus cambios de css solo se incluirán en tu dominio personalizado cuando previsualices tu espacio publicado, no será visible, así que necesitas publicarlo en producción elige un espacio y haz clic en el configuraciones icono ( ⚙️ ) para abrir la configuración del espacio busca la código personalizado pestaña en la ventana de configuración del espacio ve al campo css personalizado escribe las etiquetas html \<style> guardar tus cambios en el campo css personalizado \<style> / add the css clases and the properties you want to change / \</style> por razones de seguridad, el código personalizado solo se incluye en un dominio personalizado a través del dom, encontrarás elementos html con una clase css que comienza con ab puedes dirigirte a estas clases para estilizar el portal estas clases están garantizadas para no cambiar nunca, de modo que no rompamos tu estilo cuando actualicemos el sistema si el elemento que estás tratando de estilizar no tiene una clase que comience con ab , no permitimos la personalización, y es principalmente para protegerte de ti mismo por ejemplo, si cambiamos la estructura, podría afectar tu estilo cada elemento y bloque en la sección de contenido también tiene una clase similar a continuación, puedes encontrar una lista de las clases si deseas verificarlas, abre devtools en tu navegador haciendo clic derecho > inspeccionar esta es una lista de las clases css disponibles ab callout { } ab changeloc { } ab code editor { } ab minitasker { } ab graphiql { } ab horizontal divider { } ab jira { } ab map { } ab mermaid { } ab vertical split { } ab vertical split item { } ab video { } ab checklist { } ab blockquote { } ab diagram { } ab embed { } ab file { } ab iframe { } ab html { } ab image { } ab ul list { } ab ol list { } ab list item { } ab list item child { } ab table { } ab space { } ab collection { } ab space container { } ab collection container { } ab top navbar { } ab search input { } ab public search { } ab space content { } ab collection content { } ab tree navigation { } ab tree navigation link { } ab left nav chevron { } ab tree navigation link inactive { } ab space navigation { } ab doc name { } ab h1 { } ab h2 { } ab h3 { } ab expandable heading { } ab link { } ab link dynamic { } ab nav right { } ab nav right text { } ab bold { } ab code { } ab paragraph { } ab footer container { } ab search modal header { } ab search modal content { } ab auth jwt button { } ab auth saml button { } openapi clases css ab openapi { } ab open api param name { } ab open api param expand icon { } ab open api param type { } ab open api param description wrap { } ab open api param example wrap { } ab open api param custom type { } ab open api required star { } ab open api param example title { } ab open api param example { } ab open api param description title { } ab open api param description { } ab open api input wrap { } ab open api array input wrap { } ab open api schema wrap { } el modo oscuro agrega una clase oscura en la parte superior del árbol html, y puedes usar eso para dirigir los estilos del modo oscuro por ejemplo, así es como cambias el texto a rojo en modo oscuro \<style> dark ab paragraph { color red !important ; } \</style>