Themeing

[jackcmeyer]

🚀 Feature Proposal

Add a way to for a user of this component library to use a "theme".

Motivation

Easily change characteristics about styling across components.

[fox1t]

This feature is important for HospitalRun customization by final hospitals (white-labeling).

[jackcmeyer]

@fox1t are you suggesting that we will need a page in the tool to "build your theme" for hospital administrators so that they can use their branding?

[fox1t]

For the first release, we can just have docs saying "which css" to modify.

[jackcmeyer]

Ideally, I'm thinking Styled Components + SCSS.

Here is a link to make that happen: https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8

What do you think @fox1t?

[matteovivona]

@jackcmeyer I'd pass on this part of the theme. It will be a professional app, and the important thing is that there are logics of "accessibility" and compatibility with "slow and outdated systems" (here in Italy, for example, it is necessary to be used in a public health environment). At this stage, I would like to focus on two different themes: one daily and one nightly, but developed by us.

[jackcmeyer]

@tehKapa I agree with what you are saying. However, this issue is more about themeing for the HospitalRun theme. Essentially, the idea is to define a bunch of scss variables such as color-success, color-primary, background-color, etc so each component can have consistent coloring and styling. It is NOT functionality to allow for users to choose their own color scheme. Does that make sense?

[jackcmeyer]

This issue may take a little bit of research to accomplish. This may be a good starting point: https://react-bootstrap.github.io/getting-started/introduction/#themes

According to the documentation of react-boostrap, it should be compatible with bootstrap themes out of the box. Documentation of themeing with scss can be found here: https://react-bootstrap.github.io/getting-started/introduction/#themes

[matteovivona]

Ok! Thanks for explaining. So, something like a variable.scss file with variables like

$font-color: #FFFFFF;
$font-family-default: 'Comics Sans', 🌝 
etc...

these?

[jackcmeyer]

@tehKapa you got it!

This will allow us to globally change colors, font size, spacing, etc. with one variable change (or at least that's the goal).

[jackcmeyer]

@StefanoMiC @tehKapa @fox1t

I'm no designer, but here might be a good starting point for colors:

$primary:#009b9e;
$secondary:#868e96;
$success:#35a967;
$danger:#f44336;
$info:#1abc9c;
$warning:#b3992f;
$light:#fdfffc;
$dark:#273647;

I just imported the pallete into a tool http://colormind.io/bootstrap/ and then used https://themestr.app/theme to help build the bootstrap colors.

[matteovivona]

Great tool! Here are the "official" colors

[StefanoMiC]

@jackcmeyer pretty nice tool! I'm currently working on the interface redesign, so a new palette is going to surface from that process and will be added to the project as well as the mockup views.

I completely agree with the need to have themeing capabilities, we should leaverage the themeing functionality of react-bootstrap as a starting point for sure.

[jackcmeyer]

@StefanoMiC excited to see what you come up with!

[MatthewDorner]

https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8

This looks like it's about migrating from existing scss theme to styled-components. Starting from scratch, we wouldn't need scss at all (as styled-components can't read scss variables based on what it says in the article), the theme would just be an object defining values that are accessed via styled-components' ThemeProvider. So really we would just be using styled-components?

If I'm writing more components, should I import styled-components and start using it?

[fox1t]

@MatthewDorner I agree 100% with you. We don't need scss or any other css preprocessor. We can go straight with styled-components. However it would be nice to discuss css-in-js options in a separate issue. Can you handle it?

[MatthewDorner]

Researched and discussed with @jackcmeyer more, it seems like only using SASS is easier. Using a SASS file to overwrite the colors in Bootstrap will theme all the react-bootstrap stuff automatically, and custom components could use per-component SASS file imports with access to those variables.

styled-components can't access SASS variables, so there's no way to provide the theme colors directly to styled-components unless with a complicated process such as described in the Medium article. And if we only used styled-components and not SASS at all, you'd have to overwrite every single style that's based on theme (for the react-bootstrap components) from within JS which would be too much work.

[ghost]

:tada: This issue has been resolved in version 0.28.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: