ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Using color-scheme and light-dark() to implement dark mode (#154)

Browse source 
* Lint fixes.

* Implement light-dark().

* Lint css with biome, remove stylelint.

* Biome lint fixes.

* Dark mode adjustments.

* Style bug fixes.

* Colour adjustments.

* Move header and footer styles to base.

* Site header adjustments.

* Removing jQuery and umbrella libs. They where great but not needed anymore.

* Add colorScheme to optionally lock light/dark.

* Update README.

* Biome adjustments.
This commit is contained in:
Fredrik Jonsson 2026-05-28 08:18:04 +02:00 • committed by GitHub
commit 16c47eea9d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 276 additions and 2130 deletions
Download patch file Download diff file Expand all files Collapse all files

44
README.md
View file

@ -42,7 +42,6 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
* [Podcast](#podcast)
* [Shortcodes](#shortcodes)
* [Content security policy headers](#Content-security-policy-headers)
* [Use npm to lint CSS and JavaScript](#use-npm-to-lint-css-and-javascript)
* [Repository links](#repository-links)
* [Math typesetting with KaTeX](#math-typesetting-with-katex)
* [Getting help](#getting-help)
@ -58,6 +57,7 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
* Commands for linting of css and js
* Contact form (PHP)
* CSS grid and flex throughout
* Dark and light mode
* HTML5
* Hugo Pipes for images, js and css
* Math typesetting with KaTeX
@ -245,8 +245,8 @@ hugo server --themesDir ../..
Performance should be excellent.
* Minimal and compliant HTML5
* Styles 23,2 kB (6,7 kB when gzipped)
* JavaScript 1 kB (with only mobile menu active, 4 Kb with all features active)
* Styles 28 kB (8 kB when gzipped)
* JavaScript 6 kB (with everything active, otherwise near zero)
* All scripts loaded in head with "defer"
* Optimised for HTTP/2
@ -292,6 +292,7 @@ params:
- section2 # in the <schema.org> `JSON+LD` in the page's `<head>`.
- section3 # This theme requires Hugo `v0.109.0` or higher to
# generate the `BreadcrumbListing`.
colorScheme: "light" # "light/dark" to lock, omit for user system preference.
cookieConsent: true # Show cookie consent form, default false.
contact: "info@example.org"
dateformat: "" # Set the date format, default to "2 January, 2006"
@ -303,7 +304,6 @@ params:
image: "" # Relative path to site image in JSON-LD, no leading slash.
imageMaxWidth: "" # Max width for images added via figure shortcode.
internalPagination: true # Use Hugo's internal pagination template, default false.
jquery: true # Add jQuery, default false.
languageDir: "" # Set ltr or rtl, defaults to ltr.
logo: false # Turn off the logo, defaults to true.
logoPath: # Relative path to site logo, defaults to "images/logo.png", no leading slash.
@ -329,7 +329,6 @@ params:
siteName: false # Hide the site name (visually-hidden), default true.
submitted: true # Show author and date information for a post.
themeColor: # Hex color value, used in meta tags, default "#ffffff".
umbrella: true # Add Umbrella JS, default false.
podcast:
title: # * Feed title, defaults to site title (iTunes).
@ -374,7 +373,7 @@ They are found in the theme `assets/css/_colors.css` and `assets/css/_variables.
In most cases you likely only need to override a few values and then it is easier to set these in the custom css files.
Root `assets/css/_custom.css`: Loaded last so use to override css variables and add any custom styles you need.
Root `assets/css/_custom.css`: Loaded last so use it to override css variables and add any custom styles you need.
### Logo
@ -390,13 +389,11 @@ Upload your image to [RealFaviconGenerator](https://realfavicongenerator.net/) t
The theme will autodetect them and add the needed code.
### Head and footer partials
### Dark and light mode
If you create partials named `head/extra.html` and/or `footer.html` they will be used. They do not exist or are empty in the theme but are supported as a convenience.
Colors are set with the css function `light-dark()`. The first colour is used in light mode and the other colour is used in dark mode. See `assets/css/_colors.css`.
Content in the "head/extra" partial will be added to the end of the "head" tag, perhaps some extra css or javascript.
Content in the "footer" partial will replace all the default content in the "footer" tag.
Use the param `colorScheme` to lock your site to either light or dark mode. By default the mode will follow the users system preferences.
### Layouts
@ -432,10 +429,6 @@ There is an `assets/css/_custom.css` file meant for your custom styles. Copy it
The default styles in `assets/css/_zen.css` are boring but functional. You can easily override them completely by placing an empty file named "_zen.css" in root assets/css directory.
The css files are by default built for production, compressed with fingerprint.
By setting the Hugo environment variable to "development" (default when running `hugo server`) they will instead be nested with sourcemaps.
## Render hook templates
@ -835,27 +828,6 @@ The **content** that should be wrapped. Some more content.
Includes tracking code for Matomo or Google in a way that supports Content security policy headers. Read more in my blog post [Content security policy headers when using Matomo or Google analytics](https://xdeb.org/post/2020/01/14/content-security-policy-headers-when-using-matomo-or-google-analytics/).
## Use npm to lint CSS and JavaScript
* Lint your CSS using stylelint.
* Lint your JavaScript using biome.
* Can lint files in the theme as well as the project assets directory.
Set up your front-end development build tools:
1. Install Node.js and npm, the Node.js package manager.
2. The package.json file in your new sub-theme contains the versions of all the
Node.js software you need. To install them run:
npm install
3. Run the following commands to lint your theme and projects CSS and JavaScript code.
npm run lint-theme
npm run lint-project
nmp run lint (project + theme)
## Repository links
Add view and edit repo links on your post. Activates when you add repository settings, see example for GitHub below. See more in the partial `repository-links.html`.