Make sure to be confortable with the configuration systen before reading this.

Theming

Theming in Coffeekraken is a central part to help you decline your websites into themes like dark, light, and whatever you want.

Existing themes

Some theme(s) are available out of the box. These themes (parts) are useful to avoid starting from scratch but you can of course override everything you want during your development process.

• theme.config.ts: Main theme file where all the available themes are listed as well as which theme is active.
• themeBase.config.ts: Main configuration file that can be used as a base for your theme to avoid rewriting everything.
• themeDefault.config.ts: Define the default theme
• themeDefaultLight.config.ts: Extends the themeBase.config.ts configuration and define some settings fot the default light theme.
• themeDefaultDark.config.ts: Extends the themeBase.config.ts configuration and define some settings fot the default dark theme.

Here's the complete list of available theme configuration files:

• themeUi.config.ts
• theme.config.ts
• themeBase.config.ts
• themeBorder.config.ts
• themeClassmap.config.ts
• themeColor.config.ts
• themeColorSchemaDark.config.ts
• themeColorSchemaLight.config.ts
• themeDefault.config.ts
• themeDefaultDark.config.ts
• themeDefaultLight.config.ts
• themeDepth.config.ts
• themeEasing.config.ts
• themeFont.config.ts
• themeGradient.config.ts
• themeHeight.config.ts
• themeHelpers.config.ts
• themeLayout.config.ts
• themeLod.config.ts
• themeMargin.config.ts
• themeMedia.config.ts
• themeOffsize.config.ts
• themeOpacity.config.ts
• themePadding.config.ts
• themePartytown.config.ts
• themeRatio.config.ts
• themeScalable.config.ts
• themeScale.config.ts
• themeScroll.config.ts
• themeSize.config.ts
• themeSpace.config.ts
• themeTiming.config.ts
• themeTransition.config.ts
• themeTypo.config.ts
• themeWidth.config.ts
• themeWireframe.config.ts

Main entry point

Everything about theming starts with some configuration files.

The main one is the theme.config.ts file that looks something like this:

This configuration assume that the theme default exists and has a light variant defined.

Note that this default theme is the one used out of the box.

Make your own

The simpliest way to theme your app/website, etc, is to update the default-(light|dark) theme by overriding configurations like so:

Updating the colors

Create a file called .sugar/themeColor.config.ts and update the colors like so:

Updating the color schemas

Create a file called .sugar/themeColorSchema(Light|Dark).config.ts and update the schemas like so:

Defining a new theme

To define a new theme, simply create a new configuration file under .sugar/themeAwesome.config.ts with a content like so:

Note that the theming system is based on the @coffeekraken/s-sugar-config package used across the entire echosystem...