Support themes

[jbrodriguez]

I love this library, since this is a problem I'm having in my app, the MAGIC sizes :)

How would you approach having app-wide themes ?

I think it could be done by having the library return the Stylesheet.create(..), but currently it sets the styles property and this makes it behave like a singleton (as far as I can understand).

Any thoughts on this ?

[fab1an]

Glad it's of use :).

The library behaves like a singleton, yes. If I reuse styles I tend to factor them out into own react-components. Is that what you meant?

[jbrodriguez]

Thanks for the reply @fab1an !

Well, sort of.

What I was visualizing is having separate palettes (one for each theme), then 'somehow' use each style to display the ui.

[fab1an]

So you are talking about colors only?

[jbrodriguez]

Right.

With platform.select you can account for differences between android/ios.

Your library handles typographic/spacing scaling.

I currently have two stylesheets in my app, the user can select between them.

Each stylesheet has different palettes of colors, as well as ios/android specific code.

Just trying to figure out how to use this library in this context.

[fab1an]

I can imagine a couple of ways of approaching this:

• specify two palettes with prefixed names and switch between those in the components
• just specify your colors in a normal stylesheet and mix it with tachyons styling.

[jbrodriguez]

Right, that makes sense !

I'll play around with this a bit.

Thanks @fab1an !

[jbrodriguez]

@fab1an, I tried a couple of things.

For my use case, I had to change the library a bit, most notably because the singleton wasn't allowing me to have dynamic styling.

What I do in my components is

...
const { theme } = this.props.theme
<View style={theme.background}>
</View>

Somewhere else in the code, I make 'this.props.theme' point to another stylesheet when the user changes themes.

The changes I made were:

--    /* placeholder */
--    styles: Object.create(null),
++   /* placeholder */
++  //  styles: Object.create(null),

-- //        _.assign(NativeTachyons.styles, StyleSheet.create(styleSheet));
++         let styles = Object.create(null);
++         _.assign(styles, StyleSheet.create(styleSheet));
++         return styles;

-- export const styles = NativeTachyons.styles;
++ // export const styles = NativeTachyons.styles;

This is breaking api, so I didn't create a PR

I also make lighten/darken optional

--            /* light and dark alternatives */
--            result[`light-${key}`] = Color(val).lighten(options.colors.lighten).hexString();
--            result[`dark-${key}`] = Color(val).darken(options.colors.darken).hexString();
++            /* light and dark alternatives */
++            if (options.colors.lighten !== 0) {
++               result[`light-${key}`] = Color(val).lighten(options.colors.lighten).hexString();
++            }
++            if (options.colors.darken !== 0) {
++               result[`dark-${key}`] = Color(val).darken(options.colors.darken).hexString();
++            }

[fab1an]

If you want to you can also just modify the styles object returned by RNT.

Or you could specify colors like colorButton-theme1, colorButton-theme2 and use a construct like this:

render() {
    return (
         <View cls={`bg-colorButton-${themeName}`}>
         </View>
    )
}

Or assign it to the styles object:

const themes = {
    theme1: {
          backgroundColor: "ff66ff",
          …
    },
    theme2: {

    },
}

render() {
    return (
         <View styles={[s.flx_i, s.h2, themes[themeName]]}>
         </View>
    )
}

Or, in the last example just reference the default-styles again from your theme. The possibilities are endless ;)

[jbrodriguez]

Thanks ! I'll be testing your suggestions.

[jbrodriguez]

I gave it some thought and since I don't want to lose sync with your library, I'll implement something similar to your 2nd suggestion.

I'll have a theme object composed of NativeTachyons.styles + a dynamic color object, which is generated with the same logic you used for the palette (it generates the color, background and border syntax)

const theme = {
   styles: NativeTachyons.styles,
   colors: palette['colors1']
}

Then I can switch palettes whenever needed