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

7 years ago in Colors Icons Fonts Themes • updated by 7 years 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!
Vote
Replies 1
Oldest first
- Newest first
- Oldest first
Answered
7 years ago
Hi there!
I highly recommend getting a free "eyedropper color picker" utility:
For Windows I use http://instant-eyedropper.com;
or a Chrome Extension "Eyedropper": https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka
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;
}
- Is it?
- Inappropriate
- Spam
- Duplicate
|
Commenting disabled
Customer support service by UserEcho
Color code reference (HEX) for Built-in Themes?

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

Votes left: 10/10

Topic stats
