automatic light/dark theme

Author: alichraghi

assets/main.scss

@@ -4,10 +4,15 @@ html, body {
     margin: 0;
     padding: 0;
 
-    background: #0f0f0f;
-    color: #ccc;
+    background: white;
+    color: #0f0f0f;
     font-family: Orbitron;
     line-height: 1.3;
+
+    @media (prefers-color-scheme: dark) {
+        background: #0f0f0f;
+        color: #ccc;
+    }
 }
 body {
     display: flex;
@@ -28,7 +33,11 @@ a, a:hover, a:visited {
     color: #c18004;
 }
 blockquote {
-    color: grey;
+    color: #646464;
+
+    @media (prefers-color-scheme: dark) {
+        color: grey;
+    }
 }
 
 h1,h2,h3,h4,h5,h6 {
@@ -46,6 +55,18 @@ p {
     filter: invert(100%);
 }
 
+.color-auto {
+    @media (prefers-color-scheme: dark) {
+        filter: invert(100%);
+    }
+}
+
+.color-auto-light {
+    @media (prefers-color-scheme: light) {
+        filter: invert(100%);
+    }
+}
+
 .navbar {
     .content {
         display: flex;
@@ -69,11 +90,11 @@ p {
             text-decoration: none;
         }
         .logo, .logo:hover, .logo:visited {
-            color: #d7d7d7 !important;
+            color: #7a7a7a !important;
         }
         .logo>img {
             vertical-align: middle;
-            filter: invert(100%);
+            @extend .color-auto;
             height: 30px;
         }
         &>div>a {
@@ -83,7 +104,11 @@ p {
             padding-right: 1rem;
             padding-left: 1rem;
             &:hover, &:active {
-                background: #515151;
+                background: #ccc;
+                
+                @media (prefers-color-scheme: dark) {
+                    background: #515151;
+                }
             }
         }
     }
@@ -174,9 +199,13 @@ main {
 }
 
 article>.title>a {
-    color: #ccc;
+    color: #0f0f0f;
     font-size: 36px;
     text-decoration: none;
+                
+    @media (prefers-color-scheme: dark) {
+        color: #ccc;
+    }
 }
 article>.title>a:hover {
     color: #c18004;
@@ -188,11 +217,19 @@ article .description {
     padding-bottom: 0.5rem;
 }
 article .description, p {
-    color: #ccc;
+    color: #0f0f0f;
+
+    @media (prefers-color-scheme: dark) {
+        color: #ccc;
+    }
 }
 article>.post-footer {
-    color: #b4b4b4;
+    color: #6d6d6d;
     font-size: 14px;
+
+    @media (prefers-color-scheme: dark) {
+        color: #b4b4b4;
+    }
 }
 article .category {
     text-decoration: none;
@@ -246,8 +283,12 @@ article .category:hover {
     margin-top: 1rem;
 }
 .single>.header .metadata {
-    color: #b4b4b4;
+    color: #6d6d6d;
     font-size: 14px;
+
+    @media (prefers-color-scheme: dark) {
+        color: #b4b4b4;
+    }
 }
 .hanchor {
     text-decoration: none;
@@ -257,12 +298,15 @@ code {
     text-align: left;
     border-radius: 4px;
     font-size: 14px;
-    padding: 0.15rem;
     padding-left: 0.3rem;
     padding-right: 0.3rem;
 
-    background: black;
+    background: white;
     border: 1px solid #3b3c38;
+
+    @media (prefers-color-scheme: dark) {
+        background: black;
+    }
 }
 h2>code {
     font-size: unset;
@@ -292,6 +336,10 @@ pre {
     background: black !important;
     overflow: auto;
     border: 1px solid #3b3c38;
+    
+    @media (prefers-color-scheme: light) {
+        color: white;
+    }
 }
 details {
     margin-top: 1rem;
@@ -346,7 +394,11 @@ td, th {
     padding: 0.5rem;
 }
 tr:nth-child(even) {
-    background: #3b3c38;
+    background: white;
+    
+    @media (prefers-color-scheme: dark) {
+        background: #3b3c38;
+    }
 }
 th {
     padding-top: 1rem;

content/2021/mach-engine-the-future-of-graphics-with-zig.md

@@ -16,15 +16,15 @@ In the coming months, we'll begin to have truly cross-platform low-level graphic
 
 ## Mach engine
 
-<img class="color-inverted" alt="Mach: Game engine & graphics toolkit for the future" src="https://user-images.githubusercontent.com/3173176/137651926-3734c3b2-4875-47de-b42f-0ece854756f7.png">
+<img class="color-auto" alt="Mach: Game engine & graphics toolkit for the future" src="https://user-images.githubusercontent.com/3173176/137651926-3734c3b2-4875-47de-b42f-0ece854756f7.png">
 
 I've been working on [Mach Engine](https://github.com/hexops/mach) for about 4 months now, although it as a project is many years in the making, and I believe in the next 4-6 months we'll have completion of the first key milestone: truly cross platform graphics and seamless cross compilation.
 
 ## Vision
 
 Today, I share only the first milestone: Mach engine core. I've been working on this for around 1 year now, and we're close (maybe 4-6 months away) from completion:
 
-<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137649720-072ff7fe-323d-49c6-ae88-51344e04e3e5.png"><img class="color-inverted" alt="Zero fuss installation, out of the box cross compilation, and a truly cross-platform graphics API" src="https://user-images.githubusercontent.com/3173176/137649720-072ff7fe-323d-49c6-ae88-51344e04e3e5.png"></a>
+<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137649720-072ff7fe-323d-49c6-ae88-51344e04e3e5.png"><img class="color-auto" alt="Zero fuss installation, out of the box cross compilation, and a truly cross-platform graphics API" src="https://user-images.githubusercontent.com/3173176/137649720-072ff7fe-323d-49c6-ae88-51344e04e3e5.png"></a>
 
 ## Zero fuss installation & cross compilation
 
@@ -41,15 +41,15 @@ We're able to achieve this thanks to two things:
 
 Imagine a low-level, little to no overhead graphics API that unifies DirectX, Metal, Vulkan, and OpenGL (if no others are available):
 
-<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137646296-72ba698e-c710-4daf-aa75-222f8d717d00.png"><img class="color-inverted" alt="Simple, low-level unified graphics API mapping to DirectX 12, Metal, Vulkan, and OpenGL" src="https://user-images.githubusercontent.com/3173176/137646296-72ba698e-c710-4daf-aa75-222f8d717d00.png"></a>
+<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137646296-72ba698e-c710-4daf-aa75-222f8d717d00.png"><img class="color-auto" alt="Simple, low-level unified graphics API mapping to DirectX 12, Metal, Vulkan, and OpenGL" src="https://user-images.githubusercontent.com/3173176/137646296-72ba698e-c710-4daf-aa75-222f8d717d00.png"></a>
 
 _This isn't anything new:_ all modern engines provide this, Godot has been working towards this for _years_ (and still is), and there exist abstraction layers for Vulkan over most of these APIs as well.
 
 ### Vendor support
 
 **An API is only as good as the momentum behind it.** What modern API can target the largest array of platforms with the most vendor backing?
 
-<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137647361-3340e33a-9b2f-4c0d-aba5-6bb99ffd1cd8.png"><img class="color-inverted" alt="Google to Vulkan, Microsoft to DirectX, Apple to Metal, AMD and NVidia to everything." src="https://user-images.githubusercontent.com/3173176/137647361-3340e33a-9b2f-4c0d-aba5-6bb99ffd1cd8.png"></a>
+<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137647361-3340e33a-9b2f-4c0d-aba5-6bb99ffd1cd8.png"><img class="color-auto" alt="Google to Vulkan, Microsoft to DirectX, Apple to Metal, AMD and NVidia to everything." src="https://user-images.githubusercontent.com/3173176/137647361-3340e33a-9b2f-4c0d-aba5-6bb99ffd1cd8.png"></a>
 
 * **Microsoft sees DirectX as the future, not Vulkan.** (DirectX 13 is coming by the end of 2022.)
 * **Apple sees Metal as the future, not Vulkan.** OpenGL and OpenCL are deprecated, and private legal arguments with Khoronos make it unlikely we'll ever see OpenGL or Vulkan on Apple hardware ever again.
@@ -58,7 +58,7 @@ _This isn't anything new:_ all modern engines provide this, Godot has been worki
 
 ### One API that Apple, Microsoft, and Google can all agree on
 
-<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137647342-abf2bde6-a8bb-4276-b072-95c279c5d92f.png"><img class="color-inverted" alt="Mozilla, Google, Microsoft, Apple, and Intel all to WebGPU" src="https://user-images.githubusercontent.com/3173176/137647342-abf2bde6-a8bb-4276-b072-95c279c5d92f.png"></a>
+<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137647342-abf2bde6-a8bb-4276-b072-95c279c5d92f.png"><img class="color-auto" alt="Mozilla, Google, Microsoft, Apple, and Intel all to WebGPU" src="https://user-images.githubusercontent.com/3173176/137647342-abf2bde6-a8bb-4276-b072-95c279c5d92f.png"></a>
 
 Outside the bounds of traditional graphics APIs there exists an attempt to provide a unified API across all platforms, [WebGPU](https://en.wikipedia.org/wiki/WebGPU) (not to be confused with the much older _WebGL_).
 
@@ -68,7 +68,7 @@ The name _WebGPU_ might lead you to believe that this is only for browsers, and
 
 ### Apple & Google's role is what makes WebGPU unique, and why we chose it
 
-<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137648560-e15820d7-6427-4ebd-95bb-c7c9f026477a.png"><img class="color-inverted" alt="Khronos group out of the piture in the future" src="https://user-images.githubusercontent.com/3173176/137648560-e15820d7-6427-4ebd-95bb-c7c9f026477a.png"></a>
+<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137648560-e15820d7-6427-4ebd-95bb-c7c9f026477a.png"><img class="color-auto" alt="Khronos group out of the piture in the future" src="https://user-images.githubusercontent.com/3173176/137648560-e15820d7-6427-4ebd-95bb-c7c9f026477a.png"></a>
 
 What is new about WebGPU in my view is the vendors playing key roles in its development, and the fact that it grew outside the Khronos Group.
 
@@ -121,7 +121,7 @@ Although abstraction layers over modern graphics APIs are nothing new - as Apple
 
 Today, we have cross-compilation of GLFW on all desktop OSs working out of the box with nothing more than `zig` and `git`:
 
-<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137650099-cd370046-eb43-4fe4-a72a-f54ebe3153c1.png"><img class="color-inverted" alt="Cross compilation from Mac, Linux, and Windows to eachother on all major architectures." src="https://user-images.githubusercontent.com/3173176/137650099-cd370046-eb43-4fe4-a72a-f54ebe3153c1.png"></a>
+<a class="imglink" href="https://user-images.githubusercontent.com/3173176/137650099-cd370046-eb43-4fe4-a72a-f54ebe3153c1.png"><img class="color-auto" alt="Cross compilation from Mac, Linux, and Windows to eachother on all major architectures." src="https://user-images.githubusercontent.com/3173176/137650099-cd370046-eb43-4fe4-a72a-f54ebe3153c1.png"></a>
 
 This involved:
 

content/2021/terrifying-parallels-between-tech-and-aerospace.md

@@ -21,7 +21,7 @@ Software engineering is one of the most lucrative careers of our era. Most in ou
 
 The sheer scale of money pouring into SV and other tech hubs worldwide is unfathomable even to many making six-figure salaries in tech, there is more money than there are good ideas-and it shows (looking at you, [Juicera](https://www.juicera.com/).)
 
-<img class="color-inverted" src="https://user-images.githubusercontent.com/3173176/142679500-29ebcaf2-9d57-4dad-8e35-c1a60bffd793.png">
+<img class="color-auto" src="https://user-images.githubusercontent.com/3173176/142679500-29ebcaf2-9d57-4dad-8e35-c1a60bffd793.png">
 
 ## How the aviation industry eerily reflects the tech industry
 
@@ -33,11 +33,11 @@ This industry-wide push came about because the aerospace industry realized their
 
 If you think Boeing’s 747 MAX disaster was the downfall of the aerospace industry, you need to think again. There are things you’re not going to find in the news that happened much earlier according to people that were there.
 
-<img class="color-inverted" src="https://user-images.githubusercontent.com/3173176/142681033-f26e31ea-8384-4034-83e0-17c293c10422.png">
+<img class="color-auto" src="https://user-images.githubusercontent.com/3173176/142681033-f26e31ea-8384-4034-83e0-17c293c10422.png">
 
 (Despite my mother’s internship being 30 years ago, she is still hesitant to publicly name the company involved and at her request I redacted the name.)
 
-<img class="color-inverted" src="https://user-images.githubusercontent.com/3173176/142681141-eabbdae3-8f3d-4af4-be8a-1d88a81f1e5e.png">
+<img class="color-auto" src="https://user-images.githubusercontent.com/3173176/142681141-eabbdae3-8f3d-4af4-be8a-1d88a81f1e5e.png">
 
 The stress my father’s job imposed upon him changed him (or rather, brought out another side of him.) Most of my memories with him involved verbal and heavily emotional fights, as well as arguments between him, myself, and family members. Most of the time I spent with him in public, he was making some poor customer service worker’s life a living hell (and he enjoyed it.)
 
@@ -51,7 +51,7 @@ When I look at the state of the tech industry today and see pushes for location-
 
 ## Have we reached a plateau?
 
-<img class="color-inverted" src="https://user-images.githubusercontent.com/3173176/142683055-c24a21ce-542a-400f-9c5a-04188d8d31e2.png">
+<img class="color-auto" src="https://user-images.githubusercontent.com/3173176/142683055-c24a21ce-542a-400f-9c5a-04188d8d31e2.png">
 
 Major economic forces have been pushing the idea that everyone should learn to code for many, many years now, [Gates and Zuckerberg were pushing the idea that every child should learn to code back in 2013](https://www.cnn.com/2013/02/27/tech/innovation/code-video-gates-zuckerberg/index.html) and likely long before that. (Awkward disclaimer, my day job is at a startup focused on this too)
 
@@ -69,7 +69,7 @@ We have a representation of what being a coder could look like in the future: th
 
 The future of being a coder, I think, looks an awful lot like being a game developer looks like today.
 
-<img class="color-inverted" src="https://user-images.githubusercontent.com/3173176/142684131-097dbaa9-1843-4aa6-aacf-5089600bbb0f.png">
+<img class="color-auto" src="https://user-images.githubusercontent.com/3173176/142684131-097dbaa9-1843-4aa6-aacf-5089600bbb0f.png">
 
 Enter a behemoth organization and hope to achieve anything noteworthy among the swaths of so many other coders that your contributions are nearly worthless, or go to a smaller company because you are young, bubbly-eyed, and believe there is a family to be had there all while it being demanded you achieve unreasonable amounts of work with a high likelihood that the company fails in the end. You get to choose. You wish you could go at it alone, you have dreams and aspirations of doing just that, but you need to pay the bills somehow. Perhaps you’re just out of school, and so you manage Active Directory for a company instead.
 
@@ -79,15 +79,15 @@ Maybe you do have a truly good idea, but you don’t have access to investors an
 
 The squashing of independent ideas and independent business models creates opportunities for monopolistic enterprises to effectively _own people_ and _own their success_ while divesting risk fully to individuals.
 
-<img class="color-inverted" src="https://user-images.githubusercontent.com/3173176/142683218-8f4949aa-7937-4e58-b2bc-5862ae68b2fa.png">
+<img class="color-auto" src="https://user-images.githubusercontent.com/3173176/142683218-8f4949aa-7937-4e58-b2bc-5862ae68b2fa.png">
 
 Once the plateau for any of these markets is reached (or if platforms realize that we’re not going to see a winner-take-all market for that area?), then profit extraction should begin and we will see middlemen shift to maximal extraction of taxes from their platform while producers only begin to realize how minute they have become. New platforms will appear, such as the YouTube competitors pushed by creators today, but they’ll mostly be in-vain attempts to regain some control of the customers they now realize they have no untaxed access to.
 
 This approach of tech business is accelerating. When we hear “every company is becoming a tech company”, this is a core model being described and it’s not fundamentally different from the outsourcing of manufacturing jobs to third-world countries we did historically-the only difference is we’re seeing the outsourcing the production of _everything_ and instead of it being cheaper because we avoid safety regulations, it’s cheaper because individuals who are their own “companies” and are forced to assume all risk of producing new things or lose out on the market entirely. Reward must be divested to the platform they are beholden to.
 
 ## Does capitalism necessarily have to be bad for society?
 
-<img class="color-inverted" src="https://user-images.githubusercontent.com/3173176/142684228-bf1d41e5-ca25-4497-978c-d82c29c7682e.png">
+<img class="color-auto" src="https://user-images.githubusercontent.com/3173176/142684228-bf1d41e5-ca25-4497-978c-d82c29c7682e.png">
 
 At this point, you probably think I hold deeply anti-capitalistic views. I don’t, I hold more nuanced views than that. But I do despise the monopolistic tendencies of corporations. It’s the lack of distributed opportunity within a capitalist society that I believe is bad.