Colors for Elm-UI

Elm packages: elm-ui-colors

This package provides a range of HTML/CSS Colors for use with Elm-UI .

Install

$ elm install phollyer/elm-ui-colors

Design Goals

This package is intended to provide easy access to HTML/CSS color names, which should make it easier to switch from using CSS to Elm-UI if you use color names in your CSS.

So, if you currently do something like this:

CSS

.myClass {
  background-color: yellow;
  color: purple;
}

Elm

Html.div
  [ class "myClass" ]
  [ Html.text "Hello World" ]

You can lose the CSS completely using Elm-UI and Elm-UI-Colors as follows:

Elm-UI

Element.el
  [ Background.color yellow
  , Font.color purple
  ]
  [ Element.text "Hello World" ]

Usage

Simply import the olors you require, and use them with your Elm-UI attributes.

Example

module Main exposing (main)

{-| -}

import Element as El
import Element.Background as Background
import Element.Font as Font
import Color.Black exposing (black)
import Color.White exposing (white)
import Color.Pink exposing (hotpink)


main =
    El.layout
        [ Background.color black
        , El.width El.fill
        , El.height El.fill
        ]
    <|
        El.column
            [ El.centerX, El.centerY ]
            [ El.el
                [ Font.color white ]
                ( El.text "white")
            , El.el
                [ Font.color hotpink ]
                ( El.text "hotpink")
            ]

Credits

rapidtables.com: Color schemes and codes.