How to Create Fresh Themes for Shiny Applications

by | Oct 11, 2024 | Programming

Welcome to your one-stop guide for creating fresh themes for your Shiny applications, including those using Shiny, Shiny Dashboard, and bs4Dash. With the fresh package, you can add a personalized touch to your applications with customized themes. Let’s get started!

Installation Steps

Before diving into theme creation, you need to install the fresh package. You have two options:

  • Install the stable version from CRAN: 
    install.packages("fresh")
  • Install the development version from GitHub: 
    remotes::install_github("dreamRs/fresh")

Creating Themes Using bs4Dash

To personalize your bs4Dash applications, you can create a custom theme. Think of this process like painting a canvas; you get to choose your colors and design your masterpiece!

Here’s how you can create your theme:

mytheme_bs4Dash <- bs4DashTheme(  
  primary = "#5E81AC",  
  secondary = "#B48EAD",  
  success = "#A3BE8C",  
  danger = "#BF616A",  
  sidebar_light_bg = "#3B4252",  
  sidebar_light_color = "#E5E9F0",  
  main_bg = "#2E3440",  
  body_color = "#ECEFF4",  
  card_bg = "#4C566A",  
  white = "#E5E9F0",  
  info_box_bg = "#4C566A",  
  dark = "#272c30",  
  gray_600 = "#FFF"  
)

Once you have your theme ready, you can use it in your application like this:

bs4DashPage(  
  title = "bs4Dash Custom Theme",  
  navbar = bs4DashNavbar(skin = "light"),  
  sidebar = bs4DashSidebar(    
    title = "bs4Dash Custom Theme",    
    skin = "light"  
  ),  
  body = bs4DashBody(    
    use_theme(mytheme_bs4Dash)  
  )  
)

Creating Themes for Shiny Applications

For shiny applications, you can craft themes in a similar way. It’s much like creating a wardrobe; you're selecting pieces to make the perfect outfit!

Start by creating a theme with the default style:

mytheme <- create_theme(  
  theme = "default",  
  bs_vars_navbar(    
    default_bg = "#3f2d54",    
    default_color = "#FFFFFF",    
    default_link_color = "#FFFFFF",    
    default_link_active_color = "#FFFFFF"  
  ),  
  bs_vars_color(    
    gray_base = "#354e5c",    
    brand_primary = "#75b8d1",    
    brand_success = "#c9d175",  
    brand_info = "#758bd1",    
    brand_warning = "#d1ab75",    
    brand_danger = "#d175b8"  
  ),  
  bs_vars_state(    
    success_text = "#FFF",    
    success_bg = "#c9d175",    
    success_border = "#c9d175",  
    info_text = "#FFF",    
    info_bg = "#3f2d54",    
    info_border = "#3f2d54",    
    danger_text = "#FFF",    
    danger_bg = "#d175b8",    
    danger_border = "#d175b8"  
  ),  
  bs_vars_wells(    
    bg = "#FFF",    
    border = "#3f2d54"  
  ),  
  output_file = "www/mytheme.css"  
)

To apply this theme, you simply do:

navbarPage(  
  title = "My Application",  
  theme = "mytheme.css"  
)

Creating Themes for shinydashboard

To customize colors for your shinydashboard applications, follow these steps. It’s akin to tuning a musical instrument; every adjustment will bring harmony to your creation!

Here's how you can create a theme:

mytheme <- create_theme(  
  adminlte_color(    
    light_blue = "#434C5E"  
  ),  
  adminlte_sidebar(    
    width = "400px",    
    dark_bg = "#D8DEE9",    
    dark_hover_bg = "#81A1C1",    
    dark_color = "#2E3440"  
  ),  
  adminlte_global(    
    content_bg = "#FFF",    
    box_bg = "#D8DEE9",    
    info_box_bg = "#D8DEE9"  
  )  
)

Then, utilize your custom theme:

dashboardPage(  
  header = dashboardHeader(title = "My Dashboard"),  
  sidebar = dashboardSidebar(    
    # ...  
  ),  
  body = dashboardBody(    
    use_theme(mytheme)  
  )  
)

Troubleshooting

If you encounter any issues while creating or applying your themes, here are some troubleshooting tips:

  • Make sure you have installed the latest version of the fresh package.
  • Check for any typos in your code when specifying colors or themes.
  • Refer to the package documentation for details on function parameters and usage.
  • Try restarting your R session to ensure all packages are loaded correctly.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

By following these steps, you can easily create customized and appealing themes for your Shiny applications. Experiment with different colors and styles to make your applications stand out!

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

×