Menu icon Foundation
Best practices for theme picker

I'd like to give our users the option of a dark theme and a light theme. How is the best way to go about doing this? I'm using Grunt and Sass. I want to make sure I keep app.scss and _settings.scss in a way that allows for easy upgrading of Foundation. But, I'm new to Foundation (and Sass), and don't know how that process works. Two complete style sheets would work, but ideally I would keep only colors in separate files.

Thanks for any help on finding the best practice here.

<!-- This is what I would like to do -->
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/themes/dark.css"/>
<!-- Then JavaScript could change to css/themes/light.css -->         

F5themesswitcher

I'd like to give our users the option of a dark theme and a light theme. How is the best way to go about doing this? I'm using Grunt and Sass. I want to make sure I keep app.scss and _settings.scss in a way that allows for easy upgrading of Foundation. But, I'm new to Foundation (and Sass), and don't know how that process works. Two complete style sheets would work, but ideally I would keep only colors in separate files.

Thanks for any help on finding the best practice here.

<!-- This is what I would like to do -->
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/themes/dark.css"/>
<!-- Then JavaScript could change to css/themes/light.css -->         
Chris Peters about 5 years ago

The only way you could really fully separate specific color stuff would be to manually write your own CSS overrides. So I would bundle the entire kitchen sink for each theme.

You'll want to have an app-dark.css and app-light.css, each including modules that you need from the entire Foundation code base.

app-dark.scss:

//
// Settings
//

@import 'settings_dark';

//
// Dependencies
//

// ZURB Foundation components - uncomment each line as needed
@import
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
// ...or whatever you need to include...
  "foundation/components/visibility";

And app-light.scss:

//
// Settings
//

@import 'settings_light';

//
// Dependencies
//

// ZURB Foundation components - uncomment each line as needed
@import
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
// ...or whatever you need to include...
  "foundation/components/visibility";

Maybe another commenter will point out something that I've been missing all along, but upgrading Foundation and keeping _settings.scss intact is a manual effort. I usually grab the new _settings.scss and manually paste in my customizations from the old one, line by line. This usually only takes about 10 minutes.

FWIW, I usually group things together differently from the default setup that Foundation provides. I rename _settings.scss to _foundation_settings.scss and put my own settings for non-Foundation elements in _settings.scss. So perhaps you would end up with _foundation_settings_dark.scss and _foundation_settings_light.scss for each theme.

More info in my own style guide:
http://www.liveeditorcms.com/gc/playbook/sass-css-style-guide/

Chris Peters about 5 years ago

I suppose the part where you include the different Foundation modules could be refactored into its own partial too.

If you named it _foundation_modules.scss, each file could end up looking something like this:

@import
  'settings_dark',
  'foundation_modules';