Skip to content
Håvard Moås edited this page Nov 28, 2019 · 21 revisions

Getting started

  1. Include the following in your App.xaml:
...
<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Resources/Styles/Colors.xaml"/>
        <!-- Other dictionaries that you refer -->
    </ResourceDictionary.MergedDictionaries>
...
</ResourceDictonary>
...
  1. Use them like so:
<Frame BackgroundColor="{StaticResource Theme.Teal.Primary}" /> 

This library does not have anything built in to support changing between dark / light mode.

Stick with StaticResource if you are not changing resources run-time as this will result in a performance hit.

Theme

Teal

Primary #047F89

Hex : #047F89

Resource : {StaticResource Theme.Teal.Primary}

Primary Light #65868F

Hex : #65868F

Resource : {StaticResource Theme.Teal.PrimaryLight}

Primary Air #98B2AE

Hex : #98B2AE

Resource : {StaticResource Theme.Teal.PrimaryAir}

Secondary #97C8CD

Hex : #97C8CD

Resource : {StaticResource Theme.Teal.SecondaryAir}

Secondary Light #ECF3F4

Hex : #ECF3F4

Resource : {StaticResource Theme.Teal.SecondaryLight}

Secondary Air #F0F5F7

Hex : #F0F5F7

Resource : {StaticResource Theme.Teal.SecondaryAir}

Color Palette

Dark

Dark #000000

Hex : #000000

Resource : {StaticResource ColorPalette.Dark}

Dark Light #111111

Hex : #111111

Resource : {StaticResource ColorPalette.DarkLight}

Dark Air #3B3D3D

Hex : #3B3D3D

Resource : {StaticResource ColorPalette.DarkAir}

Tertiary

Tertiary #404040

Hex : #404040

Resource : {StaticResource ColorPalette.Tertiary}

Tertiary Light #4A4A4A

Hex : #4A4A4A

Resource : {StaticResource ColorPalette.TertiaryLight}

Tertiary Air #646464

Hex : #646464

Resource : {StaticResource ColorPalette.TertiaryAir}

Quaternary

Quaternary #76797A

Hex : #76797A

Resource : {StaticResource ColorPalette.Quaternary}

Quaternary Light #7F7F7F

Hex : #7F7F7F

Resource : {StaticResource ColorPalette.QuaternaryLight}

Quaternary Air #8C8C8C

Hex : #8C8C8C

Resource : {StaticResource ColorPalette.QuaternaryAir}

Quinary

Quinary #ACACAC

Hex : #ACACAC

Resource : {StaticResource ColorPalette.Quinary}

Quinary Light #B2B2B2

Hex : #B2B2B2

Resource : {StaticResource ColorPalette.QuinaryLight}

Quinary Air #D9D9D9

Hex : #D9D9D9

Resource : {StaticResource ColorPalette.QuinaryAir}

Light

Light #EBEBEB

Hex : #EBEBEB

Resource : {StaticResource ColorPalette.Light}

Light Light #F9F9F9

Hex : #F9F9F9

Resource : {StaticResource ColorPalette.LightLight}

Light Air #FFFFFF

Hex : #FFFFFF

Resource : {StaticResource ColorPalette.LightAir}

Accent

Accent #AB69BF

Hex : #AB69BF

Resource : {StaticResource ColorPalette.Accent}

Accent Light #AB69BF

Hex : #D297E3

Resource : {StaticResource ColorPalette.AccentLight}

Accent Air #F4DDFA

Hex : #F4DDFA

Resource : {StaticResource ColorPalette.AccentAir}

Status Color Palette

Danger

Danger Dark #B54F4E

Hex : #B54F4E

Resource : {StaticResource StatusColorPalette.DangerDark}

Danger #F76D6D

Hex : #F76D6D

Resource : {StaticResource StatusColorPalette.Danger}

Danger Light #FFAAAA

Hex : #FFAAAA

Resource : {StaticResource StatusColorPalette.DangerLight}

Danger Air #FFDEDE

Hex : #FFDEDE

Resource : {StaticResource StatusColorPalette.DangerAir}

Warning

Warning Dark #D8AD00

Hex : #D8AD00

Resource : {StaticResource StatusColorPalette.WarningDark}

Warning #FFDC52

Hex : #FFDC52

Resource : {StaticResource StatusColorPalette.Warning}

Warning Light #FCE794

Hex : #FCE794

Resource : {StaticResource StatusColorPalette.WarningLight}

Warning Air #F3E9BC

Hex : #F3E9BC

Resource : {StaticResource StatusColorPalette.WarningAir}

Success

Success Dark #006700

Hex : #006700

Resource : {StaticResource StatusColorPalette.SuccessDark}

Success #5CB85C

Hex : #5CB85C

Resource : {StaticResource StatusColorPalette.Success}

Success Light #9FD99F

Hex : #9FD99F

Resource : {StaticResource StatusColorPalette.SuccessLight}

Success Air #CCEBCC

Hex : #CCEBCC

Resource : {StaticResource StatusColorPalette.SuccessAir}

Info

Info Dark #266B89

Hex : #266B89

Resource : {StaticResource StatusColorPalette.InfoDark}

Info #337AB7

Hex : #337AB7

Resource : {StaticResource StatusColorPalette.Info}

Info Light #7FAFD8

Hex : #7FAFD8

Resource : {StaticResource StatusColorPalette.InfoLight}

Info Air #C4DBEF

Hex : #C4DBEF

Resource : {StaticResource StatusColorPalette.InfoAir}

Clone this wiki locally