Thèmes et CSS Shiny : bslib, bs_theme, Bootswatch et style personnalisé

Q: Comment ajouter un thème à une application Shiny ?

Construisez un thème avec bslib::bs_theme() et passez-le à l’argument theme de votre fonction de page : fluidPage(theme = bs_theme(version = 5), ...). Toute l’application le reprend. Pour une application multi-pages, définissez theme = sur navbarPage() de la même façon.

Q: Comment utiliser un thème Bootswatch dans Shiny ?

Passez le nom du thème à bootswatch = : bs_theme(version = 5, bootswatch = "flatly") pour un thème clair épuré, ou "darkly" pour du sombre. Voyez tous les noms disponibles avec bslib::bootswatch_themes(). Vous pouvez toujours redéfinir des couleurs individuelles par-dessus un préréglage.

Q: Comment ajouter du CSS personnalisé à Shiny ?

Trois façons : en ligne avec tags$style(HTML("...")) à l’intérieur de tags$head() pour quelques règles ; depuis un fichier avec includeCSS("www/styles.css") ; ou liez une feuille de style placée dans le dossier www/ servi automatiquement depuis tags$head(tags$link(rel = "stylesheet", href = "styles.css")). Ciblez les éléments par #id ou .class.

Q: Comment changer la police d’une application Shiny ?

Définissez base_font (corps) et heading_font (titres) dans bs_theme(), en enveloppant chaque police dans font_google() pour la récupérer depuis Google Fonts : bs_theme(base_font = font_google("Inter"), heading_font = font_google("Poppins")). Aucun fichier de police à gérer.

Q: Pourquoi mes graphiques ne s’accordent-ils pas à mon thème Shiny ?

Un bs_theme() stylise le HTML de l’application, mais un graphique est une image rendue séparément, donc il conserve les couleurs par défaut de R. Appelez thematic::thematic_shiny() une fois avant que l’application ne s’exécute et vos graphiques base R et ggplot2 adoptent automatiquement l’arrière-plan, le premier plan et les polices du thème.

Donnez à votre application une allure professionnelle — un thème Bootstrap, vos propres couleurs et polices de marque, des graphiques accordés, et du CSS personnalisé au besoin.

Programming

Shiny

Stylisez une application Shiny à la façon moderne avec bslib : passez bs_theme() à fluidPage ou navbarPage, placez un préréglage Bootswatch comme flatly ou darkly, personnalisez-la avec vos propres couleurs, polices, et font_google(), accordez les graphiques base et ggplot2 avec thematic, et ajoutez du CSS personnalisé de trois façons. Pour chaque approche, le code, ce qu’elle change, et quand y recourir.

Date de publication

28 juin 2026

Modifié

7 juillet 2026

Points clés

bslib est la façon moderne de styliser une application. Construisez un thème avec bs_theme() et passez-le à votre fonction de page : fluidPage(theme = bs_theme(...), ...). Utilisez version = 5 pour Bootstrap 5.
Obtenez un rendu soigné instantanément avec un préréglage Bootswatch : bs_theme(bootswatch = "flatly") (clair et épuré) ou "darkly" (sombre) — des dizaines de thèmes conçus, un seul argument.
Personnalisez-la avec vos propres couleurs et polices : bs_theme(bg=, fg=, primary=, base_font=, heading_font=), et récupérez des polices Google Fonts avec font_google().
Accordez les graphiques à l’application : appelez thematic::thematic_shiny() une fois et vos graphiques base R et ggplot2 adoptent automatiquement les couleurs et les polices du thème.
Passez au CSS personnalisé quand un thème n’y parvient pas : en ligne avec tags$style(HTML(...)), depuis un fichier via includeCSS(), ou une feuille de style dans www/ liée depuis tags$head(). Ciblez les éléments par #id ou .class.

Introduction

Une application qui fonctionne et une application professionnelle se distinguent surtout par leur apparence. Les utilisateurs jugent le soin en quelques secondes — couleurs, polices, espacements — bien avant de lire le moindre chiffre. La bonne nouvelle : vous avez rarement besoin d’écrire du CSS. Le package bslib vous donne des thèmes Bootstrap conçus et vos propres couleurs de marque à partir d’un seul appel de fonction, et thematic accorde vos graphiques gratuitement.

C’est la référence à laquelle vous revenez. Chaque approche ci-dessous s’accompagne de trois choses : le code, ce qu’elle change, et quand y recourir — d’un préréglage en une ligne jusqu’au CSS écrit à la main. Vous savez déjà comment agencer la page ; ici vous apprenez à lui donner l’apparence que vous voulez.

Copiez n’importe quel bloc et exécutez-le en local

Le code de cette page n’est pas exécuté ici — une application Shiny a besoin d’une session R active, elle ne peut donc pas tourner dans une page web statique. Copiez n’importe quel bloc dans un fichier app.R et exécutez-le en local avec shiny::runApp() (ou cliquez sur Run App dans RStudio). Chaque exemple est un ui (et le cas échéant un server) que vous pouvez remplir avec vos propres entrées et sorties.

Styliser avec bslib — le point d’entrée moderne

bslib est la façon actuelle de styliser une application Shiny. Vous construisez un objet thème avec bs_theme() et le passez à votre fonction de page via l’argument theme. Cet unique objet contrôle toute l’apparence de l’application — couleurs, polices, style des composants — et il fonctionne de la même façon pour fluidPage(), navbarPage(), et les autres fonctions de page.

Passez version = 5 pour opter pour Bootstrap 5 (la génération actuelle). Un bs_theme(version = 5) vide a déjà meilleure allure que le défaut hérité, c’est donc une base sensée même avant de personnaliser.

library(shiny)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(version = 5),
  titlePanel("My App"),
  sidebarLayout(
    sidebarPanel(sliderInput("n", "Points:", 1, 100, 50)),
    mainPanel(plotOutput("plot"))
  )
)

Pour une application multi-pages, définissez le même theme sur navbarPage() :

ui <- navbarPage(
  "My App",
  theme = bs_theme(version = 5),
  tabPanel("Home", "..."),
  tabPanel("About", "...")
)

Utilisez-le chaque fois que vous démarrez une nouvelle application. Recourez d’abord à bs_theme() ; ne passez au CSS personnalisé que pour les détails qu’il ne peut pas atteindre. Tout ce qui suit n’est que bs_theme() avec plus d’arguments.

Utiliser un préréglage Bootswatch

Le moyen le plus rapide d’obtenir un rendu conçu est un thème Bootswatch — une palette et un jeu typographique prêts à l’emploi. Passez son nom à bootswatch = et toute l’application l’adopte. Il y en a des dizaines ; "flatly" est un thème clair épuré et moderne et "darkly" est son équivalent sombre — les deux points de départ les plus courants.

ui <- fluidPage(
  theme = bs_theme(version = 5, bootswatch = "flatly"),
  titlePanel("Flatly App"),
  # ...
)

Basculez vers une application sombre en changeant un seul mot :

ui <- fluidPage(
  theme = bs_theme(version = 5, bootswatch = "darkly"),
  titlePanel("Dark App"),
  # ...
)

Utilisez un préréglage quand vous voulez un rendu professionnel sans aucun travail de design — tableaux de bord internes, prototypes, ou toute application où « épuré et cohérent » l’emporte sur « unique et estampillé ». Voyez la liste complète avec bslib::bootswatch_themes(). Vous pouvez toujours redéfinir des couleurs individuelles par-dessus un préréglage, abordé ensuite.

Personnaliser le thème avec vos couleurs et vos polices

Pour correspondre à l’identité d’une organisation, définissez directement les couleurs et les polices du thème. Les arguments que vous utiliserez le plus :

bg et fg — les couleurs d’arrière-plan et de premier plan (texte) de la page ; définissez les deux ensemble.
primary — la couleur d’accent pour les boutons, les liens et les états actifs.
base_font et heading_font — les polices du corps et des titres.

Enveloppez une police dans font_google() et bslib la télécharge depuis Google Fonts pour vous — pas de fichiers de police à gérer manuellement. Vous pouvez superposer ces réglages par-dessus un préréglage Bootswatch ou partir de zéro.

ui <- fluidPage(
  theme = bs_theme(
    version = 5,
    bg = "#ffffff",
    fg = "#1f2937",
    primary = "#3a86d4",
    base_font = font_google("Inter"),
    heading_font = font_google("Poppins")
  ),
  titlePanel("Branded App"),
  # ...
)

Utilisez ceci quand vous avez une charte graphique — une couleur spécifiée et une police d’entreprise. Définissez primary sur la couleur de marque et les boutons, les liens et les éléments mis en avant s’alignent dans toute l’application. Gardez bg et fg suffisamment contrastés (texte sombre sur fond clair, ou l’inverse) pour que l’application reste lisible.

Accorder les graphiques au thème avec thematic

Une application stylisée avec des graphiques gris sur blanc par défaut a l’air à moitié finie. Le package thematic corrige cela : appelez thematic_shiny() une fois dans votre application et les graphiques base R et ggplot2 adoptent automatiquement l’arrière-plan, le premier plan et les polices du thème. Vous n’écrivez aucun code de mise en forme des graphiques — le graphique hérite de l’apparence de l’application.

library(thematic)

thematic_shiny()   # call once, before the app runs

ui <- fluidPage(
  theme = bs_theme(version = 5, bootswatch = "darkly"),
  plotOutput("plot")
)

server <- function(input, output) {
  output$plot <- renderPlot({
    hist(faithful$waiting)   # picks up dark theme colours automatically
  })
}

Utilisez thematic sur toute application qui dessine des graphiques et utilise un thème non par défaut — surtout les thèmes sombres, où un graphique blanc non stylisé détonne. Une seule ligne garde les figures cohérentes avec le reste de l’interface.

Ajouter du CSS personnalisé quand un thème n’y parvient pas

Les thèmes gèrent la vue d’ensemble ; pour un contrôle fin sur un élément précis vous écrivez du CSS. Il y a trois façons de l’inclure — choisissez selon la quantité de CSS que vous avez et la manière dont vous voulez le gérer.

En ligne, avec tags$style()

Pour quelques règles, intégrez-les directement dans le ui à l’intérieur de tags$head() :

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .well { border-radius: 12px; }
      #title { color: #3a86d4; font-weight: 600; }
    "))
  ),
  titlePanel(h2("My App", id = "title")),
  # ...
)

Utilisez le CSS en ligne pour une poignée de petits ajustements gardés aux côtés de l’interface — rapide et autonome.

Depuis un fichier, avec includeCSS()

Pour plus de quelques règles, déplacez le CSS dans son propre fichier et importez-le avec includeCSS() :

ui <- fluidPage(
  includeCSS("www/styles.css"),
  titlePanel("My App"),
  # ...
)

/* www/styles.css */
.well { border-radius: 12px; }
#title { color: #3a86d4; font-weight: 600; }

Utilisez un fichier dès que le CSS grandit — cela garde le ui lisible et les styles versionnables à part.

La convention www/

Shiny sert automatiquement tout fichier que vous placez dans un dossier www/ à côté de app.R, à la racine web de l’application. Vous pouvez donc lier une feuille de style à la manière HTML standard depuis tags$head() — sans includeCSS() :

ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
  ),
  titlePanel("My App"),
  # ...
)

Le href est relatif à www/, donc www/styles.css se lie comme "styles.css". Utilisez le lien www/ pour les applications de production — c’est l’endroit conventionnel pour les ressources statiques (CSS, images, JavaScript), et le navigateur peut mettre le fichier en cache.

Cibler les éléments. Le CSS atteint un élément par sélecteur : #id correspond à un seul élément auquel vous avez donné un id (h2("Title", id = "title") → #title), et .class correspond à chaque élément ayant cette classe (div(class = "card", ...) → .card). Pour restyler un widget intégré, inspectez-le dans les outils de développement de votre navigateur pour trouver la classe que Shiny lui donne (par exemple .irs-bar sur un curseur).

Régler le thème en direct avec bs_themer()

Pendant la construction, vous n’avez pas à deviner les couleurs et à relancer. Placez bs_themer() dans votre server et un widget de thématisation en direct apparaît dans l’application en cours d’exécution : changez les couleurs, les polices et les préréglages Bootswatch avec aperçu en temps réel, puis copiez le code bs_theme() généré dans votre ui.

server <- function(input, output, session) {
  bs_themer()   # DEV ONLY — a live theme editor in the running app
  # ...your server logic...
}

Utilisez-le pendant le développement, puis retirez-le. bs_themer() est une aide à la conception, pas une fonctionnalité pour les utilisateurs — enlevez la ligne (ou commentez-la) avant de déployer. Le flux de travail est : régler visuellement avec bs_themer(), coller le bs_theme(...) résultant dans votre ui, supprimer l’appel bs_themer().

Quelle approche pour quelle tâche

Un aide-mémoire rapide. L’approche que vous choisissez découle du degré de contrôle dont vous avez besoin.

Vous voulez…	Utilisez	Ce que ça change
Une base moderne et épurée	`bs_theme(version = 5)`	le style Bootstrap 5, à l’échelle de l’application
Un rendu conçu, sans effort	`bs_theme(bootswatch = "flatly")`	une palette de préréglage complète + la typographie
Un thème sombre	`bs_theme(bootswatch = "darkly")`	une palette sombre, à l’échelle de l’application
Vos couleurs / polices de marque	`bs_theme(bg=, fg=, primary=, base_font=, heading_font=)`	des couleurs + polices spécifiques
Une police Google	`font_google("Inter")` dans `bs_theme()`	télécharge + applique la police
Des graphiques accordés au thème	`thematic::thematic_shiny()`	les couleurs/polices des graphiques base + ggplot2
Quelques petits ajustements CSS	`tags$style(HTML("..."))` dans `tags$head()`	des règles personnalisées en ligne
Plus de CSS, bien rangé	`includeCSS("www/styles.css")`	des règles depuis un fichier
Des ressources statiques de production	une `www/styles.css` liée dans `tags$head()`	une feuille de style externe mise en cache
Expérimenter un thème en direct	`bs_themer()` dans le `server` (dev uniquement)	un éditeur de thème en direct

Le schéma est constant : recourez d’abord à bs_theme() (un préréglage, puis vos propres couleurs et polices), ajoutez thematic pour que les graphiques suivent, et n’écrivez du CSS personnalisé que pour les détails précis qu’un thème ne peut pas atteindre.

Problèmes fréquents

Le thème ne s’applique pas. Presque toujours, l’argument theme = est sur la mauvaise fonction ou manquant. Il appartient à la fonction de page — fluidPage(theme = bs_theme(...), ...) ou navbarPage(..., theme = bs_theme(...)) — pas à un sidebarPanel, un div, ou une sortie. Vérifiez que theme = se trouve sur le conteneur le plus externe et que vous avez réellement passé l’objet bs_theme(), et pas seulement chargé bslib.

Les graphiques ne s’accordent pas à l’application stylisée. Les thèmes stylisent le HTML, pas l’image vers laquelle un graphique est rendu, donc un graphique par défaut reste gris sur blanc dans une application sombre. Ajoutez thematic::thematic_shiny() une fois (avant que l’application ne s’exécute) et les graphiques base R et ggplot2 adoptent les couleurs et les polices du thème.

Le CSS dans www/ ne se charge pas. Deux causes habituelles : un mauvais chemin ou pas de lien. Le fichier doit être dans un dossier nommé exactement www/ à côté de app.R, et le href est relatif à www/ — liez www/styles.css comme href = "styles.css", et non "www/styles.css". Si vous avez utilisé includeCSS() à la place, ce chemin est relatif au répertoire de l’application, donc là vous écrivez bien includeCSS("www/styles.css"). Après correction, rafraîchissez la page sans cache pour vider un ancien fichier mis en cache.

Questions fréquentes

Comment ajouter un thème à une application Shiny ?

Construisez un thème avec bslib::bs_theme() et passez-le à l’argument theme de votre fonction de page : fluidPage(theme = bs_theme(version = 5), ...). Toute l’application le reprend. Pour une application multi-pages, définissez theme = sur navbarPage() de la même façon.

Comment utiliser un thème Bootswatch dans Shiny ?

Passez le nom du thème à bootswatch = : bs_theme(version = 5, bootswatch = "flatly") pour un thème clair épuré, ou "darkly" pour du sombre. Voyez tous les noms disponibles avec bslib::bootswatch_themes(). Vous pouvez toujours redéfinir des couleurs individuelles par-dessus un préréglage.

Comment ajouter du CSS personnalisé à Shiny ?

Trois façons : en ligne avec tags$style(HTML("...")) à l’intérieur de tags$head() pour quelques règles ; depuis un fichier avec includeCSS("www/styles.css") ; ou liez une feuille de style placée dans le dossier www/ servi automatiquement depuis tags$head(tags$link(rel = "stylesheet", href = "styles.css")). Ciblez les éléments par #id ou .class.

Comment changer la police d’une application Shiny ?

Définissez base_font (corps) et heading_font (titres) dans bs_theme(), en enveloppant chaque police dans font_google() pour la récupérer depuis Google Fonts : bs_theme(base_font = font_google("Inter"), heading_font = font_google("Poppins")). Aucun fichier de police à gérer.

Pourquoi mes graphiques ne s’accordent-ils pas à mon thème Shiny ?

Un bs_theme() stylise le HTML de l’application, mais un graphique est une image rendue séparément, donc il conserve les couleurs par défaut de R. Appelez thematic::thematic_shiny() une fois avant que l’application ne s’exécute et vos graphiques base R et ggplot2 adoptent automatiquement l’arrière-plan, le premier plan et les polices du thème.

Testez vos connaissances

À votre tour : personnalisez une application et accordez son graphique

Écrivez un ui et un server pour une application d’histogramme. Stylisez-la avec bs_theme() : utilisez le préréglage Bootswatch flatly, définissez primary sur "#3a86d4", et utilisez font_google("Inter") comme base_font. Puis faites en sorte que l’histogramme reprenne l’apparence du thème pour qu’il ne soit pas rendu en gris par défaut.

Indice

Le thème va sur fluidPage(theme = bs_theme(...)). À l’intérieur de bs_theme(), définissez version = 5, bootswatch, primary, et base_font. Pour que le graphique s’accorde, appelez thematic::thematic_shiny() une fois avant l’application — les thèmes stylisent le HTML, pas l’image rendue.

Solution

library(shiny)
library(bslib)
library(thematic)

thematic_shiny()   # plots adopt the theme automatically

ui <- fluidPage(
  theme = bs_theme(
    version = 5,
    bootswatch = "flatly",
    primary = "#3a86d4",
    base_font = font_google("Inter")
  ),
  titlePanel("Themed histogram"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30)
    ),
    mainPanel(plotOutput("hist"))
  )
)

server <- function(input, output) {
  output$hist <- renderPlot({
    hist(faithful$waiting, breaks = input$bins, main = "")
  })
}

bs_theme() sur fluidPage() stylise toute l’application ; thematic_shiny() accorde l’histogramme sans aucun code de mise en forme du graphique.

Vérification rapide

Vous définissez theme = bs_theme(bootswatch = "darkly") et votre application devient sombre, mais le graphique est encore rendu sur un fond blanc. Pourquoi ?

A. darkly ne prend pas en charge les graphiques — il vous faut un autre thème Bootswatch. B. Un thème stylise le HTML de l’application, pas l’image vers laquelle un graphique est rendu ; ajoutez thematic::thematic_shiny(). C. Vous devez définir bg = "#000000" dans bs_theme() pour que le graphique devienne sombre. D. Le graphique a besoin de son propre argument theme =.

Afficher la réponse

B. bs_theme() stylise le HTML et les composants de la page, mais un graphique est rendu séparément en tant qu’image, donc il conserve le fond blanc par défaut de R. Appeler thematic::thematic_shiny() une fois (avant que l’application ne s’exécute) fait adopter aux graphiques base R et ggplot2 les couleurs et les polices du thème — aucun code par graphique nécessaire. Définir bg (C) change la page, pas le graphique ; il n’y a pas de theme = sur une sortie de graphique (D).

Conclusion

Vous disposez désormais de la boîte à outils de mise en forme complète, à l’approche moderne d’abord : démarrez chaque application avec bs_theme(), recourez à un préréglage Bootswatch (flatly, darkly, …) pour un rendu conçu instantané, personnalisez-la avec bg/fg/primary et des polices font_google(), gardez les graphiques cohérents avec un seul appel thematic::thematic_shiny(), et passez au CSS personnalisé — en ligne, includeCSS(), ou une feuille de style www/ — uniquement pour les détails qu’un thème ne peut pas atteindre. Réglez-la visuellement avec bs_themer() pendant la construction, puis retirez-le avant de déployer.

Avec les entrées, les sorties, les mises en page et la thématisation en main, la dernière préoccupation du ui est de faire fonctionner l’ensemble sur toutes les tailles d’écran — le responsive design.

Leçons connexes

Construisez à partir d’ici : mises en page — la page, le panneau latéral et la grille que la thématisation stylise (la leçon précédente) ; contrôles d’entrée et affichages de sortie — les widgets et les résultats qu’un thème restyle. Ensuite responsive design fait fonctionner l’application stylisée sur tous les écrans. Pour savoir où le ui se situe dans l’application, voir structure d’une application.
Allez plus loin : UI Shiny — la série complète. · Science computationnelle et IA — le pilier.

Cette page vous a-t-elle été utile ?

Réutilisation

CC BY-NC-SA 4.0

Citation

BibTeX

@online{2026,
  author = {},
  title = {Thèmes et CSS Shiny : bslib, bs\_theme, Bootswatch et style
    personnalisé},
  date = {2026-06-28},
  url = {https://www.datanovia.com/learn/programming/shiny/ui/styling-themes},
  langid = {fr}
}

Veuillez citer ce travail comme suit :

“Thèmes et CSS Shiny : bslib, bs_theme, Bootswatch et style personnalisé.” 2026. June 28. https://www.datanovia.com/learn/programming/shiny/ui/styling-themes.