✨ Add multiple colour schemes

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Multiple colour schemes
 - Icons for Foursquare and Pinterest
 
 ### Fixed

README.md

@@ -13,6 +13,7 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io
 
 - Built with Tailwind CSS JIT for minified stylesheets without any excess code
 - Fully responsive layout
+- Multiple colour schemes (or fully customise your own)
 - Dark mode (auto-switching based upon browser)
 - Highly customisable configuration
 - Multiple homepage layouts
@@ -114,58 +115,7 @@ links = [
 
 ## Advanced customisation
 
-There are a couple of ways you can make style changes to Congo.
+Refer to the [theme documentation](https://jpanther.github.io/congo/docs/advanced-customisation/) for details on customising Congo, including rebuilding the theme from scratch.
-
-If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles.
-
-Alternatively, if you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
-
-> **Note:** Building the theme manually is intended for advanced users.
-
-Change into the `themes/congo/` folder and install the project dependencies.
-
-```bash
-npm install
-```
-
-Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`.
-
-To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
-
-For example, to change to a green colour scheme, you could apply these changes:
-
-```js
-  // themes/congo/tailwind.config.js
-
-  theme: {
-    colors: {
-      transparent: "transparent",
-      white: colors.white,
-      gray: colors.gray,
-      primary: colors.lime,
-      secondary: colors.teal,
-    },
-    ...
-  }
-```
-
-For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
-
-After editing the configuration, you need to rebuild the theme's stylesheets.
-
-```bash
-npm run build
-```
-
-This will automatically output a minified CSS file to `/themes/congo/static/css/main.css`.
-
-To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode.
-
-```bash
-npm run dev
-```
-
-Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Remember to perform a full build before publishing your website.
 
 ---
 

assets/css/main.css

@@ -46,7 +46,7 @@ body button {
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {
-  @apply text-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 dark:text-gray-200;
+  @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
 }
 /* Other */
 .chroma .x {
@@ -73,13 +73,13 @@ body button {
 }
 /* LineNumbersTable */
 .chroma .lnt {
-  @apply text-gray-600 dark:text-gray-300;
+  @apply text-neutral-600 dark:text-neutral-300;
   margin-right: 0.4em;
   padding: 0 0.4em 0 0.4em;
 }
 /* LineNumbers */
 .chroma .ln {
-  @apply text-gray-600 dark:text-gray-300;
+  @apply text-neutral-600 dark:text-neutral-300;
   margin-right: 0.4em;
   padding: 0 0.4em 0 0.4em;
 }
@@ -300,31 +300,31 @@ body button {
 }
 /* Comment */
 .chroma .c {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentHashbang */
 .chroma .ch {
-  @apply italic font-semibold text-gray-400 dark:text-gray-500;
+  @apply italic font-semibold text-neutral-400 dark:text-neutral-500;
 }
 /* CommentMultiline */
 .chroma .cm {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentSingle */
 .chroma .c1 {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentSpecial */
 .chroma .cs {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentPreproc */
 .chroma .cp {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentPreprocFile */
 .chroma .cpf {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* Generic */
 .chroma .g {
@@ -341,7 +341,7 @@ body button {
 }
 /* GenericHeading */
 .chroma .gh {
-  @apply font-semibold text-gray-500;
+  @apply font-semibold text-neutral-500;
 }
 /* GenericInserted */
 .chroma .gi {
@@ -361,11 +361,11 @@ body button {
 }
 /* GenericSubheading */
 .chroma .gu {
-  @apply text-gray-500;
+  @apply text-neutral-500;
 }
 /* GenericTraceback */
 .chroma .gt {
-  @apply text-gray-500;
+  @apply text-neutral-500;
 }
 /* GenericUnderline */
 .chroma .gl {

assets/css/schemes/avocado.css

@@ -0,0 +1,37 @@
+/* Avocado scheme */
+:root {
+  --color-neutral: #fff;
+  /* Warm Gray */
+  --color-neutral-50: #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+  /* Lime */
+  --color-primary-50: #f7fee7;
+  --color-primary-100: #ecfccb;
+  --color-primary-200: #d9f99d;
+  --color-primary-300: #bef264;
+  --color-primary-400: #a3e635;
+  --color-primary-500: #84cc16;
+  --color-primary-600: #65a30d;
+  --color-primary-700: #4d7c0f;
+  --color-primary-800: #3f6212;
+  --color-primary-900: #365314;
+  /* Emerald */
+  --color-secondary-50: #ecfdf5;
+  --color-secondary-100: #d1fae5;
+  --color-secondary-200: #a7f3d0;
+  --color-secondary-300: #6ee7b7;
+  --color-secondary-400: #34d399;
+  --color-secondary-500: #10b981;
+  --color-secondary-600: #059669;
+  --color-secondary-700: #047857;
+  --color-secondary-800: #065f46;
+  --color-secondary-900: #064e3b;
+}

assets/css/schemes/congo.css

@@ -0,0 +1,37 @@
+/* Congo scheme */
+:root {
+  --color-neutral: #fff;
+  /* Gray */
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f5;
+  --color-neutral-200: #e4e4e7;
+  --color-neutral-300: #d4d4d8;
+  --color-neutral-400: #a1a1aa;
+  --color-neutral-500: #71717a;
+  --color-neutral-600: #52525b;
+  --color-neutral-700: #3f3f46;
+  --color-neutral-800: #27272a;
+  --color-neutral-900: #18181b;
+  /* Violet */
+  --color-primary-50: #f5f3ff;
+  --color-primary-100: #ede9fe;
+  --color-primary-200: #ddd6fe;
+  --color-primary-300: #c4b5fd;
+  --color-primary-400: #a78bfa;
+  --color-primary-500: #8b5cf6;
+  --color-primary-600: #7c3aed;
+  --color-primary-700: #6d28d9;
+  --color-primary-800: #5b21b6;
+  --color-primary-900: #4c1d95;
+  /* Fuchsia */
+  --color-secondary-50: #fdf4ff;
+  --color-secondary-100: #fae8ff;
+  --color-secondary-200: #f5d0fe;
+  --color-secondary-300: #f0abfc;
+  --color-secondary-400: #e879f9;
+  --color-secondary-500: #d946ef;
+  --color-secondary-600: #c026d3;
+  --color-secondary-700: #a21caf;
+  --color-secondary-800: #86198f;
+  --color-secondary-900: #701a75;
+}

assets/css/schemes/fire.css

@@ -0,0 +1,37 @@
+/* Fire scheme */
+:root {
+  --color-neutral: #fff;
+  /* Warm Gray */
+  --color-neutral-50: #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+  /* Orange */
+  --color-primary-50: #fff7ed;
+  --color-primary-100: #ffedd5;
+  --color-primary-200: #fed7aa;
+  --color-primary-300: #fdba74;
+  --color-primary-400: #fb923c;
+  --color-primary-500: #f97316;
+  --color-primary-600: #ea580c;
+  --color-primary-700: #c2410c;
+  --color-primary-800: #9a3412;
+  --color-primary-900: #7c2d12;
+  /* Rose */
+  --color-secondary-50: #fff1f2;
+  --color-secondary-100: #ffe4e6;
+  --color-secondary-200: #fecdd3;
+  --color-secondary-300: #fda4af;
+  --color-secondary-400: #fb7185;
+  --color-secondary-500: #f43f5e;
+  --color-secondary-600: #e11d48;
+  --color-secondary-700: #be123c;
+  --color-secondary-800: #9f1239;
+  --color-secondary-900: #881337;
+}

assets/css/schemes/ocean.css

@@ -0,0 +1,37 @@
+/* Ocean scheme */
+:root {
+  --color-neutral: #fff;
+  /* Cool Gray */
+  --color-neutral-50: #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+  /* Blue */
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  /* Cyan */
+  --color-secondary-50: #ecfeff;
+  --color-secondary-100: #cffafe;
+  --color-secondary-200: #a5f3fc;
+  --color-secondary-300: #67e8f9;
+  --color-secondary-400: #22d3ee;
+  --color-secondary-500: #06b6d4;
+  --color-secondary-600: #0891b2;
+  --color-secondary-700: #0e7490;
+  --color-secondary-800: #155e75;
+  --color-secondary-900: #164e63;
+}

config/_default/params.toml

@@ -5,6 +5,7 @@
 # Refer to the theme docs for more details about each of these parameters.
 # https://jpanther.github.io/congo/docs/configuration/#theme-parameters
 
+colorScheme = "congo"
 # description = "My awesome website"
 # mainSections = ["section1", "section2"]
 

exampleSite/content/_index.md

@@ -11,10 +11,10 @@ A simple, lightweight theme for Hugo built with Tailwind CSS.
   <span class="flex items-center pr-3 text-primary-400">
     {{< icon "exclamation-triangle" >}}
   </span>
-  <span class="flex items-center justify-between flex-grow dark:text-gray-300">
+  <span class="flex items-center justify-between flex-grow dark:text-neutral-300">
-    <span class="prose dark:text-white">This is a demo of the <code id="layout">page</code> layout.</span>
+    <span class="prose dark:text-neutral">This is a demo of the <code id="layout">page</code> layout.</span>
     <button
-      class="px-4 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+      class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
       onclick="switchLayout()"
     >
       Switch layout &orarr;

exampleSite/content/docs/advanced-customisation.md

@@ -9,11 +9,27 @@ showDate: false
 showAuthor: false
 ---
 
-There are a couple of ways you can make style changes to Congo.
+There are a few ways you can make style changes to Congo.
 
-If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles.
+## Colour schemes
 
-Alternatively, if you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
+Congo ships with a few colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter to one of the default configurations. Valid options are `congo` (the default), `avocado`, `fire` and `ocean`.
+
+In addition to the default scheme, you can also create your own and restyle the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
+
+Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
+
+Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
+
+## Overriding the stylesheet
+
+Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to overrid the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `static/css/` folder.
+
+The `custom.css` file will be loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
+
+## Building from source
+
+If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
 
 {{< alert >}}
 **Note:** Building the theme manually is intended for advanced users.
@@ -27,24 +43,7 @@ npm install
 
 Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`.
 
-To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
+To allow for easy theme colour changes, Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
-
-For example, to change to a green colour scheme, you could apply these changes:
-
-```js
-  // themes/congo/tailwind.config.js
-
-  theme: {
-    colors: {
-      transparent: "transparent",
-      white: colors.white,
-      gray: colors.gray,
-      primary: colors.lime,
-      secondary: colors.teal,
-    },
-    ...
-  }
-```
 
 For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
 

exampleSite/content/docs/configuration.md

@@ -32,9 +32,9 @@ Note that the variable names provided in this table use dot notation to simplify
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
-|`theme`|string|`"congo"`|This must be set to `"congo"` for the theme to function.|
+|`theme`|string|`"congo"`|When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `"congo"` for the theme to function.|
 |`baseURL`|string|_Not set_|The URL to the root of the website.|
-|`languageCode`|string|`"en"`|The language of the website for site metadata purposes. It can be a top-level language (ie. `"en"`) or a sub-variant (ie. `"en-AU"`)."|
+|`languageCode`|string|`en`|The language of the website for site metadata purposes. It can be a top-level language (ie. `"en"`) or a sub-variant (ie. `en-AU`)."|
 |`defaultContentLanguage`|string|`"en"`|This value determines the language of theme components."|
 |`title`|string|`"Congo"`|The title of the website. This will be displayed in the site header and footer.|
 |`copyright`|string|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site `title`.
@@ -56,6 +56,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
+|`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean` and `fire`.|
 |`description`|string|_Not set_|The description of the website for metadata purposes.|
 |`mainSections`|array of strings|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
 |`homepage.layout`|string|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout](/docs/homepage-layout/) section for more details.|

exampleSite/content/samples/emoji-support.md

@@ -20,28 +20,4 @@ The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference
 
 ---
 
-**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.
-
-{{< highlight html >}}
-.emoji {
-font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-}
-{{< /highlight >}}
-
-{{< css.inline >}}
-
-<style>
-.emojify {
-	font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-	font-size: 2rem;
-	vertical-align: middle;
-}
-@media screen and (max-width:650px) {
-  .nowrap {
-    display: block;
-    margin: 25px 0;
-  }
-}
-</style>
-
-{{< /css.inline >}}

layouts/404.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
   <h1 class="mb-3 text-4xl font-extrabold">{{ i18n "error.404_title" | emojify }}</h1>
-  <p class="mt-8 mb-12 text-gray-400 dark:text-gray-500">{{ i18n "error.404_error" | emojify }}</p>
+  <p class="mt-8 mb-12 text-neutral-400 dark:text-neutral-500">
+    {{ i18n "error.404_error" | emojify }}
+  </p>
   <div class="prose dark:prose-light">
     <p>{{ i18n "error.404_description" | emojify }}</p>
   </div>

layouts/_default/baseof.html

@@ -2,7 +2,7 @@
 <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
   {{- partial "head.html" . -}}
   <body
-    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-white text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white max-w-7xl"
+    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
   >
     {{- partial "header.html" . -}}
     <main class="flex-grow">{{- block "main" . }}{{- end }}</main>

layouts/_default/list.html

@@ -4,8 +4,8 @@
     <section>
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
         {{ if $.Site.Params.list.groupByYear }}
-          <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>
+          <h2 class="mt-12 text-2xl font-bold first:mt-8 text-neutral-800">{{ .Key }}</h2>
-          <hr class="border-gray-400 border-dotted w-36" />
+          <hr class="border-dotted border-neutral-400 w-36" />
         {{ end }}
         {{ range .Pages }}
           {{ partial "article-link.html" . }}

layouts/_default/single.html

@@ -4,8 +4,10 @@
       {{ if .Site.Params.article.showBreadcrumbs | default false }}
         {{ partial "breadcrumbs.html" . }}
       {{ end }}
-      <h1 class="mt-0 text-4xl font-extrabold">{{ .Title | emojify }}</h1>
+      <h1 class="mt-0 text-4xl font-extrabold text-neutral-800 dark:text-neutral">
-      <div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
+        {{ .Title | emojify }}
+      </h1>
+      <div class="mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500">
         {{ partial "article-meta.html" . }}
         {{ if and .Draft .Site.Params.article.showDraftLabel }}
           <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>

layouts/_default/taxonomy.html

@@ -10,7 +10,7 @@
             >{{ .Page.Title }}</a
           >
           {{ if $.Site.Params.taxonomy.showTermCount | default true }}
-            <span class="text-base text-gray-400">
+            <span class="text-base text-neutral-400">
               <span class="px-1 text-primary-500">&middot;</span>
               {{ .Count }}
             </span>

layouts/_default/term.html

@@ -3,7 +3,7 @@
   <section>
     {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
       <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>
-      <hr class="border-gray-400 border-dotted w-36" />
+      <hr class="border-dotted border-neutral-400 w-36" />
       {{ range .Pages }}
         {{ partial "article-link.html" . }}
       {{ end }}

layouts/partials/article-link.html

@@ -1,7 +1,11 @@
 <article>
   <h3 class="mt-6 text-xl font-semibold">
     {{ if isset .Params "externalUrl" }}
-      <a class="hover:underline" href="{{ .Params.externalUrl }}" target="_blank" rel="external"
+      <a
+        class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
+        href="{{ .Params.externalUrl }}"
+        target="_blank"
+        rel="external"
         >{{ .Title }}</a
       >
       <span
@@ -12,7 +16,7 @@
       >
     {{ else }}
       <a
-        class="hover:underline hover:underline-primary-500 hover:underline-offset-small"
+        class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
         href="{{ .Permalink }}"
         >{{ .Title }}</a
       >
@@ -24,7 +28,7 @@
       {{ partial "extend-article-link.html" . }}
     {{ end }}
   </h3>
-  <div class="text-sm text-gray-400 dark:text-gray-500">
+  <div class="text-sm text-neutral-400 dark:text-neutral-500">
     {{ partial "article-meta.html" . }}
   </div>
 </article>

layouts/partials/article-pagination.html

@@ -1,7 +1,7 @@
 {{ if .Params.showPagination | default (.Site.Params.article.showPagination | default true) }}
   {{ if or .NextInSection .PrevInSection }}
     <div class="pt-8 article-pagination">
-      <hr class="border-gray-300 border-dotted dark:border-gray-600" />
+      <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
       <div class="flex justify-between pt-3">
         <span>
           {{ if .NextInSection }}
@@ -11,7 +11,7 @@
                 <span class="article-pagination-title">{{ .NextInSection.Title }}</span>
                 {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
                   <time
-                    class="-mt-1 text-xs text-gray-400 dark:text-gray-500"
+                    class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500"
                     datetime="{{ .Date }}"
                   >
                     {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
@@ -28,7 +28,7 @@
                 <span class="article-pagination-title">{{ .PrevInSection.Title }}</span>
                 {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
                   <time
-                    class="-mt-1 text-xs text-gray-400 dark:text-gray-500"
+                    class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500"
                     datetime="{{ .Date }}"
                   >
                     {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}

layouts/partials/author-links.html

@@ -1,5 +1,5 @@
 {{ with .Site.Author.links }}
-  <div class="flex flex-wrap text-gray-400 dark:text-gray-500">
+  <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
     {{ range $links := . }}
       {{ range $name, $url := $links }}
         <a

layouts/partials/author.html

@@ -5,10 +5,10 @@
     {{ end }}
     <div>
       {{ with .Site.Author.name }}
-        <div class="text-[0.6rem] leading-3 text-gray-400 dark:text-gray-500 uppercase">
+        <div class="text-[0.6rem] leading-3 text-neutral-400 dark:text-neutral-500 uppercase">
           {{ i18n "author.byline_title" | emojify }}
         </div>
-        <div class="font-semibold leading-6 text-gray-800 dark:text-gray-300">
+        <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
           {{ . }}
         </div>
       {{ end }}

layouts/partials/breadcrumbs.html

@@ -1,4 +1,4 @@
-<ol class="text-sm text-gray-400 dark:text-gray-500">
+<ol class="text-sm text-neutral-400 dark:text-neutral-500">
   {{ template "crumb" (dict "p1" . "p2" .) }}
 </ol>
 {{ define "crumb" }}
@@ -9,7 +9,7 @@
   {{ end }}
   <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
     <a
-      class="hover:underline hover:underline-gray-300 dark:underline-gray-600"
+      class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600"
       href="{{ .p1.Permalink }}"
       >{{ .p1.Title }}</a
     ><span class="px-1 text-primary-500">/</span>

layouts/partials/footer.html

@@ -1,6 +1,6 @@
 <footer class="py-10 text-sm">
   {{/* Copyright */}}
-  <p class="text-gray-400 dark:text-gray-500">
+  <p class="text-neutral-400 dark:text-neutral-500">
     {{- with .Site.Copyright }}
       {{ . | emojify | markdownify }}
     {{- else }}
@@ -11,7 +11,7 @@
   </p>
   {{/* Theme attribution */}}
   {{ if .Site.Params.attribution | default true }}
-    <p class="text-xs text-gray-300 dark:text-gray-600">
+    <p class="text-xs text-neutral-300 dark:text-neutral-600">
       {{ i18n "footer.powered_by" }}
       <a
         class="hover:underline hover:underline-primary-300 hover:text-primary-400"

layouts/partials/head.html

@@ -27,6 +27,12 @@
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
   {{/* Styles */}}
+  {{ $cssScheme := resources.Get (printf "css/schemes/%s.css" (.Site.Params.colorScheme | default "congo")) }}
+  {{ if not $cssScheme }}
+    {{ $cssScheme = resources.Get "css/schemes/congo.css" }}
+  {{ end }}
+  {{ $stylesheet := $cssScheme | resources.Minify }}
+  <link type="text/css" rel="stylesheet" href="{{ $stylesheet.Permalink }}" />
   <link type="text/css" rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
   {{ if (fileExists "static/css/custom.css") -}}
     <link type="text/css" rel="stylesheet" href="{{ "css/custom.css" | absURL }}" />

layouts/partials/header.html

@@ -1,4 +1,4 @@
-<header class="flex justify-between py-6 font-semibold sm:py-10">
+<header class="flex justify-between py-6 font-semibold sm:py-10 text-neutral-800 dark:text-neutral">
   <div>
     <a
       class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"

layouts/partials/pagination.html

@@ -5,7 +5,7 @@
       <li>
         <a
           href="{{ $paginator.Prev.URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded"
           rel="prev"
         >
           &larr;
@@ -16,8 +16,8 @@
       <li>
         <a
           href="{{ .URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded {{ if eq . $paginator }}
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded {{ if eq . $paginator }}
-            bg-primary-200 dark:bg-primary-400 dark:text-gray-800
+            bg-primary-200 dark:bg-primary-400 dark:text-neutral-800
           {{ end }}"
         >
           {{ .PageNumber }}
@@ -28,7 +28,7 @@
       <li>
         <a
           href="{{ $paginator.Next.URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded"
           rel="next"
         >
           &rarr;

layouts/partials/section-header.html

@@ -3,7 +3,7 @@
     {{ partial "breadcrumbs.html" . }}
   {{ end }}
   <section class="prose dark:prose-light">
-    <h1 class="mb-3 text-4xl font-extrabold">{{ .Title }}</h1>
+    <h1 class="mb-3 text-4xl font-extrabold text-neutral-800">{{ .Title }}</h1>
     <section>{{ .Content }}</section>
   </section>
 </header>

layouts/partials/sharing-links.html

@@ -4,7 +4,7 @@
     {{ range . }}
       {{ with index $links . }}
         <a
-          class="bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-primary-400 dark:hover:text-gray-800 m-1 hover:bg-primary-500 hover:text-white rounded min-w-[2.4rem] inline-block text-center p-1"
+          class="bg-neutral-300 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800 m-1 hover:bg-primary-500 hover:text-neutral rounded min-w-[2.4rem] inline-block text-center p-1"
           href="{{ printf .url $.Permalink $.Title }}"
           title="{{ i18n .title }}"
           >{{ partial "icon.html" .icon }}</a

layouts/shortcodes/alert.html

@@ -2,7 +2,7 @@
   <span class="pr-3 text-primary-400">
     {{ partial "icon.html" "exclamation-triangle" }}
   </span>
-  <span class="no-prose dark:text-gray-300">
+  <span class="no-prose dark:text-neutral-300">
     {{- .Inner | markdownify -}}
   </span>
 </div>

layouts/shortcodes/button.html

@@ -1,5 +1,5 @@
 <a
-  class="px-4 py-2 !text-white !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+  class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
   {{ with .Get "href" }}href="{{ . }}"{{ end }}
   {{ with .Get "target" }}target="{{ . }}"{{ end }}
   role="button"

tailwind.config.js

@@ -14,10 +14,43 @@ module.exports = {
   theme: {
     colors: {
       transparent: "transparent",
-      white: colors.white,
+      neutral: {
-      gray: colors.gray,
+        DEFAULT: "var(--color-neutral)",
-      primary: colors.violet,
+        50: "var(--color-neutral-50)",
-      secondary: colors.fuchsia,
+        100: "var(--color-neutral-100)",
+        200: "var(--color-neutral-200)",
+        300: "var(--color-neutral-300)",
+        400: "var(--color-neutral-400)",
+        500: "var(--color-neutral-500)",
+        600: "var(--color-neutral-600)",
+        700: "var(--color-neutral-700)",
+        800: "var(--color-neutral-800)",
+        900: "var(--color-neutral-900)",
+      },
+      primary: {
+        50: "var(--color-primary-50)",
+        100: "var(--color-primary-100)",
+        200: "var(--color-primary-200)",
+        300: "var(--color-primary-300)",
+        400: "var(--color-primary-400)",
+        500: "var(--color-primary-500)",
+        600: "var(--color-primary-600)",
+        700: "var(--color-primary-700)",
+        800: "var(--color-primary-800)",
+        900: "var(--color-primary-900)",
+      },
+      secondary: {
+        50: "var(--color-secondary-50)",
+        100: "var(--color-secondary-100)",
+        200: "var(--color-secondary-200)",
+        300: "var(--color-secondary-300)",
+        400: "var(--color-secondary-400)",
+        500: "var(--color-secondary-500)",
+        600: "var(--color-secondary-600)",
+        700: "var(--color-secondary-700)",
+        800: "var(--color-secondary-800)",
+        900: "var(--color-secondary-900)",
+      },
     },
     underlineOffset: {
       small: "2px",
@@ -30,6 +63,7 @@ module.exports = {
         DEFAULT: {
           css: [
             {
+              color: theme("colors.neutral.700"),
               a: {
                 color: theme("colors.primary.700"),
                 textDecoration: "underline",
@@ -38,33 +72,64 @@ module.exports = {
                 "&:hover": {
                   backgroundColor: theme("colors.primary.600"),
                   borderRadius: "0.09rem",
-                  color: theme("colors.white"),
+                  color: theme("colors.neutral.DEFAULT"),
                   textDecoration: "none",
                 },
               },
+              strong: {
+                color: theme("colors.neutral.900"),
+              },
+              "ol > li::before": {
+                color: theme("colors.neutral.800"),
+              },
+              "ul > li::before": {
+                backgroundColor: theme("colors.neutral.500"),
+              },
+              hr: {
+                borderColor: theme("colors.neutral.200"),
+              },
               blockquote: {
+                color: theme("colors.neutral.800"),
                 borderLeftColor: theme("colors.primary.200"),
               },
+              h1: {
+                color: theme("colors.neutral.800"),
+                position: "relative",
+              },
               h2: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               h3: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               h4: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               code: {
                 color: theme("colors.secondary.700"),
               },
               "pre code": {
-                color: theme("colors.gray.700"),
+                color: theme("colors.neutral.700"),
               },
               pre: {
-                backgroundColor: theme("colors.gray.50"),
+                color: theme("colors.neutral.700"),
+                backgroundColor: theme("colors.neutral.50"),
+              },
+              "pre code": {
+                color: theme("colors.neutral.700"),
+              },
+              thead: {
+                color: theme("colors.neutral.800"),
+                borderBottomColor: theme("colors.neutral.500"),
+              },
+              "tbody tr": {
+                borderBottomColor: theme("colors.neutral.300"),
               },
               kbd: {
-                backgroundColor: theme("colors.gray.200"),
+                backgroundColor: theme("colors.neutral.200"),
                 padding: "0.1rem 0.4rem",
                 borderRadius: "0.25rem",
                 fontSize: "0.9rem",
@@ -81,65 +146,65 @@ module.exports = {
         light: {
           css: [
             {
-              color: theme("colors.gray.400"),
+              color: theme("colors.neutral.400"),
               a: {
                 color: theme("colors.primary.400"),
-                textDecorationColor: theme("colors.gray.500"),
+                textDecorationColor: theme("colors.neutral.500"),
               },
               strong: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               "ol > li::before": {
-                color: theme("colors.gray.400"),
+                color: theme("colors.neutral.400"),
               },
               "ul > li::before": {
-                backgroundColor: theme("colors.gray.600"),
+                backgroundColor: theme("colors.neutral.600"),
               },
               hr: {
-                borderColor: theme("colors.gray.200"),
+                borderColor: theme("colors.neutral.500"),
               },
               blockquote: {
-                color: theme("colors.gray.200"),
+                color: theme("colors.neutral.200"),
                 borderLeftColor: theme("colors.primary.900"),
               },
               h1: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h2: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h3: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h4: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               "figure figcaption": {
-                color: theme("colors.gray.400"),
+                color: theme("colors.neutral.400"),
               },
               code: {
                 color: theme("colors.secondary.400"),
               },
               "a code": {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               pre: {
-                color: theme("colors.gray.200"),
+                color: theme("colors.neutral.200"),
-                backgroundColor: theme("colors.gray.700"),
+                backgroundColor: theme("colors.neutral.700"),
               },
               "pre code": {
-                color: theme("colors.gray.200"),
+                color: theme("colors.neutral.200"),
               },
               thead: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
-                borderBottomColor: theme("colors.gray.400"),
+                borderBottomColor: theme("colors.neutral.500"),
               },
               "tbody tr": {
-                borderBottomColor: theme("colors.gray.600"),
+                borderBottomColor: theme("colors.neutral.700"),
               },
               kbd: {
-                backgroundColor: theme("colors.gray.700"),
+                backgroundColor: theme("colors.neutral.700"),
-                color: theme("colors.gray.300"),
+                color: theme("colors.neutral.300"),
               },
               mark: {
                 backgroundColor: theme("colors.secondary.400"),