Color themes

components.my-component\.js

import Component from '@ember/component';
import layout from '../templates/components/my-component';
import colorContract from '../mixins/color-contract';

export default Component.extend(colorContract, {
  layout,
  classNameBindings: ['mainContrastBackground'],
})

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

mixins.color-contract\.js

import Mixin from '@ember/object/mixin';
import { computed } from '@ember/object';

export default Mixin.create({
	colorTheme: '',
	utilPrefix: computed('colorTheme', function() {
		return this.colorTheme ? 'p' : 'd';
	}),
  /* MAIN */
  mainColor: computed('utilPrefix', function() {
		return `${this.utilPrefix}-main-color`;
	}),
	mainBackground: computed('utilPrefix', function() {
		return `${this.utilPrefix}-main-background`;
	}),
	mainFill: computed('utilPrefix', function() {
		return `${this.utilPrefix}-main-fill`;
	}),
  /* MAINCONTRAST */
	mainContrastColor: computed('utilPrefix', function() {
		return `${this.utilPrefix}-contrast-color`;
	}),
	mainContrastBackground: computed('utilPrefix', function() {
		return `${this.utilPrefix}-contrast-background`;
	}),
	mainContrastFill: computed('utilPrefix', function() {
		return `${this.utilPrefix}-contrast-fill`;
	}),
  /* ACTION */
	actionColor: computed('utilPrefix', function() {
		return `${this.utilPrefix}-action-color`;
	}),
	actionBackground: computed('utilPrefix', function() {
		return `${this.utilPrefix}-action-background`;
	}),
	actionFill: computed('utilPrefix', function() {
		return `${this.utilPrefix}-action-fill`;
	})
});

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

/* UTILITY CLASSES PREFIX APPROACH */
/* Default theme */
.d-main-color {
  color: red;
}
.d-main-background {
  background-color: red;
}
.d-contrast-color {
  color: lightgray;
}
.d-contrast-background {
  background-color: lightgray;
}

/* Primary theme */
.p-main-color {
  color: blue;
}
.p-main-background {
  background-color: blue;
}
.p-contrast-color {
  color: lightyellow;
}
.p-contrast-background {
  background-color: lightyellow;
}

/* CONTAINER APPROACH */
/* Default theme */
.defaultTheme .text-color {
  color: red;
}
.defaultTheme .bg-color {
  background-color: lightgray;
}

/* Primary theme */
.primaryTheme .text-color {
  color: blue;
}
.primaryTheme .bg-color {
  background-color: lightyellow;
}

/* Support */
.themeContainer {
  border: 2px solid black;
}

templates.application\.hbs

{{outlet}}

templates.components.my-component\.hbs

<p class={{mainColor}}>Text color class in template</p>
{{!-- Or helper (get-util "main" "background") --}}

<p>Background color class in JS</p>
{{!--
{{other-component
  colorTheme=colorTheme
}}
--}}

templates.index\.hbs

<h1>Color Theme Approaches</h1>


<h2>Components</h2>

<div class="themeContainer">
  <h3>Default Theme</h3>
  {{my-component
  }}
</div>

<div class="themeContainer">
  <h3>Primary Theme</h3>
  {{my-component
    colorTheme="primary"
  }}
</div>

<h2>Container Classes</h2>

<div class="themeContainer defaultTheme">
  <h3>Default Theme</h3>
    
  <div class="bg-color">
    <p class="text-color">Text color</p>
  </div>
</div>

<div class="themeContainer primaryTheme">
  <h3>Primary Theme</h3>
  
  <div class="bg-color">
    <p class="text-color">Text color</p>
  </div>
</div>

<h3>Nested containers</h3>
<div class="themeContainer defaultTheme">
  <h3>Default Theme</h3>
    
  <div class="bg-color">
    <p class="text-color">Text color</p>
  </div>

  <div class="themeContainer primaryTheme">
    <h3>Primary Theme</h3>
  
    <div class="bg-color">
      <p class="text-color">Text color</p>
    </div>
    
    <div class="themeContainer defaultTheme">
      <h3>Default Theme</h3>
    
      <div class="bg-color">
        <p class="text-color">Text color</p>
      </div>
    </div>
  </div>
</div>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.8.3",
    "ember-template-compiler": "3.8.3",
    "ember-testing": "3.8.3"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}