Custom UI Theming - Githubissues

In regards to how theming works per #2557, I’d imagine, the user is able to specify as much or as little as they want. We would of course have our default palette and type values, but the developer would be able to override those defaults if they so choose. This is as complex as they can go in config.yml if you want to override everything:

color: {
  palettes: {
    red: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX
    },
    orange: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX
    },
    yellow: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX
    },
    green: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX
    },
    turquoise: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX
    },
    blue: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX
    },
    purple: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX
    },
    pink: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX
    },
    neutral: {
      100: #XXXXXX,
      200: #XXXXXX,
      300: #XXXXXX,
      400: #XXXXXX,
      500: #XXXXXX,
      600: #XXXXXX,
      700: #XXXXXX,
      800: #XXXXXX,
      900: #XXXXXX,
      1000: #XXXXXX,
      1100: #XXXXXX,
      1200: #XXXXXX,
      1300: #XXXXXX,
      1400: #XXXXXX,
      1500: #XXXXXX,
      1600: #XXXXXX
    }
  }
  types: {
    danger: 'red',
    warning: 'yellow',
    success: 'green',
    info: 'blue'
  }
}

You can also do something like as simple as this if you wanted to adjust the default red for example...

color: {
  palettes: {
    red: '#XXXXXX'
  }
}

You’ll notice we are no longer passing in the object from 100-800. If it is a hex string, we will be inferring those values as if the hex provided was their 500 (primary) color for that palette.

I’d also imagine we’d have different neutral palettes. Currently our neutral palette is shifted towards the blue hue. We could provide palettes that shift towards various colors. Or we could add a neutralShift property that they can provide a hex value and strength.

For example, it can be as simple as this

neutralShift: 'blue'

Or as complex as this

neutralShift: {
  light: {
    hue: 'blue',
    strength: 0.1
  },
  dark: {
    hue: 'turquoise'
    strength: 0.5
  }
}

The colors would then go from light neutral shades only influenced by blue 10%, to dark neutral shades influenced by turquoise 50%. (Which is more or less how our theme is currently set up now just with hardcoded hex values). (edited)

I’d imagine the theme would work a lot like storybook handles theming.

Eventually I’d like to have some UI in settings that you could interact with to get the right look you are after. This would modify and push up your config.yml with the correct values. Maybe this UI handles the neutralShift functionality and we stick with hex values in our config.yml.

We could possibly provide preset themes (think Slack preset themes) in this UI that would either modify their config.yml to use those preset values, or just set a theme prop to their config.yml and remove custom theme colors.

Thoughts?

decaporg / decap-cms

Custom UI Theming #3559