mirror of
https://github.com/TrezOne/congo-hindi-gujarati.git
synced 2026-07-04 23:34:27 -04:00
✨ Add multiple colour schemes
This commit is contained in:
James Panther
@@ -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="prose dark:text-white">This is a demo of the <code id="layout">page</code> layout.</span>
|
||||
<span class="flex items-center justify-between flex-grow dark:text-neutral-300">
|
||||
<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 ↻
|
||||
|
||||
@@ -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.
|
||||
|
||||
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,
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
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 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).
|
||||
|
||||
|
||||
@@ -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.|
|
||||
|
||||
@@ -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.
|
||||
|
||||
{{< 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 >}}
|
||||
**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.
|
||||
|
||||
Reference in New Issue
Block a user