Theming basics

[mercmobily]

In PSK2 there is no sot for the usual theming options.
At the moment I am putting here in the psk-app.html, within :host, the usual:

     /*
     * Primary and accent colors for TEXT. Also see paper-styles/color.html for more colors.
     */
    --primary-text-color: var(--paper-grey-900);
    --primary-background-color: #ffffff;
    --secondary-text-color: #737373;
    --disabled-text-color: #9b9b9b;
    --divider-color: #dbdbdb;;
    --error-color: var(--paper-deep-orange-a700);

    /*
     * Primary and accent colors. Also see paper-styles/color.html for more colors.
     */
    --primary-color: var(--paper-indigo-500);
    --light-primary-color: var(--paper-indigo-100);
    --dark-primary-color: var(--paper-indigo-700);

    --accent-color: var(--paper-pink-a200);
    --light-accent-color: var(--paper-pink-a100);
    --dark-accent-color: var(--paper-pink-a400);

    /*
     * Deprecated values because of their confusing names.
     */
    --text-primary-color: var(--dark-theme-text-color);
    --default-primary-color: var(--primary-color);

Is this a good spot? (it kind of makes sense). Questions:

1. Would it be better to make an external "theme" file and include within psk-app.html?

2. If so, would you like me to make up a PR with it?

3. If you DO want me to make a PR, shall I make it following the same format as default-theme.html in paper-styles? (with the -light and -dark themes)

[robdodson]

Good question. @justinfagnani @frankiefu @notwaldorf do you all have a preference on how apps should be themed? In PSK 1 we had a separate default-theme.html that would let folks turn a few dials without having to go too deep into the rest of the CSS. We could do this same approach for PSK2 unless it's confusing for folks

[abdonrd]

Right now, for theming we only have --app-primary-color in src/psk-app/psk-app.html#L44

[justinfagnani]

No really strong opinion myself. On one hand, I might keep it simple and put the theme in app.html. On the other having it be an import means it's really easy to switch, in case you wanted to provide more than one theme to show off.

Incidentally, the themes could easily be part of a library... have you thought about splitting PSK into to a reusable library that's imported by PSK-based apps? That is, part is cloned to be customized, and part is imported.

[mercmobily]

I created a pull request that solves this in the most consistent possible way (in my own humble opinion!)

#823

[mercmobily]

Unrelated, @robdodson you are turning into my best friend. I spent all day yesterday on your polycasts, and will do so again today and tomorrow... funny how videos create a sense of close familiarity! Nice work, I couldn't have submitted 3 PRs today without watching them (I am especially thick)

[gertcuykens]

I would like them to be smack in the middle of the index page, because all basic style settings are there too

<meta name="theme-color" content="#fafafa">

<style>
  body {
    margin: 0;
  }
</style>

<link rel="import" href="/src/psk-app/psk-theme.html">

https://github.com/PolymerElements/polymer-starter-kit/blob/psk2/index.html#L18-L29

Does style settings are the most global basic color theme settings of the entire infrastructure, not just the psk app. Think of it this way, if every browser would support css variables you would hard code them in the first paint style tag anyway. None of the elements should have a import theme.html, not even psk-app, only index.html

[robdodson]

One of the goals of PSK2 was to make something extremely simple for folks to play around with Polymer. It's a good bare bones starting point, but we don't want it to grow in complexity because then it makes it difficult for new users to play around.

I'm going to close this issue because I don't think this is something PSK2 should be opinionated on. Instead I think folks should start to look at things like https://github.com/StartPolymer/progressive-web-app-template which attempt to be more of production-ready app template

[nicholaswmin]

@robdodson then how do we migrate from PSK1? I've got a 50+ elements app that all depend on --primary-color

[robdodson]

@nicholaswmin you can use the same approach as PSK1 in PSK2 if you like

[nicholaswmin]

@robdodson I think the underlying theme overrides are a bit different in PSK2

Previously, setting --primary-color themed everything. Now setting --app-primary-color doesn't seem to override it.

Unless I'm missing something.