Skip to content
Content Island logo Content Island logo Docs

Theming — 2. Content Island and Theming

00:00 / 00:00

Defining a Theme in Content Island

In this lesson, we will see how to go from a static CSS theme to a dynamic one that can be configured directly from Content Island 🏝️.

Exploring the Website

If we take a look at the blog example, we see that the main styles are based on a few key values (and most derivatives are calculated from them):

:root {
  /*theme variables*/
  --primary-color: #1d3353;
  --font-name-body: 'IBM Plex Sans';
  --font-name-title: 'IBM Plex Sans Condensed';

  /*font family*/
  --ff-title: var(--font-name-title), sans-serif;
  --ff-body: var(--font-name-body), sans-serif;

  /*color palette*/
  --pure-white: #fff;
  --grey-700: #333;
  --primary-light-color: hsl(from var(--primary-color) h calc(s + 20) calc(l + 10));

  /*text colors*/
  --text-color: var(--grey-700);
  --text-color-light: var(--pure-white);

  /*background colors*/
  --background-footer-color: var(--grey-700);

  /*hover colors*/
  --title-hover-color: hsl(from var(--primary-color) h calc(s + 20) calc(l + 10));
  --menu-hover-color: hsl(from var(--primary-color) h calc(s + 20) calc(l + 63));

  /*border colors*/
  --border-color: var(--grey-700);

Let’s focus on these three variables:

--primary-color: #1d3353;
--font-name-body: 'IBM Plex Sans';
--font-name-title: 'IBM Plex Sans Condensed';

By controlling the primary color and the fonts used for titles and body text, we can already modify much of the visual appearance of the site.

So, let’s model these values in our CMS.

Depending on the project, you might want to add other attributes like a secondary color, font sizes, spacing, etc. All of these can also be included as part of the theme model—it all depends on how your project is implemented.

Modeling in Content Island

In the current model of our blog project, there are already entities like About and Post, which represent the visible content of the site.

Now, we are going to create a new entity called Theme, which will be responsible for defining the visual identity.

  • Color → of type Color (already available in Content Island).

  • FontTitle → of type Font (we will define it now), for now we set it as text.

  • FontBody → also of type Font, although for now we set it as text.

Content Island includes a data type for color, and you can also use numeric types if you want to add more control (for example, sizes or spacing).

For fonts, in our case, we will define a type that includes the name and also the URL to the CDN where the font is hosted.

We create an entity called Font, with these fields:

  • Name → text type, name of the font.

  • Url → URL type, link to the font CDN.

We will add some example fonts; I got these from:

https://fonts.google.com/

For the example, I add two; the rest I’ll pause to avoid boring you:

Once this type is defined, we return to the Theme entity and add the two fields:

  • fontTitle → of type Font, for titles.
  • fontBody → of type Font, for body text.

Now we can create our first theme.

Let’s define:

  • Color: #205D0A
  • fontTitle: Orbitron
  • fontBody: Inter

In the next step, we will see how we can use this theme on our website.