@@ -51,7 +51,7 @@ can pass the `--format=<format>` option to it and mention what format we want
 the commits to be displayed in. `--format='%an'` just prints the author's name
 for each commit.
 
-{{< highlight bash >}}
+```
 $ git log --format='%an'
 
 Alice
@@ -63,11 +63,11 @@ Denise
 Alice
 Alice
 Alice
-{{< /highlight >}}
+```
 
 Now we can use the `sort` utility to sort them alphabetically.
 
-{{< highlight bash >}}
+```
 $ git log --format='%an' | sort
 
 Alice
@@ -79,18 +79,18 @@ Candice
 Denise
 Denise
 Denise
-{{< /highlight >}}
+```
 
 Next we use `uniq`
 
-{{< highlight bash >}}
+```
 $ git log --format='%an' | sort | uniq -c
 
     4 Alice
     1 Bob
     1 Candice
     3 Denise
-{{< /highlight >}}
+```
 
 According to `uniq`'s man page:
 
@@ -107,14 +107,14 @@ You can see the output is still sorted alphabetically. So now all that is
 remaining is sort it numerically. There's a flag for that in `sort`, the
 `-n` flag. It considers the numbers based on their numerical value.
 
-{{< highlight bash >}}
+```
 $ git log --format='%an' | sort | uniq -c | sort -nr
 
     4 Alice
     3 Denise
     1 Candice
     1 Bob
-{{< /highlight >}}
+```
 
 The `-r` flag was also included to print the list in reverse order. By default
 it sorts it in the ascending order. And their you have it -- A list of authors
@@ -130,7 +130,7 @@ because the actual image will be displayed on a GUI program). We can simply curl
 or wget the url -- https://reddit.com/r/memes.json
 
 
-{{< highlight bash >}}
+```
 $ wget -O - -q 'https://reddit.com/r/memes.json'
 
 '{"kind": "Listing", "data": {"modhash": "xyloiccqgm649f320569f4efb427cdcbd89e68aeceeda8fe1a", "dist": 27, "children":
@@ -142,8 +142,7 @@ More lines
 ...
 ...
 
-{{< /highlight >}}
-
+```
 I use wget here because it seems like the Curl User-Agent gets treated
 differently. Obviously, you can get around this by simply changing the
 'User-Agent' header, but I just went with `wget`. Wget has a `-O` to provide
@@ -158,7 +157,7 @@ it's man page.
 
 If you take a look at the response JSON, it looks something like this:
 
-{{< highlight json >}}
+```
 {
     "kind": "Listing",
     "data": {
@@ -169,14 +168,14 @@ "after": "t3_gi892x",
         "before": null
     }
 }
-{{< /highlight >}}
+```
 
 So here we have some response of the type "Listing" and we can see we have an
 array of "children". Each element of that array is a post.
 
 This is what one of the elements of the 'children' array looks like:
 
-{{< highlight json >}}
+```
 {
     "kind": "t3",
     "data": {
@@ -208,7 +207,7 @@ "more lines skipped"
         ".................."
     }
 }
-{{< /highlight >}}
+```
 
 I have reduced the number of key value pairs in `data`. In total there were 105
 items. As you can see there are many interesting data attributes you can fetch
@@ -219,7 +218,7 @@ `url` field is the url to the meme's image.
 
 We can simply get the list of of all the urls of of every post using:
 
-{{< highlight bash >}}
+```
 $ wget -O - -q reddit.com/r/memes.json | jq '.data.children[] |.data.url'
 
 "https://www.reddit.com/r/memes/comments/g9w9bv/join_the_unofficial_redditmc_minecraft_server_at/"
@@ -230,7 +229,7 @@ "https://i.redd.it/is3cckgbeby41.png"
 "https://i.redd.it/4pfwbtqsaby41.jpg"
 ...
 ...
-{{< /highlight >}}
+```
 
 Ignore the first two links, those are basically sticky posts that the mods put,
 whose 'url' is same as the 'permalink'.
@@ -257,16 +256,16 @@ > the standard input are ignored
 
 So running something like:
 
-{{< highlight bash >}}
+```
 $ echo "https://i.redd.it/4pfwbtqsaby41.jpg" | xargs wget -O meme.jpg -q
-{{< /highlight >}}
+```
 
 would be equavalent to running:
 
-{{< highlight bash >}}
+```
 $ wget -O meme.jpg -q "https://i.redd.it/4pfwbtqsaby41.jpg"
 
-{{< /highlight >}}
+```
 
 Now, we can just pass the list of URLs to an image viewer, like
 [`feh`](https://feh.finalrewind.org/) or
@@ -274,10 +273,10 @@ [`eog`](https://wiki.gnome.org/Apps/EyeOfGnome)
 that accept a URL as a valid argument.
 
 
-{{< highlight bash >}}
+```
 $ wget -O - -q reddit.com/r/memes.json | jq '.data.children[] |.data.url' | xargs feh
 
-{{< /highlight >}}
+```
 
 Now, feh pops up with the memes and I can just browse through them using the
 arrow keys like they were on my local disk.
@@ -292,10 +291,10 @@ **setting the wallpaper** of your desktop to the top upvoted image of
 [/r/earthporn](https://reddit.com/r/earthporn) from the "hot" section.
 
 
-{{< highlight bash >}}
+```
 $ wget -O - -q reddit.com/r/earthporn.json | jq '.data.children[] |.data.url' | head -1 | xargs feh --bg-fill
 
-{{< /highlight >}}
+```
 
 You can then, if you want, set this up as a cron-job that runs every hour or
 so. I use the `head` command here to just print the first line, which would be
@@ -320,7 +319,7 @@ lists. You can also find lists made by other users. For example - [Blow Your
 Mind Movies](https://www.imdb.com/list/ls020046354). If you append `/export` to
 the url you get the list in a `.csv` format.
 
-{{< highlight bash >}}
+```
 $ curl https://www.imdb.com/list/ls020046354/export
 
 Position,Const,Created,Modified,Description,Title,URL,Title Type,IMDb Rating,Runtime (mins),Year,Genres,Num Votes,Release Date,Directors
@@ -332,11 +331,11 @@ 5,tt0144084,2018-01-16,2018-01-16,,American Psycho,https://www.imdb.com/title/tt0144084/,movie,7.6,101,2000,"Comedy, Crime, Drama",462984,2000-01-21,Mary Harron
 6,tt0364569,2018-01-16,2018-01-16,,Oldeuboi,https://www.imdb.com/title/tt0364569/,movie,8.4,120,2003,"Action, Drama, Mystery, Thriller",491476,2003-11-21,Chan-wook Park
 7,tt1130884,2018-10-08,2018-10-08,,Shutter Island,https://www.imdb.com/title/tt1130884/,movie,8.1,138,2010,"Mystery, Thriller",1075524,2010-02-13,Martin Scorsese
 8,tt8772262,2019-12-27,2019-12-27,,Midsommar,https://www.imdb.com/title/tt8772262/,movie,7.1,148,2019,"Drama, Horror, Mystery, Thriller",150798,2019-06-24,Ari Aster
-{{< /highlight >}}
+```
 
 We can use `cut` to decide which fields we need to print:
 
-{{< highlight bash >}}
+```
 $ curl https://www.imdb.com/list/ls020046354/export | cut -d ',' -f 6
 
 Title
@@ -348,7 +347,7 @@ American Psycho
 Oldeuboi
 Shutter Island
 Midsommar
-{{< /highlight >}}
+```
 
 The `-d` option is to specify the delimiter for each field. What are the fields
 separated with? In this case it's a comma (`,`). The `-f` option is the field
@@ -359,7 +358,7 @@ 
 We can then pipe the list of movies into `shuf`. Shuf just shuffles it's input
 lines randomly and spits it out.
 
-{{< highlight bash >}}
+```
 $ curl https://www.imdb.com/list/ls020046354/export | cut -d ',' -f 6 | sed '1 d' | shuf
 
 American Psycho
@@ -370,41 +369,41 @@ Fight Club
 Memento
 Shutter Island
 The Prestige
-{{< /highlight >}}
+```
 
 Now just pipe it into `head -1` or `sed '1 q'` which would print only the first
 line. Every time you run this, you should get a random selection.
 
-{{< highlight bash >}}
+```
 $ curl https://www.imdb.com/list/ls020046354/export | cut -d ',' -f 6 | sed '1 d' | shuf | head -1
 
 Source Code
-{{< /highlight >}}
+```
 
 Now let's say you would also like the URL to be printed along with title, no
 problem, `cut` allows you to specify multiple fields to print using `--field=LIST`
 
-{{< highlight bash >}}
+```
 $ curl https://www.imdb.com/list/ls020046354/export | cut -d ',' --field=6,7 | sed '1 d' | shuf | head -1
 
 Shutter Island,https://www.imdb.com/title/tt1130884/
-{{< /highlight >}}
+```
 
 There is a problem with this though, if the Movie title has a comma in it, then
 you would get a totally different field value. One way to overcome this is by
 using a python one-liner like this:
 
-{{< highlight bash >}}
+```
 python -c 'import csv,sys;[print (a["Title"]) for a in csv.DictReader(sys.stdin)]'
-{{< /highlight >}}
+```
 
-{{< highlight bash >}}
+```
 $ curl -s https://www.imdb.com/list/ls020046354/export |\
     python -c 'import csv,sys;[print (a["Title"],a["URL"]) for a in csv.DictReader(sys.stdin)]'|\
     shuf | head -1
 
 Oldeuboi https://www.imdb.com/title/tt0364569/ 
-{{< /highlight >}}
+```
 
 These were just a few examples, there are so many things you can accomplish in
 a single line of shell using pipes.

@@ -25,4 +25,16 @@ View source
   </a>
   </p>
 </footer>
+<script>
+  function applyTheme(theme) {
+    document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
+    document.body.classList.add(`theme-${theme}`);
+  }
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelector("#theme").addEventListener("change", function() {
+    applyTheme(this.value);
+  });
+});
+</script>
 

@@ -12,7 +12,11 @@ <!-- <div><a href="/projects">Projects</a></div> -->
     <div><a href="/posts">Posts</a></div>
     <div><a href="/snippets">Snippets</a></div>
     <div><a href="https://git.prithu.xyz">Git</a></div>
-    <!-- <div><a href="https://x.prithu.xyz/pub">pub/</a></div> -->
-    <!-- <div><a href="/links">Links</a></div> -->
+    <div>
+      <select id=theme>
+        <option value=light>Light</option>
+        <option value=dark>Dark</option>
+      </select>
+    </div>
   </div>
 </nav>

@@ -1,5 +1,5 @@ 
 {{ partial "head.html" . }}
-<body>
+<body class=theme-dark>
   {{ partial "nav.html" }}
   <div class="bcontainer">
     <div class="bcontent" id=blist>

@@ -1,5 +1,5 @@ 
 {{ partial "head.html" . }}
-<body>
+<body class="theme-dark">
   {{ partial "nav.html" }}
   <div class="bcontainer">
     <div class="bcontent">

@@ -1,5 +1,5 @@ 
 {{ partial "head.html" . }}
-<body>
+<body class="theme-light">
   {{ partial "nav.html" }}
 </body>
   <div class='container'>

@@ -1,6 +1,5 @@ 
 @import url('https://rsms.me/inter/inter.css');
 
-
 .bcontainer{
     margin-top: 2rem;
     display: flex;
@@ -8,6 +7,7 @@ flex-flow: row;
     width: 100%;
     min-height: calc(100vh - 7rem - 7rem); /* 7rem footer + 7 rem nav + margin */
     justify-content: center;
+    color: var(--text-primary);
 }
 
 .blog-menu{
@@ -41,8 +41,8 @@ font-family: Inter, sans-serif;
     font-weight: 900;
     font-size: 2.3rem;
     line-height: 1;
-    color: rgba(0,0,0,0.7);
-    fill: rgba(0,0,0,0.7)
+    color: var(--text-primary);
+    fill: var(--text-primary);
 }
 
 #rss a{
@@ -68,7 +68,7 @@ margin-bottom: 2rem;
 }
 
 .post-label{
-    background-color: rgba(0, 0, 0, 0.15);
+    background-color: var(--pre-bg);
     border-radius: 0.3rem;
     padding: 0.2rem 0.8rem;
     font-size: 0.85rem;
@@ -92,17 +92,22 @@ justify-content: space-between;
     padding: 0.7rem 0rem;
 }
 
+.post-item > a:hover {
+    text-decoration: underline;
+}
+
 .post-item > a {
     margin-right: 4rem;
     overflow: hidden;
-    font-weight: 500;
+    font-weight: 600;
+    color: var(--text-primary);
 }
 
 .post-item > .post-date{
     font-size: 1rem;
     line-height: 1.4;
     white-space: nowrap;
-    color: rgba(0,0,0,0.7);
+    color: var(--text-secondary);
 }
 
 .post-text{
@@ -112,7 +117,7 @@ }
 
 
 .post-text figure h4{
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--text-secondary);
     text-align: center;
     font-size: 1rem;
     font-weight: 400;
@@ -179,7 +184,7 @@ }
 
 .post-text pre {
     max-width: 100%;
-    background: #e6e6e6;
+    background: var(--pre-bg);
     padding: 1rem;
     margin: 0.5rem 0;
     border: 1px solid rgba(0,0,0,0.15);
@@ -193,7 +198,7 @@ height: 6px;
 }
 
 .post-text pre::-webkit-scrollbar-thumb {
-  background-color: rgba(255,255,255,0.35);
+  background-color: var(--scrollbar);
   border-radius: 20px;
 }
 
@@ -222,9 +227,9 @@ 
 .post-text blockquote {
     margin: 2rem 0rem 2rem 1rem;
     padding-left: 1rem;
-    border-left: 4px solid rgba(0,0,0,0.2);
+    border-left: 4px solid var(--quote-bar);
     font-size: 16px;
-    color: rgba(0,0,0,0.7);
+    color: var(--text-secondary);
     text-transform: italic;
 }
 

@@ -12,7 +12,7 @@ a:active,
 a:focus{
     outline: none;
     text-decoration: none;
-    color: black;
+    color: var(--text-primary);
 }
 
 ::selection {
@@ -29,6 +29,8 @@ --dark-card-head: white;
     --dark-card-text: #d8d8d8;
     --dark-logo-top: white;
     --dark-logo-bottom: #eeeeee;
+    --dark-pre-bg: #0000003d;
+    --dark-pre-border-color: #ffffff1c;
 
     --light-bg: #f3f3f3;
     --light-text: #666666;
@@ -38,28 +40,38 @@ --light-card-head: #333333;
     --light-card-text: #292929;
     --light-logo-top: #1a1a1a;
     --light-logo-bottom: #4d4d4d;
+    --light-pre-bg: #0000003d;
+    --light-pre-border-color: #ffffff1c;
 }
 
 body.theme-light{
     --bg: var(--light-bg);
     --text: var(--light-text);
     --text-primary: var(--light-text-primary);
+    --text-secondary: var(--light-text);
     --card-bg: var(--light-card-bg);
     --card-head: var(--light-card-head);
     --card-text: var(--light-card-text);
     --logo-top: var(--light-logo-top);
     --logo-bottom: var(--light-logo-bottom);
+    --pre-bg: #0000000f;
+    --pre-border-color: var(--light-pre-border);
 }
 
 body.theme-dark{
     --bg: var(--dark-bg);
     --text: var(--dark-text);
+    --text-secondary: var(--dark-text);
     --text-primary: var(--dark-text-primary);
+    --quote-bar: #ffffff61;
     --card-bg: var(--dark-card-bg);
     --card-head: var(--dark-card-head);
     --card-text: var(--dark-card-text);
     --logo-top: var(--dark-logo-top);
     --logo-bottom: var(--dark-logo-bottom);
+    --pre-bg: var(--dark-pre-bg);
+    --pre-border-color: var(--dark-pre-border);
+    --scrollbar: #ffffff11;
 }