Merge pull request #153 from chrisrhymes/fix/auto-dark-mode

Allow auto dark mode and forcing theme
chrisrhymes · May 12, 2024 · 079cde9 · 079cde9
2 parents 36c2c44 + 47118df
commit 079cde9
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -31,13 +31,6 @@ And add this line to your Jekyll site's `_config.yml`:
 theme: bulma-clean-theme
 ```
 
-If you are deploying to GitHub pages, then you can also install the [GitHub Pages gem](https://github.com/github/pages-gem) and use `remote_theme` instead of `theme` in your `_config.yml`. **Note that the GitHub Pages gem requires Jekyll version 3.9.**
-
-```yaml
-# With GitHub Pages Gem
-remote_theme: chrisrhymes/bulma-clean-theme
-```
-
 And then execute:
 
     $ bundle
@@ -46,6 +39,23 @@ Or install it yourself as:
 
     $ gem install bulma-clean-theme
 
+### GitHub pages
+
+### v1.0
+
+To deploy to GitHub pages using v1.x you will need to use GitHub Actions. Please see the [upgrade guide](https://www.csrhymes.com/bulma-clean-theme/docs/getting-started/upgrading-to-v1/) for more information.
+
+### v0.x
+
+If you are deploying to GitHub pages using their default build process, then you can install v0.x of the [GitHub Pages gem](https://github.com/github/pages-gem) and use `remote_theme` instead of `theme` in your `_config.yml`. 
+
+**Note that the GitHub Pages gem requires Jekyll version 3.9 and version 0.x of Bulma Clean Theme**
+
+```yaml
+# With GitHub Pages Gem
+remote_theme: chrisrhymes/bulma-clean-theme:v0.14.0
+```
+
 ## Documentation
 
 Check out the demo site for the [Documentation](https://www.csrhymes.com/bulma-clean-theme/docs/)
@@ -67,4 +77,3 @@ Your theme is set up just like a normal Jekyll site! To test your theme, run `bu
 ## License
 
 The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-
diff --git a/_config.yml b/_config.yml
@@ -14,6 +14,7 @@ gh_sponsor: chrisrhymes
 #theme_color: '#eeeeee'
 #fixed_navbar: top
 #direction: one of <ltr, rtl, auto>, default: ltr
+force_theme: light
 
 paginate: 5
 paginate_path: "/blog/page:num"

diff --git a/_data/showcase_example.yml b/_data/showcase_example.yml
@@ -30,7 +30,7 @@ items:
       - Landing Page With Callouts
       - Blog and Posts
       - Showcases
-    features_styles: is-centered is-outlined
+    features_styles: is-centered
     image: /img/bulma-clean-theme-4by3.jpg
     image_ratio: is-4by3
     link: https://github.com/chrisrhymes/bulma-clean-theme

diff --git a/_includes/notification.html b/_includes/notification.html
@@ -1,5 +1,8 @@
 <div x-data="{visible: true}" markdown="0">
-    <div class="notification {{ include.status | default: 'is-warning' }}" x-show.transition.duration.300ms="visible">
+    <div
+        class="notification {{ include.status | default: 'is-warning' }} my-4"
+        x-show.transition.duration.300ms="visible"
+    >
         {% if include.dismissable %}
             <button class="delete" x-on:click="visible = false"></button>
         {% endif %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -14,10 +14,7 @@
 <html
     dir="{{ site.direction | default: 'ltr' }}"
     lang="{{ site.lang | default: 'en' }}"
-    {% if site.fixed_navbar %}
-        class="has-navbar-fixed-{{ site.fixed_navbar }}"
-    {% endif %}
-    class="theme-light"
+    class="{% if site.fixed_navbar %} has-navbar-fixed-{{ site.fixed_navbar }} {% endif %} {% if site.force_theme %} theme-{{ site.force_theme }} {% endif %}"
 >
     {% include head.html %}
     <body>

diff --git a/bulma-clean-theme.gemspec b/bulma-clean-theme.gemspec
@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "bulma-clean-theme"
-  spec.version       = "1.0.0"
+  spec.version       = "1.0.1"
   spec.authors       = ["chrisrhymes"]
   spec.email         = ["[email protected]"]
 

diff --git a/changelog.txt b/changelog.txt
@@ -1,3 +1,6 @@
+# 1.0.1
+* Fix auto dark mode and allow forcing a theme
+
 # 1.0.0
 * Upgrade to Bulma v1
 * Include bulma-block-list within the _scss folder due to load_path issues with dart sass. 

diff --git a/docs/getting-started/configuration.md b/docs/getting-started/configuration.md
@@ -24,12 +24,14 @@ The html _dir_ attribute is set to `ltr` by default. It can be overridden in the
 
 ## Google Analytics 
 
-To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property.
+To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property. 
 
 ```yaml
 google_analytics: UA-xxxxxxxx
 ```
 
+The Google Analytics implementation uses Google Analytics v4 and consent mode. Please see the [cookie banner](/bulma-clean-theme/docs/page-components/cookie-banner/) for more information.
+
 ## GitHub Sponsor
 
 If you have a GitHub sponsors account set up, you can add your username to `gh_sponsor` in the `_config.yml` file and it will display a link to your profile on the right of the navbar.

diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
@@ -9,12 +9,12 @@ toc: true
 
 ## Use the Gem with Jekyll
 
-**This theme requires Jekyll 3.9 to be compatible with GitHub Pages.**
+{% include notification.html message="V1.x of this theme requires Jekyll <= 4.3 to be compatible with Bulma v1." %}
 
 Add this line to your Jekyll site's `Gemfile`:
 
 ```ruby
-gem "bulma-clean-theme"
+gem "bulma-clean-theme",  '1.0.0'
 ```
 
 And add this line to your Jekyll site's `_config.yml`:
@@ -31,11 +31,23 @@ Or install it yourself as:
 
     $ gem install bulma-clean-theme
 
-## GitHub Pages
+## GitHub Pages 
 
-If you are deploying to GitHub pages, then you can also install the [GitHub Pages gem](https://github.com/github/pages-gem) and use `remote_theme` instead of `theme` in your `_config.yml`.
+### v0.x of Bulma Clean Theme
+
+If you are deploying to GitHub pages, then you can also install the [GitHub Pages gem](https://github.com/github/pages-gem) and use `remote_theme` instead of `theme` in your `_config.yml`. 
+
+Ensure you specify the version number at the end of the remote_theme, otherwise it will use the default version of the theme. 
 
 ```yaml
-# With GitHub Pages Gem
-remote_theme: chrisrhymes/bulma-clean-theme
-```
+# _config.yml
+remote_theme: chrisrhymes/bulma-clean-theme:v0.14.0
+```
+
+### v1.x of Bulma Clean Theme
+
+{% include notification.html message="v1.x does not work with the GitHub pages default build process. " status="is-warning" %}
+
+When using v1.x of this theme, use GitHub actions to deploy your site to GitHub pages.
+
+Please read the [upgrade guide](/bulma-clean-theme/docs/getting-started/upgrading-to-v1/) for more information.
diff --git a/docs/getting-started/theming.md b/docs/getting-started/theming.md
@@ -11,6 +11,13 @@ show_sidebar: false
 
 Bulma Clean Theme uses the Bulma frontend framework. Check out the [Bulma docs](https://bulma.io/documentation/) for more information.
 
+## Bulma Themes
+
+Bulma v1 has the concept of [themes](https://bulma.io/documentation/features/themes/) and auto detects the browser's choice for dark or light theme. 
+
+To disable this behaviour and force a theme, set the `force_theme:` in the _config.yml to either 'dark' or 'light'.
+
+
 ## Setting the Primary Colour
 
 To overwrite the primary theme colour, create a new file called `assets/css/app.scss`. Copy and paste the below into the `app.scss` file.

diff --git a/docs/getting-started/upgrading-to-v1.md b/docs/getting-started/upgrading-to-v1.md
@@ -10,12 +10,56 @@ toc: true
 
 Version 1 of Bulma Clean Theme uses version 1 of Bulma. Bulma v1 has been updated to use dart sass and Jekyll was updated to use dart sass from version 4.3 and up, so this is now the minimum supported version of Jekyll for this theme. 
 
+## Updating dependencies
+
+One way of updating Jekyll and the theme is by using bundle. First update the versions in your Gemfile as follows:
+
+```ruby
+# Gemfile
+gem "jekyll", "~> 4.3"
+gem "bulma-clean-theme",  '1.0.0'
+```
+
+Then use bundle to update from your command line.
+
+```bash
+$ bundle update
+```
+
+## Using remote_theme
+
+If you are using Jekyll Remote Theme, then you can [add a version number](https://github.com/benbalter/jekyll-remote-theme?tab=readme-ov-file#declaring-your-theme) in your _config.yml to specify which version you want to use.
+
+```yaml
+# _config.yml
+remote_theme: chrisrhymes/bulma-clean-theme:v1.0.0
+```
+
 ## Changes to Bulma
 
 Please read through the [Bulma migration guide](https://bulma.io/documentation/start/migrating-to-v1/) for any changes to Bulma that may affect your site.  
 
+### Dark mode
+
+Bulma v1 has a concept of themes and [automatic dark mode](https://bulma.io/documentation/features/dark-mode/).
+
+> Modern browsers come with a way to detect if a user has set their theme preference to light or dark by using the prefers-color-scheme keyword.
+
+To disable this behaviour and force a theme, set the `force_theme:` in the _config.yml to either 'dark' or 'light'.
+
+```yaml
+# _config.yml
+force_theme: light
+```
+
 ## GitHub pages deploy
 
  As stated above, the minimum supported version is now Jekyll <= 4.3. The standard build for GitHub pages works with Jekyll 3.9, so you will need to migrate to using a GitHub action to build and deploy your site. 
 
- Please read through the [Jekyll docs for GitHub Actions](https://jekyllrb.com/docs/continuous-integration/github-actions/) for more information.
+ Please read through the [Jekyll docs for GitHub Actions](https://jekyllrb.com/docs/continuous-integration/github-actions/) for more information.
+
+### Additional gems
+
+ The [GitHub pages gem](https://rubygems.org/gems/github-pages/versions/231) had a lot of additional gems included, which may not be included when you use GitHub actions to build your site. 
+
+ If you are using any additional gems in your site, such as `jekyll-github-metadata`, then ensure you install them following their documentation.