🌙 Add Dark Mode Support to Mediumish Theme

.github/workflows/jekyll.yml

@@ -0,0 +1,65 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Deploy Jekyll site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["dark-theme"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Ruby
+        # https://github.com/ruby/setup-ruby/releases/tag/v1.207.0
+        uses: ruby/setup-ruby@4a9ddd6f338a97768b8006bf671dfbad383215f4
+        with:
+          ruby-version: '3.3' # Not needed with a .ruby-version file
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+          cache-version: 0 # Increment this number if you need to re-download cached gems
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      - name: Build with Jekyll
+        # Outputs to the './_site' directory by default
+        run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
+        env:
+          JEKYLL_ENV: production
+      - name: Upload artifact
+        # Automatically uploads an artifact from the './_site' directory by default
+        uses: actions/upload-pages-artifact@v3
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

Gemfile

@@ -7,6 +7,8 @@ source "https://rubygems.org"
 #     bundle exec jekyll serve
 #
 
+gem "jekyll", "~> 4.3"
+
 # If you have any plugins, put them here!
 gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 group :jekyll_plugins do

README.md

@@ -1,3 +1,20 @@
+# Mediumish Jekyll Theme — Dark Mode Edition 🌙
+
+This is a fork of the original [Mediumish Jekyll Theme](https://github.com/wowthemesnet/mediumish-theme-jekyll), with full dark mode support added by [Nicco Cirone](https://niccocirone.com).
+
+🔗 Live examples: 
+[Live Demo](https://niccocirone.com/dark-theme-for-mediumish-theme-jekyll/)
+[niccocirone.com/blog](https://niccocirone.com/blog)
+
+## Key Features
+- Automatic dark mode via `prefers-color-scheme`
+- Jumbotron and card styling adapted for low-light environments
+- Maintains light theme as fallback
+
+Pull request submitted: [PR-266]([https://github.com/wowthemesnet/mediumish-theme-jekyll/pull/XYZ](https://github.com/wowthemesnet/mediumish-theme-jekyll/pull/266))
+
+********************************************************************************
+
 # Mediumish - Jekyll Theme
 
 [Live Demo](https://wowthemesnet.github.io/mediumish-theme-jekyll/)   |   [Download](https://github.com/wowthemesnet/mediumish-theme-jekyll/archive/master.zip)   |   [Documentation](https://bootstrapstarter.com/template-mediumish-bootstrap-jekyll/)   |   [Buy me a coffee](https://www.wowthemes.net/donate/)

_config.yml

@@ -4,7 +4,7 @@ title: "Mediumish"
 description: "Jekyll template, Medium styled, free for bloggers."
 logo: 'assets/images/logo.png'
 favicon: 'assets/images/logo.png'
-baseurl: /mediumish-theme-jekyll
+baseurl: /dark-theme-for-mediumish-theme-jekyll
 google_analytics: 'UA-46278016-1'
 disqus: 'demowebsite'
 mailchimp-list: 'https://wowthemes.us11.list-manage.com/subscribe/post?u=8aeb20a530e124561927d3bd8&id=8c3d2d214b'

_includes/featuredbox.html

@@ -21,7 +21,7 @@
                     <div class="card">
                         <div class="card-body">
                             <h2 class="card-title">
-                                <a class="text-dark" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+                                <a class="card-title-link" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
                                 {% if post.rating %}
                                 <div class="mb-2 mt-2 font-weight-normal">
                                 {% include star_rating_postbox.html %}
@@ -31,7 +31,7 @@ <h2 class="card-title">
 
                             <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:25 }}</h4>
                         </div>
-                        <div class="card-footer b-0 bg-white mt-auto">
+                        <div class="card-footer b-0 mt-auto">
                             <div class="wrapfooter">
                                 {% if post.author %}
                                 <span class="meta-footer-thumb">
@@ -56,4 +56,4 @@ <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:25 }}</h4>
         </div>
     </div>
 </div>
-<!-- end post -->
+<!-- end post -->

_includes/postbox.html

@@ -18,7 +18,7 @@
         </div>
         <div class="card-body">
             <h2 class="card-title">
-                <a class="text-dark" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+                <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
                 {% if post.rating %}
                 <div class="mb-2 mt-2 font-weight-normal">
                 {% include star_rating_postbox.html %}
@@ -27,7 +27,7 @@ <h2 class="card-title">
             </h2>
             <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:30 }}</h4>
         </div>
-        <div class="card-footer bg-white">
+        <div class="card-footer">
             <div class="wrapfooter">
                 {% if post.author %}
                 <span class="meta-footer-thumb">
@@ -48,4 +48,4 @@ <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:30 }}</h4>
         </div>
     </div>
 </div>
-<!-- end post -->
+<!-- end post -->

_layouts/default.html

@@ -16,6 +16,8 @@
 
 <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">
 
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/dark.css" media="(prefers-color-scheme: dark)">
+
 <script src="{{ site.baseurl }}/assets/js/jquery.min.js"></script>
 
 </head>
@@ -43,7 +45,7 @@
 
 <!-- Begin Menu Navigation
 ================================================== -->
-<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top mediumnavigation nav-down">
+<nav class="navbar navbar-expand-lg navbar-light fixed-top mediumnavigation nav-down">
 
     <div class="container pr-0">
 

_layouts/post.html

@@ -32,7 +32,7 @@
                         {% endif %}
                     </div>
                     <div class="col-xs-12 col-md-9 col-lg-10 text-center text-md-left">
-                        <a target="_blank" class="link-dark" href="{{ author.web }}">{{ author.display_name }}</a><a target="_blank" href="{{ author.twitter }}" class="btn follow">Follow</a>
+                        <a target="_blank" class="author-name" href="{{ author.web }}">{{ author.display_name }}</a><a target="_blank" href="{{ author.twitter }}" class="btn follow">Follow</a>
                         <span class="author-description">{{ author.description }}</span>
                     </div>
                 </div>
@@ -178,4 +178,4 @@ <h3 class="font-weight-bold">Summary</h3>
   }
 }
 </script>
-{% endif %}
+{% endif %}