Up until this point I had 2 coloring themes for each layout. The black theme represents white and gray text on blackish background. Important parts have more contrast and are brighter than less important parts. The white theme represents dark text on white and gray background. The more relevant a piece on the page is the brighter the background is. While working on this site, I noticed that it takes quite a while in order to create a new theme. Each color theme had one CSS file defining the color of each element used in every layout. This structure required relative much time in order to create a new theme or to modify an existing one. This is the case as a change of an element's color often required a change other parts of the site as well.

Instead of using one big custom CSS for each theme I decided to create one parameterized CSS file for all future coloring themes. Like the layouts and posts of this site the new CSS file uses the templating language liquid. The language is included into the static blog generator Jekyll which is used for this site. The parameters describe which color is used for every type of information based on the priority of that information.

For each theme the jeykll build --destination [...] --source [...] --config [...] command with different configurations is used. The following is an excerpt of the configuration which is used for the white theme at the time of this writing:

colors:
    priorities:
        content:
            background:
                p0: '#FFFFFF'#highlighted content
                p1: '#F6F6F6'#standard content
                p2: '#EDEDED'#
                p3: '#E4E4E4'#
                p4: '#DBDBDB'#
                p5: '#D2D2D2'#
                p6: '#C0C0C0'#very low priority
                p7: '#AEAEAE'#lowest priority
            foreground:
                p0: '#000000'
                p1: '#101010'
                p2: '#303030'
                p3: '#505050'
                p4: '#606060'
                p5: '#707070'
                p6: '#808080'
            paragraph:
                p0: ['#FFFFFF','#F9F9F9']
                p1: ['#FAFAFA','#F2F2F2']
            foreground_selected:
                p0: '#303030'
                p1: '#303030'
                p2: '#303030'
                p3: '#303030'
                p4: '#303030'
                p5: '#303030'
                p6: '#303030'
            background_selected:
                p0: '#FFFFFF'
                p1: '#FFFFFF'
                p2: '#FFFFFF'
                p3: '#FFFFFF'
                p4: '#FFFFFF'
                p5: '#FFFFFF'
                p6: '#FFFFFF'
            shadow:
                p0: 'rgba(0, 0, 0, 0.5)'
                p1: 'rgba(0, 0, 0, 0.25)'
                p2: 'rgba(0, 0, 0, 0.125)'
                p3: 'rgba(0, 0, 0, 0.06125)'
                p4: 'rgba(0, 0, 0, 0.0306125)'
        error:
            foreground:
                p0: '#000000'
                p1: '#FF0000'
            background:
                p0: '#FFFFFF'
                p1: '#F6F6F6'