0
Answered

Color code reference (HEX) for Built-in Themes?

Kpocius 9 months ago in Colors Icons Fonts Themes • updated by Terry (ActionTiles) (Co-Founder) 9 months ago 1

Can you list the hex color codes for the various themes.  I'm setting up the jggdev weather forecast and would like to match the tile to the theme. 


Thanks!

Answered

Hi there!


I highly recommend getting a free "eyedropper color picker" utility:


However, here is the current Theme CSS (subject to change):

.at-tile-preview-container[at-theme="metro"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="info"] {
    background-color: #01579B;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="normal"] {
    background-color: #1B5E20;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="accent"] {
    background-color: #1B5E20;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="warn"] {
    background-color: #E65100;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="accent"] * {
    color: white;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="warn"] * {
    color: black;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="warn"]>* {
    opacity: 0.5;
}
.at-tile-preview-container[at-theme="metro"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="cobalt"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="cobalt"] .at-tile-preview {
    background-color: #324B6E;
}
.at-tile-preview-container[at-theme="cobalt"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="cobalt"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="cobalt"] .at-tile-preview[at-intent="accent"] * {
    color: #4f9aff;
}
.at-tile-preview-container[at-theme="cobalt"] .at-tile-preview[at-intent="warn"] * {
    color: #b37afe;
}
.at-tile-preview-container[at-theme="cobalt"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="cobalt-hv"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="cobalt-hv"] .at-tile-preview {
    background-color: #324B6E;
}
.at-tile-preview-container[at-theme="cobalt-hv"] .at-tile-preview[at-intent="accent"] {
    background-color: #4f9aff;
}
.at-tile-preview-container[at-theme="cobalt-hv"] .at-tile-preview[at-intent="warn"] {
    background-color: #b37afe;
}
.at-tile-preview-container[at-theme="cobalt-hv"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="cobalt-hv"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="cobalt-hv"] .at-tile-preview[at-intent="accent"] * {
    color: white;
}
.at-tile-preview-container[at-theme="cobalt-hv"] .at-tile-preview[at-intent="warn"] * {
    color: white;
}
.at-tile-preview-container[at-theme="cobalt-hv"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="garnet"] {
    background-color: lightGrey;
}
.at-tile-preview-container[at-theme="garnet"] .at-tile-preview {
    background-color: #fce4ec;
}
.at-tile-preview-container[at-theme="garnet"] .at-tile-preview[at-intent="info"] * {
    color: #e91e63;
}
.at-tile-preview-container[at-theme="garnet"] .at-tile-preview[at-intent="normal"] * {
    color: #e91e63;
}
.at-tile-preview-container[at-theme="garnet"] .at-tile-preview[at-intent="accent"] * {
    color: #e91e63;
}
.at-tile-preview-container[at-theme="garnet"] .at-tile-preview[at-intent="warn"] * {
    color: #e027dc;
}
.at-tile-preview-container[at-theme="garnet"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="garnet-hv"] {
    background-color: lightGrey;
}
.at-tile-preview-container[at-theme="garnet-hv"] .at-tile-preview {
    background-color: #fce4ec;
}
.at-tile-preview-container[at-theme="garnet-hv"] .at-tile-preview[at-intent="accent"] {
    background-color: #e91e63;
}
.at-tile-preview-container[at-theme="garnet-hv"] .at-tile-preview[at-intent="warn"] {
    background-color: #e027dc;
}
.at-tile-preview-container[at-theme="garnet-hv"] .at-tile-preview[at-intent="info"] * {
    color: #e91e63;
}
.at-tile-preview-container[at-theme="garnet-hv"] .at-tile-preview[at-intent="normal"] * {
    color: #e91e63;
}
.at-tile-preview-container[at-theme="garnet-hv"] .at-tile-preview[at-intent="accent"] * {
    color: #fce4ec;
}
.at-tile-preview-container[at-theme="garnet-hv"] .at-tile-preview[at-intent="warn"] * {
    color: #fce4ec;
}
.at-tile-preview-container[at-theme="garnet-hv"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="granite"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="granite"] .at-tile-preview {
    background-color: grey;
}
.at-tile-preview-container[at-theme="granite"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="granite"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="granite"] .at-tile-preview[at-intent="accent"] * {
    color: white;
}
.at-tile-preview-container[at-theme="granite"] .at-tile-preview[at-intent="warn"] * {
    color: #fdc502;
}
.at-tile-preview-container[at-theme="granite"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="granite-hv"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="granite-hv"] .at-tile-preview {
    background-color: grey;
}
.at-tile-preview-container[at-theme="granite-hv"] .at-tile-preview[at-intent="accent"] {
    background-color: #333;
}
.at-tile-preview-container[at-theme="granite-hv"] .at-tile-preview[at-intent="warn"] {
    background-color: #333;
}
.at-tile-preview-container[at-theme="granite-hv"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="granite-hv"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="granite-hv"] .at-tile-preview[at-intent="accent"] * {
    color: white;
}
.at-tile-preview-container[at-theme="granite-hv"] .at-tile-preview[at-intent="warn"] * {
    color: #fdc502;
}
.at-tile-preview-container[at-theme="granite-hv"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="jet"] {
    background-color: #123;
}
.at-tile-preview-container[at-theme="jet"] .at-tile-preview {
    background-color: black;
}
.at-tile-preview-container[at-theme="jet"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="jet"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="jet"] .at-tile-preview[at-intent="accent"] * {
    color: white;
}
.at-tile-preview-container[at-theme="jet"] .at-tile-preview[at-intent="warn"] * {
    color: #fd7902;
}
.at-tile-preview-container[at-theme="jet"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="jet-hv"] {
    background-color: #123;
}
.at-tile-preview-container[at-theme="jet-hv"] .at-tile-preview {
    background-color: black;
}
.at-tile-preview-container[at-theme="jet-hv"] .at-tile-preview[at-intent="accent"] {
    background-color: #220747;
}
.at-tile-preview-container[at-theme="jet-hv"] .at-tile-preview[at-intent="warn"] {
    background-color: #470739;
}
.at-tile-preview-container[at-theme="jet-hv"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="jet-hv"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="jet-hv"] .at-tile-preview[at-intent="accent"] * {
    color: white;
}
.at-tile-preview-container[at-theme="jet-hv"] .at-tile-preview[at-intent="warn"] * {
    color: white;
}
.at-tile-preview-container[at-theme="jet-hv"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="onyx"] {
    background-color: #444;
}
.at-tile-preview-container[at-theme="onyx"] .at-tile-preview {
    background-color: black;
}
.at-tile-preview-container[at-theme="onyx"] .at-tile-preview[at-intent="info"] * {
    color: wheat;
}
.at-tile-preview-container[at-theme="onyx"] .at-tile-preview[at-intent="normal"] * {
    color: wheat;
}
.at-tile-preview-container[at-theme="onyx"] .at-tile-preview[at-intent="accent"] * {
    color: firebrick;
}
.at-tile-preview-container[at-theme="onyx"] .at-tile-preview[at-intent="warn"] * {
    color: #fd7902;
}
.at-tile-preview-container[at-theme="onyx"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="onyx-hv"] {
    background-color: #444;
}
.at-tile-preview-container[at-theme="onyx-hv"] .at-tile-preview {
    background-color: black;
}
.at-tile-preview-container[at-theme="onyx-hv"] .at-tile-preview[at-intent="accent"] {
    background-color: #380b0b;
}
.at-tile-preview-container[at-theme="onyx-hv"] .at-tile-preview[at-intent="warn"] {
    background-color: #380b0b;
}
.at-tile-preview-container[at-theme="onyx-hv"] .at-tile-preview[at-intent="info"] * {
    color: wheat;
}
.at-tile-preview-container[at-theme="onyx-hv"] .at-tile-preview[at-intent="normal"] * {
    color: wheat;
}
.at-tile-preview-container[at-theme="onyx-hv"] .at-tile-preview[at-intent="accent"] * {
    color: firebrick;
}
.at-tile-preview-container[at-theme="onyx-hv"] .at-tile-preview[at-intent="warn"] * {
    color: #fd7902;
}
.at-tile-preview-container[at-theme="onyx-hv"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="quartz"] {
    background-color: lightGrey;
}
.at-tile-preview-container[at-theme="quartz"] .at-tile-preview {
    background-color: white;
}
.at-tile-preview-container[at-theme="quartz"] .at-tile-preview[at-intent="info"] * {
    color: #555;
}
.at-tile-preview-container[at-theme="quartz"] .at-tile-preview[at-intent="normal"] * {
    color: #555;
}
.at-tile-preview-container[at-theme="quartz"] .at-tile-preview[at-intent="accent"] * {
    color: orange;
}
.at-tile-preview-container[at-theme="quartz"] .at-tile-preview[at-intent="warn"] * {
    color: #ff6600;
}
.at-tile-preview-container[at-theme="quartz"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="quartz-hv"] {
    background-color: lightGrey;
}
.at-tile-preview-container[at-theme="quartz-hv"] .at-tile-preview {
    background-color: white;
}
.at-tile-preview-container[at-theme="quartz-hv"] .at-tile-preview[at-intent="accent"] {
    background-color: orange;
}
.at-tile-preview-container[at-theme="quartz-hv"] .at-tile-preview[at-intent="warn"] {
    background-color: #ff6600;
}
.at-tile-preview-container[at-theme="quartz-hv"] .at-tile-preview[at-intent="info"] * {
    color: #555;
}
.at-tile-preview-container[at-theme="quartz-hv"] .at-tile-preview[at-intent="normal"] * {
    color: #555;
}
.at-tile-preview-container[at-theme="quartz-hv"] .at-tile-preview[at-intent="accent"] * {
    color: #555;
}
.at-tile-preview-container[at-theme="quartz-hv"] .at-tile-preview[at-intent="warn"] * {
    color: #555;
}
.at-tile-preview-container[at-theme="quartz-hv"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="slate"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="slate"] .at-tile-preview {
    background-color: #333;
}
.at-tile-preview-container[at-theme="slate"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="slate"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="slate"] .at-tile-preview[at-intent="accent"] * {
    color: #2196f3;
}
.at-tile-preview-container[at-theme="slate"] .at-tile-preview[at-intent="warn"] * {
    color: #ef5825;
}
.at-tile-preview-container[at-theme="slate"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="slate-hv"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="slate-hv"] .at-tile-preview {
    background-color: #333;
}
.at-tile-preview-container[at-theme="slate-hv"] .at-tile-preview[at-intent="accent"] {
    background-color: #2196f3;
}
.at-tile-preview-container[at-theme="slate-hv"] .at-tile-preview[at-intent="warn"] {
    background-color: #ef5825;
}
.at-tile-preview-container[at-theme="slate-hv"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="slate-hv"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="slate-hv"] .at-tile-preview[at-intent="accent"] * {
    color: white;
}
.at-tile-preview-container[at-theme="slate-hv"] .at-tile-preview[at-intent="warn"] * {
    color: white;
}
.at-tile-preview-container[at-theme="slate-hv"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="sballoz-sv"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="sballoz-sv"] .at-tile-preview {
    background-color: #3b384a;
}
.at-tile-preview-container[at-theme="sballoz-sv"] .at-tile-preview[at-intent="accent"] {
    background-color: #3b384a;
}
.at-tile-preview-container[at-theme="sballoz-sv"] .at-tile-preview[at-intent="warn"] {
    background-color: #3b384a;
}
.at-tile-preview-container[at-theme="sballoz-sv"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="sballoz-sv"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="sballoz-sv"] .at-tile-preview[at-intent="accent"] * {
    color: #ffa500;
}
.at-tile-preview-container[at-theme="sballoz-sv"] .at-tile-preview[at-intent="warn"] * {
    color: #D50000;
}
.at-tile-preview-container[at-theme="sballoz-sv"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
/****************/
.at-tile-preview-container[at-theme="sballoz"] {
    background-color: black;
}
.at-tile-preview-container[at-theme="sballoz"] .at-tile-preview {
    background-color: #3b384a;
}
.at-tile-preview-container[at-theme="sballoz"] .at-tile-preview[at-intent="accent"] {
    background-color: #ffa500;
}
.at-tile-preview-container[at-theme="sballoz"] .at-tile-preview[at-intent="warn"] {
    background-color: #D50000;
}
.at-tile-preview-container[at-theme="sballoz"] .at-tile-preview[at-intent="info"] * {
    color: white;
}
.at-tile-preview-container[at-theme="sballoz"] .at-tile-preview[at-intent="normal"] * {
    color: white;
}
.at-tile-preview-container[at-theme="sballoz"] .at-tile-preview[at-intent="accent"] * {
    color: #3b384a;
}
.at-tile-preview-container[at-theme="sballoz"] .at-tile-preview[at-intent="warn"] * {
    color: white;
}
.at-tile-preview-container[at-theme="sballoz"] .at-tile-preview[at-intent="normal"] .at-content {
    opacity: 0.26;
}
Commenting disabled