inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2262] Updated theming docs (#2917)

Browse Source 
* [ADF-2262] Updated theming docs

* [ADF-2262] Replaced new theming doc with a modified version of the original
This commit is contained in:
Andy Stark
2018-02-12 18:21:14 +00:00
committed by Eugenio Romano
parent 37561d1d27
commit f4e2cb8cb2
2 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/docassets/images/ThemeSwatches.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

31
docs/theming.md
View File

@@ -1,4 +1,29 @@
# Theming your Alfresco ADF app
# Theming an ADF app
The [Material Design](https://material.io/guidelines/material-design/introduction.html)
specification doesn't specify a single color scheme. Instead it uses the concept
of color **themes** to allow designers some flexibility in their choice of colors.
A theme is a palette based around two main colors: the **primary** color (used widely
throughout the app) and the **accent** color (used mainly for highlighting and calling
out specific UI elements). Each of these colors is defined in a number of shades. For
example, a blue/orange theme could define shades like the following:
![Theme swatches](docassets/images/ThemeSwatches.png)
Each shade is related to a particular purpose or set of purposes within the app. So for
example, the shade that works best for text isn't necessarily the same shade you would use
for flat areas of color. Material Design provides a number of
[standard themes](https://material.io/guidelines/style/color.html#color-themes)
with shades that are carefully chosen for each purpose within the UI. The CSS files are
designed so that the names are consistent between themes (so the same "purpose" will always
have the same class name across CSS files). This makes it easy to switch themes simply by
changing a few CSS definitions. Material Design also defines the relationship between
the different shades, so you can calculate your own color values or, more straightforwardly, use
an [online palette design tool](http://mcg.mbitson.com/).
See the [Material Design Style page](https://material.io/guidelines/style/color.html#) for
more information about color concepts.
## Using a pre-built theme
@@ -20,7 +45,7 @@ Available pre-built themes:
* `adf-pink-bluegrey.css`
* `adf-purple-green.css`
If you're using Angular CLI you can include one of the prebuilt theme in your `styles.scss` file:
If you're using Angular CLI you can include one of the prebuilt themes in your `styles.scss` file:
```css
@import '~@alfresco/adf-core/prebuilt-themes/adf-blue-orange.css';
```
@@ -32,7 +57,7 @@ Or you can add it directly in your index.html
## Defining a custom theme
When you want more customization than a pre-built theme offers, you can create your own theme file. You need to include the packages only what you really use in your application.
When you want more customization than a pre-built theme offers, you can create your own theme file. You only need to include the packages you actually use in your application.
```scss
/*