Skip to content

Subsite Theming

Tom Rau edited this page May 8, 2020 · 10 revisions

Initial Subsite theming documentation:

Google Doc Style Guide

New default blue theme (once you guys sign off on this we should udpate the db to make whatever this value is, the default value).

{"primaryColor":"#6BA5D6","secondaryColor":"#1b2a38","lightTextColor":"#eee","secondaryTextColor":"#333", "backgroundColor":"#4D5863","primaryAltColor":"#5786AD", "authHeaderColor":"#5786AD", "sideBarColor": "#333"}

Original Theme

{"primaryColor":"#55B88D","secondaryColor":"#1b2a38","lightTextColor":"#eee","secondaryTextColor":"#333", "backgroundColor":"#666", "sideBarColor":"#4d5863", "primaryAltColor":"#8bb7a4"}

Variable Map

These attributes on the left (below) are the variables we currently have mapped in our theme. The values on the right are the colors we are currently mapping to them from our theme object. More on that below and how it will most likely want to change and have more of a 1:1 with some components that you may want more granular control over. :

{ button: colors.primaryColor, buttonSecondary: colors.secondaryColor, sorterColor: colors.primaryColor, backgroundColor: colors.backgroundColor, authHeader: { headerBackground: colors.primaryColor, font: colors.lightTextColor, hoverFont: colors.secondaryTextColor, logoFont: '#fff', }, authPage: { signInLinks: colors.lightTextColor, signInLinksHover: colors.secondaryTextColor }, authButton: { button: colors.secondaryColor, buttonFont: '#fff', buttonHover: '#e6e6e6', buttonBorderHover: '#adadad', lightTextColor: '#fff', }, aggSideBar: { sideBarBackground: colors.secondaryColor, sideBarFont: '#bac5d0', sideBarFontHover: '#fff', sideBarTitleFont: '#fff', }, crumbsBar: { containerBackground: '#f2f2f2', containerFont: '#333', filterBarBackground: 'rgba(85, 184, 141, 0.5)', }, crumbs: { crumbBackground: colors.primaryColor, crumbFont: '#fff', }, searchResults: { resultsHeaderBackground: colors.primaryColor, resultsRowHighlight: colors.primaryAltColor, resultsPaginationButtons: colors.primaryColor, }, presearch: { presearchHeaders: colors.primaryColor, }, studyPage: { sectionBorderColor: colors.primaryColor, reviewStarColor: colors.primaryColor, }, mapSection: { markerFontColor: colors.primaryColor, markerBorderColor: colors.secondaryColor, facilityCardColor: colors.primaryColor, }, };

Current Default Theme

The current default theme on experimental is outdated. But below is something you can use that is mapped to how we have the vars set currently in case you get json errors and want to revert back. All attributes adn values need to be in quotations with commas after the values and colons between attr and value.

{"primaryColor":"#6BA5D6","secondaryColor":"#1b2a38","lightTextColor":"#eee","secondaryTextColor":"#333", "backgroundColor":"#4D5863","primaryAltColor":"#5786AD", "authHeaderColor":"#5786AD", "sideBarColor": "333"}

thisTheme = { primaryColor: '#6BA5D6', secondaryColor: '#1b2a38', lightTextColor: '#fff', secondaryTextColor: '#777', backgroundColor: '#4D5863;', primaryAltColor: '#4889BF', }

Future Use

We can easily make the theme more granular like below vs what we have right now which relies more on primaryColor, secondaryColor, etc. Probably best set up is a nice medium of the two. { button: colors: colors.buttonColor, buttonSecondary: colors.buttonSecondary sorterColor: colors.sorterColor backgroundColor: colors.backgroundColor, authHeader: { headerBackground: colors.authHeaderBackground, font: colors.lightTextColor, hoverFont: colors.secondaryTextColor, }, authPage: { signInLinks: colors.lightTextColor, signInLinksHover: colors.secondaryTextColor }, authButton: { button: colors.buttonColor, }

}

Clone this wiki locally