Solarized for jQuery Mobile is a jQuery Mobile theme by Kim Slawson based on Ethan Schoonover's remarkable Solarized color palette. I made it because I thought jQuery Mobile's default swatches were a big garish. I must express thanks to the jQuery team for jQuery Mobile and ThemeRoller, and my undying gratitude to Ethan Schoonover for the Solarized colorscheme.
Solarized for jQuery Mobile comes in two variants, separated to save file size and bandwidth. solarized has only the light version of the colorscheme, whereas solarized-unified brings both the light and dark sides of the force together.
Both variants come in regular (.css) and minified (.min.css) versions. If bandwidth or file size is a primary concern, use the minified version. If readability is desired, use the regular version.
There are two ways to get this jQuery Mobile theme:
-
download the zipfile or tar.gz, or
-
check out the repository
git clone git://github.com/kimslawson/solarized-jquerymobile.git
- Get the theme via one of the methods above.
- If this is your first blush theming your jQuery Mobile installation, then copy the "css" directory along with its contents to the root level of your jQuery Mobile installation.
If you already have a "css" directory at the root level of your jQuery Mobile installion, then copy the desired theme variant(s) into your "css" directory.
Directions for including jQuery Mobile in your project are beyond the scope of this document. Detailed instructions can be found on the jQuery Mobile site. Please choose one of the following:
Add the following line BEFORE the other jQuery Mobile stylesheet links:
<link rel="stylesheet" href="/css/solarized.css" />
For access to both the light and dark side of the force, add the following line BEFORE the other jQuery Mobile stylesheet links:
<link rel="stylesheet" href="/css/solarized-unified.css" />
The following light swatches are available in the solarized variant. These display content/text in grey (#657b83) and accents in the colors listed below. The background color is #eee8d5 for headers and #fdf6e3 for content.
- A — Yellow (#b58900)
- B — Orange (#cb4b16)
- C — Red (#dc322f)
- D — Magenta (#d33682)
- E — Violet (#6c71c4)
- F — Blue (#268bd2)
- G — Cyan (#2aa198)
- H — Green (#859900)
- I — Grey (monochromatic: #657b83)
In addition to the swatches listed above, the solarized-unified variant includes these dark swatches. These show content/text in grey (#839496) and accents in the following colors. The background color is #073642 for headers and #002b36 for content.
- J — Yellow (#b58900)
- K — Orange (#cb4b16)
- L — Red (#dc322f)
- M — Magenta (#d33682)
- N — Violet (#6c71c4)
- O — Blue (#268bd2)
- P — Cyan (#2aa198)
- Q — Green (#859900)
- R — Grey (monochromatic: #839496)
If, after installation, you have issues with the theme, try the following:
- Make sure the files are in the places indicated above in "Installation". If they are not, you may not see any evidence of the theme, or you may not see any of the icons.
- Make sure you reference the theme's css file in the place indicated above in "Using the theme". Things will look odd if you link to the theme stylesheet after the jQuery Mobile stylesheets.
- As always, if you are still stumped, check Stack Overflow and Google :-)
Please report any issues you find on github. If you've added some improvements and you want them included, then please send me a patch or a GitHub pull request.
- Kim Slawson — personal site
- @OxC0FFEE —Twitter