Merge pull request #15 from justint/opeik/main

opeik's dark mode

README.md

@@ -2,26 +2,37 @@
 
 A clean [Zola](https://getzola.org) theme for blogging and projects, forked from [Anpu](https://github.com/zbrox/anpu-zola-theme).
 
+## Preview
+
 **Demo site**: [https://justintennant.me/papaya/](https://justintennant.me/papaya/)
 
-![index](pics/index.png)
+![index light/dark](https://raw.githubusercontent.com/justint/papaya/main/pics/blendedindex.png)
 
-![projects](pics/projects.png)
+<p align="center">
+  <img alt="Light Projects" src="https://raw.githubusercontent.com/justint/papaya/main/pics/projects.png" width="45%">
+&nbsp; &nbsp; &nbsp; &nbsp;
+  <img alt="Dark Projects" src="https://raw.githubusercontent.com/justint/papaya/main/pics/projects_dark.png" width="45%">
+</p>
 
-![project](pics/project.png)
+<p align="center">
+  <img alt="Light Project" src="https://raw.githubusercontent.com/justint/papaya/main/pics/project.png" width="45%">
+&nbsp; &nbsp; &nbsp; &nbsp;
+  <img alt="Dark Project" src="https://raw.githubusercontent.com/justint/papaya/main/pics/project_dark.png" width="45%">
+</p>
 
 ## Features
 
 - Blog posts
 - Project pages
+- Automatic light/dark mode
 - Categories and tags
 - Optional multilingual support
 - Customizable sections and navigation menu links
 - Featured images for posts/pages
 - Smart image embedding shortcode (`{{ img() }}`)
 - GitHub repository star/fork counts
 - [Open Graph Protocol](https://ogp.me/) tags
-- Social/contact links 
+- Social/contact links
 - 100% Google Lighthouse score
 
 ## Installation
@@ -75,8 +86,9 @@ A clean [Zola](https://getzola.org) theme for blogging and projects, forked from
 Here are the customizable features of Papaya: 
 
 - [Project categories](#project-categories)
+- [Light/dark mode](#lightdark-mode)
 - [Multilingual support](#multilingual-support)
-- [Custom sections and navigation menu links](#custom-sections-and-navigation-menu-links)
+- [Sections and navigation menu links](#sections-and-navigation-menu-links)
 - [Post/project date formats](#postproject-date-formats)
 - [Post/project featured images](#postproject-featured-images)
 - [Open Graph Protocol locale/profile information](#open-graph-protocol-localeprofile-information)
@@ -120,6 +132,12 @@ categories = ["software"]
 
 The example project page above would be grouped into & displayed within the "Software" category of your projects page.
 
+### Light/dark mode
+
+The Papaya theme can be set to `"light"`, `"dark"`, or `"auto"` mode in the `config.toml`.
+
+In `"auto"`, the light and dark modes are implicitly chosen by the `prefers-color-scheme` CSS media feature. The theme will switch automatically based on the viewer's OS or user agent setting.
+
 ### Multilingual support
 
 Currently Zola has basic internationalization (`i18n`) support, you can read more in [zola's Multilingual Sites doc](https://www.getzola.org/documentation/content/multilingual/).
@@ -193,7 +211,7 @@ Now you will have a website that supports both English and Chinese! Since `defau
 
 A page (post or project) can be available in both languages or only in one language, and it's not necessary that a page is available in the default language.
 
-### Custom sections and navigation menu links
+### Sections and navigation menu links
 
 The navigation menu is constructed from a list of `menu_items` in your `config.toml`. For example:
 ```toml

config.toml

@@ -19,7 +19,11 @@ highlight_code = true
 
 # The theme to use for code highlighting.
 # See Zola configuration docs for list of allowed values.
-highlight_theme = "material-light"
+highlight_theme = "css"
+highlight_themes_css = [
+  { theme = "material-dark", filename = "syntax-theme-dark.css" },
+  { theme = "material-light", filename = "syntax-theme-light.css" },
+]
 
 [languages]
 
@@ -93,6 +97,9 @@ date_format = "%Y 年 %m 月 %d 日"
 # Development environment. Used by the page macros to load remote content only when in "prod" mode
 env = "ZOLA_ENV"
 
+# Color theme mode. Options: light, dark, auto (automatically switch depending on OS/user agent settings)
+color_mode = "auto"
+
 # List of Papaya navigational menu items. Used to construct the navigation bar. See the README for item schema.
 menu_items = [
     { name = "projects", url = "$LANG_BASE_URL/projects", show_recent = true, recent_items = 3, recent_trans_key = "recent_projects", more_trans_key = "more_projects" },