♻️ Dark mode rewrite

This commit is contained in:
James Panther
2022-01-27 15:26:18 +11:00
parent 6a23863ff9
commit d86d1b82be
15 changed files with 92 additions and 91 deletions
+4 -3
View File
@@ -99,13 +99,14 @@ Many of the article defaults here can be overridden on a per article basis by sp
|Name|Default|Description|
|---|---|---|
|`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.|
|`defaultAppearance`|`"light"`|The default theme appearance, either `light` or `dark`.|
|`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.|
|`showAppearanceSwitcher`|`false`|Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.|
|`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.|
|`enableCodeCopy`|`false`|Whether copy buttons are enabled for `<code>` blocks.|
|`darkMode`|`"auto"`|The preferred theme appearance for dark mode. Set to `true` to force dark appearance or `false` to force light appearance. Using `"auto"` will defer to the user's operating system preference.|
|`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `<code>` blocks.|
|`logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
|`mainSections`|_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.|
|`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
|`showDarkToggle`|`false`|When `darkMode` is set to `"auto"`, this parameter determines whether or not to show the appearance toggle in the site footer. The browser's local storage is used to persist the user's preference.|
|`showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.|
|`homepage.layout`|`"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]({{< ref "homepage-layout" >}}) section for more details.|
|`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.|
+1 -1
View File
@@ -20,7 +20,7 @@ These instructions will get you up and running using Hugo and Congo from a compl
If you haven't used Hugo before, you will need to [install it onto your local machine](https://gohugo.io/getting-started/installing). You can check if it's already installed by running the command `hugo version`.
{{< alert >}}
Make sure you are using **Hugo version 0.86.1** or later as the theme takes advantage of some of the latest Hugo features.
Make sure you are using **Hugo version 0.87.0** or later as the theme takes advantage of some of the latest Hugo features.
{{< /alert >}}
You can find detailed installation instructions for your platform in the [Hugo docs](https://gohugo.io/getting-started/installing).
+5 -1
View File
@@ -28,7 +28,7 @@ A highly requested feature, Congo is now multilingual! If you publish your conte
<div class="text-2xl text-center" style="font-size: 2.8rem">:flag-au: :de: :fr: :es: :cn: :brazil: :tr:</div>
Thanks to submissions from the community, Congo has already been translated into [seven languages](https://github.com/jpanther/congo/tree/dev/i18n) with more to be added over time. By the way, pull requests for new languages are always welcome!
Thanks to submissions from the community, Congo has already been translated into [seven languages](https://github.com/jpanther/congo/tree/dev/i18n) with more to be added over time. By the way, [pull requests](https://github.com/jpanther/congo/pulls) for new languages are always welcome!
## RTL language support
@@ -87,6 +87,10 @@ The new image resizing features also provide full control over `alt` and `title`
There's countless other minor changes to explore. From being able to display taxonomies on articles and list pages, to using the new `headline` author parameter to customise your homepage. There's also improved JSON-LD strucured data which further optimises SEO performance. Plus the entire theme has had extra polish to ensure a consistent design language.
:rocket: Check out the [full changelog](https://github.com/jpanther/congo/blob/dev/CHANGELOG.md) to learn more.
## Next steps
If you're ready to upgrade, read the [upgrading from version 1 guide]({{< ref "upgrade" >}}) to get started. If you're new to Congo, check out the [Installation guide]({{< ref "docs/installation" >}}) to begin a new project.
---
@@ -117,6 +117,11 @@ If you're using a language other than English, provide a `defaultContentLanguage
# config/_default/config.toml
defaultContentLanguage = "en"
enableRobotsTXT = true
paginate = 10
summaryLength = 0
[outputs]
home = ["HTML", "RSS", "JSON"]
```
@@ -139,11 +144,17 @@ The recommended settings are as follows, which includes any headings in the Mark
A number of new theme parameters have been introduced in Congo 2.0. Some minor changes are requried to existing configurations. Remember, the theme will always revert to a sensible default if a parameter is not provided.
The follow parameters have been **renamed**:
The way that dark mode works in Congo has been changed to allow greater flexibility around configuration. The old `darkMode` and `darkToggle` parameters have been **removed and replaced** by three new parameters. These new options operate independently of each other, making it possible to force the appearance while still allowing the user to override.
`darkToggle` **&rarr;** `showDarkToggle`
<!-- prettier-ignore-start -->
| New parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultAppearance` | String | `"light"` | Default theme appearance; either `light` or `dark`.<br>:warning: _Setting this to `light` replicates the old `darkMode = false` setting, while `dark` replicates `darkMode = true`._ |
| `autoSwitchAppearance` | Boolean | `true` | Whether the theme appearance automatically switches based upon the operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. <br>:warning: _Setting this to `true` replicates the old `darkMode = "auto"` setting._ |
| `showAppearanceSwitcher` | Boolean | `false` | Whether the theme appearance switcher is dispalyed in the site footer. <br>:warning: _This parameter replaces `darkToggle`._ |
<!-- prettier-ignore-end -->
The following table outlines some key **new parameters** that control new features in version 2:
The following table outlines some other key **new parameters** that control new features in version 2:
| New parameter | Type | Default |
| ----------------------------- | ------- | ------- |