At the root of the source directory there is a configure.js file that you can tweak as you see fit.

11tyframe/source/configures.js

Prism

module.exports =
{
  AUTHOR_s:     'octoxalis',                       //: github name
  EMAIL_s:      'octoxalis@gmail.com',             //: github e-mail
  ID_s:         '11tyframe',                       //: github repository
  NAME_s:       '11ty Frame',                      //: site name
  URL_s:        `https://11tyframe.netlify.com/`,  //: CDN deployer
  LOCAL_s:      'http://127.0.0.1:5500/',          //: local address and port for development
  COLLECTION_s: 'post',                            //: Eleventy tag for posts collection
  LANGUAGE_s:   'en',                              //: Site language


  description_o:                                   //: descriptions for SEO
  {
    DESCRIPT_s: '11ty Frame blog',
    GLOBAL_s:   'Eleventy,static site generator',
  },


  HUE_P_n: 0,        //: theme primary color in range [0...359]
  HUE_L_n: 50,       //: theme link color offset from primary color
  HUE_S_n: -50,      //: theme secondary color offset from primary color
  HUE_I_n: 20,       //: theme important color offset from primary color
  HUE_D_n: -20,      //: theme decorative color offset from primary color


  LUM_MODE_n:     1,   //: luminosity mode: 1 (light) || -1 (dark)
  LUM_CONTRAST_n: 40,  //: luminosity contrast in range [30...49] (30 is less contrast than 49)
                       //: see https://www.w3.org/TR/WCAG20/ §1.4.1 compliance
}

The properties of this configuration file are self-documenting but some of them need a few explanations, notably those properties whose names begin by HUE and LUM.

All 11ty Frame colors are defined by CSS custom properties and the HUE properties define the variations of these colors:

• P stands for primary color;
• L links color;
• S secondary color;
• I important color something outstanding in your content
• D decorative color.

These properties values are numbers, positive and negative, specifying the variation around the primary color (HUE_P_n) value that you declare. For instance, if you set:

HUE_P_n: 153,
HUE_L_n: 50,

this declaration will yield a link color of 203 for anchors 153 + 50 = 203 . Similarly, the secondary color (HUE_S_n) will be 103 153 - 50 = 103 but you could have well define that property as:

HUE_S_n: -30,

to obtain 123 as secondary color hue 153 - 30 = 123 . Nothing requires you to have simetrical values for your color variations, you only have to experiment some combinations to get what you consider the optimal result.

All variations once defined, any visitor of your site will be able to change the base color hue with a single click over the page header, selecting one of the 360 different hues available in the HSL color system used by 11ty Frame. Nevertheless, if you want to prevent the possiblity to change this base color hue, you can do it by setting the HUE_SET_n to 0 in the configure.js file.