-
Notifications
You must be signed in to change notification settings - Fork 2
colors and themes
To use required colors, import corresponding color definitions:
<link rel="stylesheet" href="css/fnx_ui.css">
<link rel="stylesheet" href="css/theme_blue.css"> <!-- also contains all shades - d1, d2, ... -->
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 brightness of each color (d-arker, l-ighter) can be achieved with --d1, --l1, --d2, ... up to --d4 and --l4.
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).
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>