Quick Start

Pre-Compiled CSS

Using the themes is as easy as downloading a CSS file and replacing the one that comes with Foundation.

There are 2 versions of each theme:

  • foundation.css The uncompressed variant - useful in debugging.
  • foundation.min.css The compressed variant - used for production websites.

NB: Please do not hotlink to the files on this site as it will slow yours. See CDN below.

Sass

Follow the instructions listed at get.foundation/sites/docs/sass.html

Then drop in the theme SASS files:

@import 'settings';             // *Foundswatch variant
@import '../scss/foundation';   // Zurb Foundation 6.6.3
@include foundation-everything;
@import 'foundswatch';          // *Foundswatch variant

CDN

You can also hotlink the themes via CDN with jsdelivr.com

You can access the theme CSS file from the GitHub release:

// load Foundswatch v0.1.4 Theme
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/{themename}/foundation.min.css

// use a version range instead of a specific version
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1/dist/{themename}/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0/dist/{themename}/foundation.min.css

// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch/dist/{themename}/foundation.min.css

// remove ".min" to get the uncompressed version
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch/dist/{themename}/foundation.css

// add / at the end to get a directory listing
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch/

Current release is v0.1.4 and contains:

https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/bootie/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/cerulean/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/cosmo/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/cyborg/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/dark/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/darkly/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/flatly/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/journal/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/litera/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/lumen/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/materia/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/sandstone/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/simplex/foundation.min.css
https://cdn.jsdelivr.net/gh/vinorodrigues/foundswatch@0.1.4/dist/united/foundation.min.css

Customisation

To modify a theme or create your own, follow the steps below in your terminal. You'll need to have Git, Node and Gulp installed.

  1. Download the repository: git clone https://github.com/vinorodrigues/foundswatch.git
  2. Install Node dependencies: npm install
  3. In the /themesrc folder, modify _settings.scss and _foundswatch.scss in one of the theme sub-folders, or duplicate a theme folder to create a new one.
  4. Run gulp sass:themes to build your themes.
  5. The compiled code will be in the /website/themes folder.

API

You can use the API to integrate the themes with your platform. Get:
https://foundswatch.com/api/0.json

This returns an object with a version and a themes array property:

{
	"version":"0.1.4",
	"themes":[ {
			"name":"{string}",
			"description":"{string}",
			"screenshot":"{url}",
			"preview":"{url}",
			"css":"{url}",
			"cssMin":"{url}",
			"scssSettings":"{url}",
			"scss":"{url}"
		}  // , { … more themes … }
	]
}

Here's a demo of the API in action on jsFiddle.

Dark Mode

Unfortunately, Foundation 6 is not designed to support “dark mode switching”, i.e. does not support the new “prefers-color-scheme” media query.

You can however load 2 separate instances of the Foundation CSS that are very similar, but with one light and the other dark. For example:

<!-- Inform the browser that this page supports both dark and light color schemes -->
<meta name="color-scheme" content="light dark">
<!-- Alternative color mode (loaded first) -->
<link id="css-dark" rel="stylesheet" href="dark/foundation.min.css" media="(prefers-color-scheme: dark)">
<!-- Default and/or 'no preference' color mode (loaded last) -->
<link id="css-light" rel="stylesheet" href="default/foundation.min.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">

The above 2-option code will not work with a narrow set of browsers that support the media CSS filter but do not support the prefers-color-scheme subset.
e.g. older iPads on iOS 12.4.

In these cases you will need to either add an un-filtered CSS file before the lines above, using the following JavaScript:

// If `prefers-color-scheme` is not supported, inject the light mode without filter.
if ( !window.matchMedia || (window.matchMedia("(prefers-color-scheme: dark)").media === "not all") )
	document.head.insertAdjacentHTML( "beforeend",
		"<link id=\"css\" rel=\"stylesheet\" href=\"default/foundation.min.css\">" );

, or add the following JavaScript to the bottom of your html to disable the filtered CSS.

$(document).ready(function() {
	// assumes jQuery running
	if ( !window.matchMedia || (window.matchMedia("(prefers-color-scheme: dark)").media === "not all") ) {
		// matchMedia function, or, prefers-color-scheme media query not supported
		$("#css-dark").remove();  // remove the dark mode CSS file link
		$("#css-light").attr( "media", "" );  // remove the media filter
		// $("#css-light").attr( "id", "css" );  // **optional** - rename the id
	}
}

Take a look at this jsFiddle for an example (with toggle button).

Alternatively, you could use server-side code to only generate the 2-option CSS code when the browser supports it. However, there is no server-side dark-mode support specification, and browsers will not send any requests identifying the color mode or even of its preference. One can however identify the browser version from the User-Agent request header, and then only generate the 2-option CSS code if the browser version is equal to or larger/later than the first support version of each browser. The following table is a guide:


Sourced from: developer.mozilla.org