-
Notifications
You must be signed in to change notification settings - Fork 2
colors and themes
Different colors you can use are demonstrated on http://demo.fnx.io/fnx_ui/css/demo_colors.html
To give a component color background (and appropriate contrast text color) give it class bg--pink. Different shades of each color (d-arker, l-ighter) can be achieved with --d1, --l1, --d2, ... (up to --d4 and --l4) suffixes.
To change text color, and keep background color, use text--* classes.
Note: bg--* and text--* classes are included in fnx_ui.css, you don't have to import anything else.
Basic colors and their --d2, --d4, --l2, --l4 shades can be used as a color theme. Theme is created by two classes, which you typically assign to body element.
-
theme--color,theme--color--shade- set's up the basic color of your UI -
accent--color,accent--color--shade- set's up the accent color - color of important buttons, FABs, etc.
Don't forget to import color definitions for both colors (theme and accent).
Note: *--l1, *--l3, *--d1 and *--d3 themes and accents are not available (generated files were simply too big, and it doesn't seem THAT useful.)
This is how color scheme of http://demo.fnx.io/fnx_ui/ng2/#/Form is set up.
<head>
<link rel="stylesheet" href="packages/fnx_ui/css/fnx_ui.css">
<link rel="stylesheet" href="packages/fnx_ui/css/theme_fnx.css">
<link rel="stylesheet" href="packages/fnx_ui/css/theme_red.css">
...
</head>
<body class="theme--fnx accent--red">
...
</body>
After setting up your theme, you still can change colors of different components ad-hoc (bg-*, text--*). Avoid nesting of color changes:
<div class="bg--red">
<div class="bg--yellow">
... it might lead to unexpected results.
Theme and accent also give you a bg--theme and bg--accent classes of corresponding colors.
<body class="theme--fnx accent--red">
<button class="btn bg--accent">Important button!</button>