-
-
Notifications
You must be signed in to change notification settings - Fork 16
Subsite Theming
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"}
{"primaryColor":"#55B88D","secondaryColor":"#1b2a38","lightTextColor":"#eee","secondaryTextColor":"#333", "backgroundColor":"#666", "sideBarColor":"#4d5863", "primaryAltColor":"#8bb7a4"}
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,
},
};
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', }
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,
}
}