Dark Mode is an External Module that allows you to change the colors used by REDCap.
Three background colors can be defined. Three text colors can be defined. One link color can be defined.
This E.M. also removes many of REDCap's style's in favor of a simpler presentation.
Projects may choose their own colors.
System administrators can disallow custom project colors.
Not everybody will love this. For those that do, specify their user names, separated by commas. Only they will see the customization.
It works by defining simple CSS overrides.
User Names: Specify specific users that should see the Dark Skin Mode.
If left blank all admins and only admins will use the custom colors.
Primary Background Color: The background color used on the right side, the non-navigation area.
Secondary Background Color: The background color of the left side navigation area. Buttons are also set to this color. Fields will use a combination of primary and secondary background depending on if they are a modal or not.
Tertiary Background Color:Rarely used. Button borders for navigation links.
Note: Primary, Secondary and Tertiary look best when they are slight shade variants of the same color or very complimentary colors. The primary and secondary background colors make pop ups stand out and fields stand out as well.
Background Brightness: More than one background color is needed to create effects like buttons and modals. Options are:
- Same color as primary background
- Lighter
- Darker
- Specify
Choosing "Lighter" or "Darker" will open a field where the percent brightness change between backgrounds is set.
The range is 0% to 100% the color of the primary background color. For example, 10% darker will have buttons that are 10% darker than the background.
Choose "Specify" to set your own secondary and tertiary colors which are mainly used for buttons and pop ups.
Primary Text Color. Specify the color that most text should be in REDCap.
Secondary Text Color. A color that will stand out more for items like section headers.
Tertiary Text Color. A color that will stand out less for items like side notes and foot notes.
Link Color: Specify the link color. Most, links will be this color. The text inside button links will be this color.
- Primary Background: #27221f
- Background Brightness: Lighter by 10%
- Primary Text: #C0C0C0
- Secondary Text: #f8f8f8
- Tertiary Text: #C0C0C0
- Link: #ffffff
- Primary Background Color: #222222
- Other backgrounds: Lighter by 15%
- Primary text color: #ddd
- Secondary text color: #98AFC7
- Link color: #f0f0f0
- Primary Background Color: #111111
- Other backgrounds: Lighter by 15%
- Primary text color: #FFF
- Secondary text color: #98AFC7
- Link color: #AED6F1
- Primary Background: #d0efff
- Secondary Background: #ffd0d7
- Tertiary Background: #ff9dac
- Primary Text: #111
- Secondary Text: #111
- Tertiary Text: #111
- Link: #0c0002
If you come up with an amazing color combo let me know!
In sections like the Help & FAQ the system settings will be applied. This may be a bit jarring if a project has custom colors and they view the Help and FAQ section to see the system colors.
REDCap uses specific colors for many important things. Sometimes red, green and blue are used in REDCap and it was the author's choice to leave those colors and their meaning in place, unchanged by this E.M.
Append the url with cssdisabled=1 to see the default page styles.