CODEWITHSUNDEEP
cssember.js
maje
maje

Reputation: 424

Choose between different style for an Ember.JS application

The issue I have is that I can't find a way to 'change' the css style within my application.

The thing that I want to access is for example: I have a red theme, but I want that the user can choose an other predefined theme, like a green, or a blue theme.
The idea is that I have different app.css, how can I change between one another, I can't find method to do so. Maybe I can do it in my environnement.js?
Any tips is apreciated.
tl;dr: How to set multiple css style in our Ember.JS app?

Upvotes: 2

Views: 271

Answers (1)

Damian Senn
Damian Senn

Reputation: 1165

You can achieve this by generating multiple stylesheets, see: https://ember-cli.com/asset-compilation#configuring-output-paths

I suggest using ember-cli-head to add a specific link element with the additional theme stylesheet. You could set the stylesheet in your head.hbs using the headData service.

Full Example:

ember-cli-build.js

var app = new EmberApp({
  outputPaths: {
    app: {
      css: {
        // app/styles/red.css
        'red': '/assets/themes/red.css'
      }
    }
  },
  // Exclude theme css files from fingerprinting,
  // otherwise your file is named `red-somehash.css`
  // which we don't (easily) know at runtime.
  fingerprint: {
    exclude: [ 'red.css' ]
  }
})

head.hbs

{{#if theme}}
  <link rel="stylesheet" href="/assets/{{theme}}.css">
{{/if}}

some-component.js (or Route or whatever)

export default Ember.Component.extend({
  headData: Ember.inject.service(),

  actions: {
    setTheme(themeName) {
      this.set('headData.theme')
    }
  }
})

Upvotes: 3

Related Questions