to enable dark mode

README.md

@@ -1,21 +1,27 @@
-
-# How-to
-Build Jekyll site locally and push source code and site to separate branches: main and gh-pages on GitHub. Mainly following the answer [here](https://stackoverflow.com/a/28252200).
+# jekyll-test
 
-Initialize the repository and jekyll code base:
+Repository for testing Jekyll setup where the site is built locally, source and site are then pushed to separate branches main and gh-pages respectively.
+
+Using default minima theme with only added `assets/main.scss` to enable dark mode by turning on or off dark mode in the OS.
+
+## How-to
+Build Jekyll site locally and push source code and site to separate branches: main and gh-pages on GitHub mainly following the answer [here](https://stackoverflow.com/a/28252200).
+
+First, initialize the repository and Jekyll code base:
 ```bash
 $ mkdir jekyll-test && cd jekyll-test
 $ git init --initial-branch=main
 $ git remote add origin [email protected]:<user-name>/jekyll-test.git
 $ jekyll new .
 ```
 
-Set `baseurl: '/jekyll-test'` in `_config.yml`. Add `_site` to `.gitignore`, because the site will be versioned in separate gh-pages branch. Next, run:
+Set `baseurl: '/jekyll-test'` in `_config.yml` and add `_site` to `.gitignore`, because the site will be versioned in separate gh-pages branch. 
+
+Next, to build the site and serve it locally at: `http://127.0.0.1:4000/jekyll-test/`, run:
 ```bash
 $ jekyll build
 $ bundle exec jekyll serve
 ```
-to build the site and serve it locally at: `http://127.0.0.1:4000/jekyll-test/`.
 
 Add the local repository to GitHub:
 ```bash

_config.yml

@@ -1,27 +1,7 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-#
-# If you need help with YAML syntax, here are some quick references for you:
-# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
-# https://learnxinyminutes.com/docs/yaml/
-#
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-
 title: Jekyll test
 email: [email protected]
 description: >- # this means to ignore newlines until "baseurl:"
-  Testing Jekyll.
+  Testing dark mode in Jekyll.
 baseurl: "/jekyll-test" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 github_username: mrkllvc
@@ -31,25 +11,5 @@ theme: minima
 plugins:
   - jekyll-feed
 
-# Exclude from processing.
-# The following items will not be processed, by default.
-# Any item listed under the `exclude:` key here will be automatically added to
-# the internal "default list".
-#
-# Excluded items can be processed by explicitly listing the directories or
-# their entries' file path in the `include:` list.
-#
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
-
 sass:
   quiet_deps: true

_posts/2024-04-23-welcome-to-jekyll.markdown

@@ -14,13 +14,13 @@ Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit number
 
 Jekyll also offers powerful support for code snippets:
 
-{% highlight ruby %}
+```ruby
 def print_hi(name)
   puts "Hi, #{name}"
 end
 print_hi('Tom')
 #=> prints 'Hi, Tom' to STDOUT.
-{% endhighlight %}
+```
 
 Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
 

about.markdown

@@ -4,15 +4,4 @@ title: About
 permalink: /about/
 ---
 
-This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
-
-You can find the source code for Minima at GitHub:
-[jekyll][jekyll-organization] /
-[minima](https://github.com/jekyll/minima)
-
-You can find the source code for Jekyll at GitHub:
-[jekyll][jekyll-organization] /
-[jekyll](https://github.com/jekyll/jekyll)
-
-
-[jekyll-organization]: https://github.com/jekyll
+Test by turning on/off dark mode in your OS.

assets/main.scss

@@ -0,0 +1,56 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@import
+  "minima",
+  "minima/syntax-highlighting"
+;
+
+@media (prefers-color-scheme: dark) {
+    body {
+      background-color: #1c1b1f;
+    }
+
+    p, h1, h2, h3 {
+        // font-family: Helvetica;
+        // font-family: monospace;
+        color: white;
+    }
+
+    a {
+        color: #ffc32c;
+        text-decoration: none; // underline
+    }
+
+    a:visited {
+        color: #ffc32c;
+    }
+
+    a:hover {
+        color: #ffda7b;
+    }
+
+    pre,
+    code {
+        color: #e3fae3;
+        border: none;
+        background-color: rgb(0, 0, 0);
+    }
+
+    .highlight {
+        .highlighter-rouge & {
+            color: #00FF00;
+            border: none;
+            background-color: black;
+        }
+    }
+
+    .footer {
+        color: white;
+    }
+
+    .header {
+        color: white;
+    }    
+}