How do I change the color of a link in Elm? - elm

Question

I create links for a website in Elm with Text.link "https://somewebsite.com" (toText "SomeWebsite"). I would like to be able to set the color of the resultant text.
I have tried Text.link "https://somewebsite.com" (Text.color white <|toText "SomeWebsite") and Text.color white <|Text.link "https://somewebsite.com" (toText "SomeWebsite"), neither of which work, despite that the type signature of link is link : String -> Text -> Text. Both of these snippets compile.
I've looked through the source of elm-lang.org, which has links that look like they've been styled (they seem to have a different color than the default dark blue and no underlines) and haven't found anything that explains how it's done there.
How can I color the text of links in Elm?

Answer 1

The following will create a link to google that is red:
import Text (..)
main = toText "Google"
|> style {defaultStyle | color <- red, height <- Just 20 }
|> link "http://google.com"
|> leftAligned
Live demo here.
Unfortunately, this does not give you the power to really "style" the link when you hover over it which is a bit of a bummer.
The elm-lang website has the following styles at the top of its pages:
<style type="text/css">
a:link {text-decoration: none; color: rgb(15,102,230);}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: underline; color: rgb(234,21,122);}
body { font-family: "Lucida Grande","Trebuchet MS","Bitstream Vera Sans",Verdana,Helvetica,sans-serif !important; }
p, li { font-size: 14px !important;
line-height: 1.5em !important; }
</style>
This gives its links the styling you see there.
However, it is still possible to get this type of styling using customButton from Graphics.Input.
import Graphics.Input as Input
click = Input.input ()
linkFormat = { defaultStyle | color <- blue }
hoverFormat = { linkFormat | bold <- True }
customLink url text =
let text' = Text.toText text
regular = Text.style linkFormat text' |> leftAligned
hover = Text.style hoverFormat text' |> leftAligned
down = Text.style linkFormat text' |> leftAligned
in link url <| Input.customButton click.handle () regular hover down
main = customLink "http://google.com" "Google"
Live demo here.
One thing to notice here is that I am not using Text.link. I am just using the link function from Graphics.Element which is imported by default and has the type String -> Element -> Element.
I hope this helps!

Answer 2

This no longer works on Elm 0.13, btw. It first says link is ambiguous between the one in the Graphics lib and the Text.link, so I qualify it by prepending Text. to link and then it complains that it 'Could not find variable 'Text.link'.' Same thing happens when I qualify it as a Graphics.Element.link.
it seems weird that I would not be able to qualify something by adding the module qualifier to it in Elm 0.13.
To accomplish this in 0.13, I figured out you can do the below.
import Text
main = link "http://www.google.com" <| leftAligned <| Text.color red <| toText "Google"
http://share-elm.com/sprout/5430943ee4b017b21db2f86c

Answer 3

Demo in Elm-0.18
module Main exposing (main)
import Html as H exposing (Html)
import Html.Attributes as HA
main : Html msg
main =
H.a
[ HA.href "https://en.wikipedia.org"
, HA.style [ ( "color", "green" ) ]
]
[ H.text "wikipedia" ]