Skip to content
A weather dashboard Gatsby theme, composed using MDX and Theme UI, powered by Dark Sky.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A weather dashboard Gatsby theme, composed using MDX and Theme UI, powered by Dark Sky.

gatsby-theme-weather screenshot


  • MDX composition with custom shortcodes
  • Theme UI-based theming
  • Geolocation-provided weather
  • Weather context state hook available for custom components - useWeather
  • Refresh interval for data fetching


To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    yarn add gatsby-theme-weather
  2. Add the theme to your gatsby-config.js:

    module.exports = {
      plugins: [
          resolve: 'gatsby-theme-weather',
          options: {
            apiKey: process.env.API_KEY,
  3. Install dotenv to keep your API key a secret

    yarn add -D dotenv
  4. Sign up for an API key with Dark Sky to successfully fetch weather data.

  5. Create and populate ENV file, .env.development

  6. Dynamically load ENV file based on NODE_ENV (*Note: this is automatically set to development by Gatsby in development mode*)

    // gatsby-config.js
    const d = require('dotenv')
    if (process.env.NODE_ENV !== 'PRODUCTION') {
        path: `.env.development`,
    module.exports = {
      plugins: [
          resolve: 'gatsby-theme-weather',
          options: {
            apiKey: process.env.API_KEY,
  7. Start your site

    gatsby develop


In the context of production deployments, ensure the API_KEY environment variable is appropriately set.


Each piece in this theme is customizable, however it is important to note the Skeleton will be our core data layer component and should not be shadowed without careful consideration. Please refer to the Theme UI container styles to modify styles of our other core components (Header, Footer, Main, Container, etc.).


This theme accepts a few options for functionality, as well as modifying the experience.

Option Value Type Default Value
apiKey String n/a
refreshInterval Integer 20

Note: refreshInterval is expressed in minutes


Below is a table of available components to shadow and use as shortcodes in MDX.

Filename Component Name Type Description
ColorSwatch.js ColorSwatch Card component Displays current color palette
CurrentWeather.js CurrentWeather Card component Displays current weather in a card
CurrentTime.js CurrentTime Time component Displays current time (12-hour, 2-digit minute format)
w-icon.js WIcon Icon component Used to retrieve appropriate icon based on props.icon
Card.js Card { StyledCard } Card component Base card and named StyledCard export for wrapping


This theme uses Theme UI for MDX. To customize the color palette, shadow the Theme UI configuration file.

// src/gatsby-plugin-theme-ui/index.js
export default {
  colors: {
    text: '#273242',
    background: '#FDF8F7',
    muted: '#A09D9E',
    secondary: '#EFBDB0',
    primary: '#c6797e',
    accent: '#E3F0E5',



You can’t perform that action at this time.