Skip to content
This repository has been archived by the owner on Dec 15, 2020. It is now read-only.


Folders and files

Last commit message
Last commit date

Latest commit


Repository files navigation


A weather dashboard Gatsby theme powered by

gatsby-theme-weather screenshot


  • Geolocation-provided weather
  • Weather context state hook available for custom components - useWeather
  • Refresh interval for data fetching
  • Custom Notification system
  • Carbon Design System Iconography


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',
  3. Start your site

    gatsby develop


Each piece of 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.


To customize the color theme, shadow gatsby-theme-weather/src/theme.js


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

Option Value Type Default Value
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