<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="FeedCreator 1.8" -->
<rss version="2.0">
    <channel xmlns:g="http://base.google.com/ns/1.0">
        <title>Linkblog</title>
        <description></description>
        <link></link>
        <lastBuildDate>Thu, 16 Jul 2026 08:25:19 +0000</lastBuildDate>
        <generator>FeedCreator 1.8</generator>
        <item>
            <title>Zig Creator Calls Spade a Spade, Anthropic Blows Smoke</title>
            <link>https://raymyers.org/post/zed-creator-calls-spade-a-spade/</link>
            <description>&lt;blockquote&gt;&amp;quot;In the AI bubble, we are pressured to build things nobody wants, poorly. Pop the bubble.&amp;quot;&lt;hr&gt;&lt;/blockquote&gt;&lt;div&gt;	&lt;a href=&quot;/post/zig-creator-calls-spade-a-spade&quot;&gt;Redirecting from &lt;code&gt;/post/zed-creator-calls-spade-a-spade/&lt;/code&gt; to &lt;code&gt;/post/zig-creator-calls-spade-a-spade&lt;/code&gt;&lt;/a&gt;&lt;/div&gt;</description>
            <pubDate>Mon, 13 Jul 2026 09:29:25 +0000</pubDate>
            <guid>https://raymyers.org/post/zed-creator-calls-spade-a-spade/</guid>
        </item>
        <item>
            <title>Garbage for humans</title>
            <link>https://unstory.eu/zye/</link>
            <description>&lt;blockquote&gt;&lt;hr&gt;&lt;/blockquote&gt;&lt;div&gt;
&lt;header&gt;
&lt;p&gt;&lt;a href=&quot;/&quot;&gt;unstory&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;If this is the solution, I want my problem back.&lt;/p&gt;
&lt;/header&gt;
&lt;main&gt;
&lt;article&gt;
&lt;header&gt;

&lt;time datetime=&quot;2026-06-29T01:49:08Z&quot;&gt;2026-06-29 01:49&lt;/time&gt;
&lt;/header&gt;
&lt;p&gt;Few months ago Cloudflare introduced Markdown for machines:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;As a business, to continue to stay ahead, now is the time to consider not just human visitors, or traditional wisdom for SEO-optimization, but start to treat agents as first-class citizens.&lt;/p&gt;&lt;/blockquote&gt;
&lt;blockquote&gt;&lt;p&gt;Feeding raw HTML to an AI is like paying by the word to read packaging instead of the letter inside.&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;You get HTML, trackers, cookie banners, popups, and JavaScript. This needs a browser built by thousands of engineers just to show you a paragraph.&lt;/p&gt;
&lt;p&gt;Machines get the clean version.&lt;/p&gt;
  &lt;/article&gt;
&lt;/main&gt;

&lt;/div&gt;</description>
            <pubDate>Sat, 11 Jul 2026 06:31:20 +0000</pubDate>
            <guid>https://unstory.eu/zye/</guid>
        </item>
        <item>
            <title>The AI Hype Reckoning Is Upon Us</title>
            <link>https://karlbode.com/the-ai-hype-reckoning-is-upon-us/</link>
            <description>&lt;blockquote&gt;&lt;hr&gt;&lt;/blockquote&gt;&lt;div id=&quot;site-main&quot;&gt;
&lt;article&gt;

    &lt;header&gt;

        

        

            &lt;p&gt;The massive chasm between AI hype and reality is finally reaching the breaking point.&lt;/p&gt;

        &lt;section&gt;

            &lt;ul&gt;
                &lt;li&gt;
                    &lt;a href=&quot;/author/karl-2/&quot; aria-label=&quot;Read more of Karl Bode&quot;&gt;
                        &lt;img src=&quot;https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/size/w100/2026/02/625089911_10162538931535036_3519502615880864111_n-1-1.jpg&quot; alt=&quot;Karl Bode&quot; loading=&quot;eager&quot;&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;

            

        &lt;/section&gt;

            &lt;figure&gt;
                &lt;img srcset=&quot;https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/size/w300/2026/07/HAL9000.webp 300w,
                            https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/size/w600/2026/07/HAL9000.webp 600w,
                            https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/size/w1000/2026/07/HAL9000.webp 1000w,
                            https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/size/w2000/2026/07/HAL9000.webp 2000w&quot; sizes=&quot;(min-width: 1400px) 1400px, 92vw&quot; src=&quot;https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/size/w2000/2026/07/HAL9000.webp&quot; alt=&quot;The AI Hype Reckoning Is Upon Us&quot; fetchpriority=&quot;high&quot; loading=&quot;eager&quot;&gt;
                    &lt;figcaption&gt;&lt;span&gt;that is an amazing idea and you are a genius, dave&lt;/span&gt;&lt;/figcaption&gt;
            &lt;/figure&gt;

    &lt;/header&gt;

    &lt;section&gt;
        &lt;p&gt;We&#039;re living in split realities. &lt;/p&gt;&lt;div&gt;&lt;p&gt;There&#039;s what modern software is &lt;em&gt;actually capable of&lt;/em&gt;, and then there&#039;s the gargantuan pile of &quot;AI&quot; hype, fraud, and bullshit our biggest tech companies (and their &lt;a href=&quot;https://karlbode.com/ceo-said-a-thing-journalism/&quot; rel=&quot;noreferrer&quot;&gt;lazy enablers in the tech press&lt;/a&gt;) have shoveled down the public&#039;s throat for the better part of the last five years. &lt;/p&gt;&lt;p&gt;There&#039;s useful &lt;em&gt;automation software that makes it easier to code, draft a new resume, or study vast repositories of scientific knowledge&lt;/em&gt;. And then there&#039;s a parade of &lt;a href=&quot;https://karlbode.com/the-spacex-ipo-is-a-giant-unworkable-con-orchestrated-by-an-overt-white-supremacist-huckster/&quot; rel=&quot;noreferrer&quot;&gt;technofascist hucksters&lt;/a&gt; lying to your face about the imminent arrival of omniscient, sentient, paradigm-rattling supercomputers. &lt;/p&gt;&lt;/div&gt;&lt;p&gt;There&#039;s a &lt;em&gt;tremendous chasm&lt;/em&gt; between these two things. And everywhere you look you can see evidence that we&#039;ve reached a breaking point when it comes to reconciling these two wildly-different realities. &lt;/p&gt;&lt;p&gt;Over at Ford Motor Company, executives recently fired a bunch of engineers and rushed madly into widespread AI adoption, only to discover the software made constant quality control mistakes, resulting in them having to &lt;a href=&quot;https://www.bbc.com/news/articles/cgrkd41n2v9o?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;rehire a lot of the engineers they previously shitcanned&lt;/a&gt;:&lt;/p&gt;&lt;blockquote&gt;&quot;Mistakenly, we thought that by just introducing artificial intelligence and ingesting the design requirements that we had, that would produce a high-quality product,&quot; he said.&lt;/blockquote&gt;&lt;p&gt;Wonder where they might have gotten that idea.&lt;/p&gt;&lt;blockquote&gt;&quot;Over prior years, we didn&#039;t pay as much attention as we should have to the experience of our most knowledgeable engineers that have been with us through many product cycles,&quot; he said.&lt;/blockquote&gt;&lt;div&gt;&lt;p&gt;A few years ago, corporate media owners also began rushing face-first into AI adoption in newsrooms, &lt;em&gt;very excited&lt;/em&gt; about the potential to cut corners, automate their clickbait, and replace pesky human journalists with magic &lt;em&gt;software&lt;/em&gt;.&lt;/p&gt;&lt;p&gt;They were so excited by the promise of not having to pay human beings a living wage or health insurance, they didn&#039;t really bother to make sure the technology worked or could be &lt;a href=&quot;https://arstechnica.com/health/2023/11/ai-with-90-error-rate-forces-elderly-out-of-rehab-nursing-homes-suit-claims/?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;responsibly integrated into existing, broken systems&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;It...didn&#039;t go well. &lt;/p&gt;&lt;p&gt;The AI outputs contained so many &lt;a href=&quot;https://www.theverge.com/2023/1/25/23571082/cnet-ai-written-stories-errors-corrections-red-ventures?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;factual errors&lt;/a&gt;, &lt;a href=&quot;https://futurism.com/cnet-ai-plagiarism?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;instances of plagiarism&lt;/a&gt;, or &lt;a href=&quot;https://www.cnn.com/2025/01/16/media/apple-ai-news-fake-headlines?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;outright falsehoods&lt;/a&gt;, that newsrooms found they had to &lt;em&gt;pay significantly more money for human editors to come in and fix all the problems&lt;/em&gt;. You&#039;ve seen the same problems bubble up in academia, health care, and everywhere else. &lt;/p&gt;&lt;p&gt;It&#039;s gotten so bad that innovation-drunk MBA types are now having to come to terms with the fact that automation software is &lt;a href=&quot;https://karlbode.com/your-software-is-not-sentient/&quot; rel=&quot;noreferrer&quot;&gt;neither sentient nor magic&lt;/a&gt;, contrary to the claims of Elon Musk and Sam Altman. This reconciliation is creating no limit of suffering and entertainment value, simultaneously.&lt;/p&gt;&lt;p&gt;And there&#039;s some absolutely fascinating &lt;em&gt;layers&lt;/em&gt; to the dysfunction. &lt;/p&gt;&lt;p&gt;One recent study on AI &quot;efficiency&quot; &lt;a href=&quot;https://hbr.org/2025/09/ai-generated-workslop-is-destroying-productivity?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;out of Stanford&lt;/a&gt; found that the introduction of a flood of rushed and factually-incorrect AI slop into workflows actually results in human beings &lt;em&gt;having to work harder than ever&lt;/em&gt;:&lt;/p&gt;&lt;/div&gt;&lt;blockquote&gt;&lt;em&gt;“When coworkers receive workslop, they are often required to take on the burden of decoding the content, inferring missed or false context. A cascade of effortful and complex decision-making processes may follow, including rework and uncomfortable exchanges with colleagues.”&lt;/em&gt;&lt;/blockquote&gt;&lt;p&gt;As the Harvard Business Review notes, this hyperscaled introduction of pseudo-efficiency workslop results not just in new conflict and a bunch of wasted time for people, but a sort of broader &quot;&lt;a href=&quot;https://futurism.com/future-society/companies-embraced-ai-rotting-away?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;knowledge decay&lt;/a&gt;&quot; that introduces the potential for organizational downward spirals:&lt;/p&gt;&lt;blockquote&gt;“Errors compound and pile up. Trust in information erodes. People spend more time verifying facts or risk costly and dangerous mistakes. Eventually, people start to lose trust in the processes that they rely on to do their jobs.”&lt;/blockquote&gt;&lt;p&gt;That is, so we&#039;re clear, not the future we were promised. &lt;strong&gt;That&lt;/strong&gt; future was a lie built by people who &lt;a href=&quot;https://www.cnn.com/2025/03/05/politics/elon-musk-rogan-interview-empathy-doge?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;don&#039;t believe in empathy&lt;/a&gt; and have never cracked a sociology textbook. It was a mirage built by dull and greedy egomaniacs who don&#039;t actually care about other human beings – or if the products they&#039;re selling actually work.&lt;/p&gt;&lt;p&gt;There&#039;s just endless examples of this, like &lt;a href=&quot;https://www.theguardian.com/technology/2026/apr/14/ai-productivity-workplace-errors?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;this employee of a Miami-based cybersecurity firm&lt;/a&gt;, who noted his boss fired a bunch of employees, replaced them with AI, and immediately made everybody&#039;s lives harder:&lt;/p&gt;&lt;blockquote&gt;“Quality decreased significantly, time to produce a piece of content increased significantly and, most importantly, morale decreased,” said the copywriter, who spoke under a pseudonym for fear of losing his job. “Everything got a whole lot worse once they rolled out AI.” Ken said the company’s executives shifted the blame to staff when they pushed back about AI-fueled productivity decreases.&lt;/blockquote&gt;&lt;p&gt;You&#039;ve got a lot of bosses, many of them already wildly out of touch due to class and privilege, now making bad decisions &lt;em&gt;not just based on their misrepresented understanding of what modern software is capable of&lt;/em&gt;, but because they&#039;re using AI chatbots as a sort of delusion confirmation machine:&lt;/p&gt;&lt;figure&gt;&lt;a href=&quot;https://bsky.app/profile/normative.bsky.social/post/3mpqru7yy7s2k?ref=karlbode.com&quot;&gt;&lt;img src=&quot;https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/2026/07/Screenshot-2026-07-08-075734.png&quot; alt loading=&quot;lazy&quot; width=&quot;1126&quot; height=&quot;716&quot; srcset=&quot;https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/size/w600/2026/07/Screenshot-2026-07-08-075734.png 600w, https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/size/w1000/2026/07/Screenshot-2026-07-08-075734.png 1000w, https://storage.ghost.io/c/1e/2a/1e2a2e91-8628-484d-9ef2-79e3faad6ecf/content/images/2026/07/Screenshot-2026-07-08-075734.png 1126w&quot; sizes=&quot;(min-width: 720px) 720px&quot;&gt;&lt;/a&gt;&lt;figcaption&gt;&lt;span&gt;click to read on Bluesky&lt;/span&gt;&lt;/figcaption&gt;&lt;/figure&gt;&lt;blockquote&gt;In one video, which has 30,000 views on TikTok, a young woman becomes increasingly exasperated as she attempts to convince the AI that she wants a caramel ice cream, only for it to add multiple stacks of butter to her order.&lt;/blockquote&gt;&lt;blockquote&gt;In another, which has 360,000 views, a person claims that her order got confused with one being made by someone else, resulting in nine orders of tea being added to her bill.&lt;/blockquote&gt;&lt;div&gt;&lt;p&gt;Or Taco Bell, which also had to shut down their AI kiosk experiments after folks easily tricked the computer into trying to dole out &lt;a href=&quot;https://www.bbc.com/news/articles/ckgyk2p55g8o?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;18,000 cups of water&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;Mirroring the experience at Ford, the Commonwealth Bank of Australia and IBM also both fired a bunch of employees only to realize that their software replacements &lt;a href=&quot;https://www.cnbc.com/2026/07/01/employers-who-laid-off-workers-for-ai-are-reversing-their-decisions.html?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;weren&#039;t anywhere near ready for the job&lt;/a&gt;:&lt;/p&gt;&lt;/div&gt;&lt;blockquote&gt;&lt;em&gt;&quot;According to an ABC&amp;nbsp;&lt;/em&gt;&lt;a href=&quot;https://www.abc.net.au/news/2025-08-21/cba-backtracks-on-ai-job-cuts-as-chatbot-lifts-call-volumes/105679492?ref=karlbode.com&quot;&gt;&lt;em&gt;report&lt;/em&gt;&lt;/a&gt;&lt;em&gt;&amp;nbsp;in August last year, CBA admitted it “did not adequately consider all relevant business considerations” when announcing the redundancies and acknowledged “we should have been more thorough in our assessment of the roles required.”&lt;/em&gt;&lt;/blockquote&gt;&lt;p&gt;Perhaps you are detecting a theme. &lt;/p&gt;&lt;p&gt;So you get ample myopia among management types who already hate labor, and are obsessed with the idea of saving a ton of money and firing people via AI. &lt;/p&gt;&lt;p&gt;But they&#039;re also using AI for high-level decision-making without functional skepticism or introspection, resulting in stories like &lt;a href=&quot;https://slate.com/technology/2026/04/ai-chatgpt-boss-employees-work.html?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;this one&lt;/a&gt; or &lt;a href=&quot;https://futurism.com/artificial-intelligence/bosses-obsessed-with-ai?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;this one&lt;/a&gt; featuring incoherent directives by bosses who are dunktanking themselves into deep webs of pseudo-innovative delusion without understanding it&#039;s even happening:&lt;/p&gt;&lt;blockquote&gt;“I got feedback to be more concise at work, yet am routinely sent copypasta from ChatGPT that is literally the longest shit known to man,” said Mel, who works in finance. “I can’t read it.” As a result, the work of deciphering—and sometimes fixing—a boss’s A.I. effort becomes an additional task on an employee’s plate.&lt;/blockquote&gt;&lt;p&gt;You&#039;ll see this again and again; bosses who weren&#039;t good managers to begin with, that double down on bad decisions &lt;a href=&quot;https://futurism.com/artificial-intelligence/bosses-obsessed-with-ai?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;because the computer autocomplete told them their gut instincts were spot on&lt;/a&gt;:&lt;/p&gt;&lt;blockquote&gt;“My view of AI was very different from my supervisor’s. I saw it as a tool that could help analyze information, find patterns, and make funny cat meme pictures,” said one worker, an IT staffer at a tech company. “He seemed to use it more as a digital priest whose primary purpose was to confirm that he was right and everyone else was mistaken.”&lt;/blockquote&gt;&lt;div&gt;&lt;p&gt;There&#039;s a lot of other fascinating but poorly understood subtlety as it relates to the rushed adoption. This Boston University &lt;a href=&quot;https://ide.mit.edu/insights/adding-ai-to-the-org-chart-do-it-with-intention/?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;study&lt;/a&gt;, for example, found that managers were 18 percent less likely to catch errors generated in outputs if they were told it was crafted by an &quot;AI employee&quot; (with a name like Jack-7) versus an &quot;AI tool.&quot;&lt;/p&gt;&lt;p&gt;Strange days.&lt;/p&gt;&lt;p&gt;Keep in mind that so far we&#039;re just talking about whether AI works as advertised and whether your boss &lt;em&gt;has maintained a functional tether to objective reality&lt;/em&gt;. &lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;p&gt;We&#039;re not even talking about the &lt;a href=&quot;https://gizmodo.com/when-it-comes-to-energy-use-ai-agents-could-make-chatbots-look-like-pocket-calculators-2000781774?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;massive resources being consumed&lt;/a&gt; to make such errors, the &lt;a href=&quot;https://karlbode.com/big-tech-and-the-trump-admin-want-to-make-ai-data-center-opposition-a-chinese-criminal-conspiracy/&quot; rel=&quot;noreferrer&quot;&gt;environmental and climate data center impact&lt;/a&gt;, the precarious impact of AI &lt;a href=&quot;https://www.npr.org/sections/shots-health-news/2025/09/19/nx-s1-5545749/ai-chatbots-safety-openai-meta-characterai-teens-suicide?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;on mental health&lt;/a&gt; in a country without consistent mental health care, the &lt;a href=&quot;https://nymag.com/intelligencer/article/ai-inflation-is-screwing-with-the-rest-of-the-economy.html?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;massively higher consumer costs due to GPU and chip scarcity&lt;/a&gt;, the &lt;a href=&quot;https://www.404media.co/ai-is-african-intelligence-the-workers-who-train-ai-are-fighting-back/?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;abusive overseas labor exploitation&lt;/a&gt; needed to make a lot of the magic happen, the &lt;a href=&quot;https://www.reddit.com/r/BetterOffline/comments/1ulm3a6/ed_zitron_on_cnbc_generative_ais_business_model/?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;soaring enterprise costs of AI use&lt;/a&gt; due to funny math and unrealistic business models, the impact on the livelihoods of &lt;a href=&quot;https://medium.com/@api_89351/ai-is-killing-illustration-jobs-and-were-all-pretending-to-care-f0495e3f1f85?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;creatives&lt;/a&gt; and &lt;a href=&quot;https://www.techdirt.com/2024/07/18/the-real-money-in-modern-journalism-now-involves-filling-the-internet-with-ai-generated-garbage/?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;journalists&lt;/a&gt;, the fact that &lt;a href=&quot;https://karlbode.com/whoops-the-tech-press-mythologized-another-unethical-asshole/&quot; rel=&quot;noreferrer&quot;&gt;most&lt;/a&gt; of the folks in charge of AI&#039;s trajectory are unrepentant fascist &lt;a href=&quot;https://karlbode.com/the-press-is-still-propping-up-elon-musks-supergenius-engineer-mythology/&quot; rel=&quot;noreferrer&quot;&gt;sociopaths&lt;/a&gt;, or the fact that corruption has hollowed out U.S. AI, labor, environmental, consumer, and public safety regulators &lt;a href=&quot;https://karlbode.com/corruption-killed-the-u-s-government-and-the-press-was-complicit/&quot; rel=&quot;noreferrer&quot;&gt;like a pumpkin&lt;/a&gt;, leaving the entire economy at risk of collapse.&lt;/p&gt;&lt;p&gt;Our &quot;&lt;a href=&quot;https://karlbode.com/ceo-said-a-thing-journalism/&quot; rel=&quot;noreferrer&quot;&gt;CEO said a thing!&lt;/a&gt;&quot; corporate press doesn&#039;t really want to brutally engage with these broader pesky ethical ramifications, because that&#039;s not in ownership&#039;s financial best interests. So on top of everything else, we have a badly-automated news and media apparatus that&#039;s &lt;strong&gt;also&lt;/strong&gt; incapable of telling people the truth. &lt;/p&gt;&lt;p&gt;The result is deep, interlocking delusions in a country &lt;a href=&quot;https://karlbode.com/ai-artifice-and-authenticity/&quot; rel=&quot;noreferrer&quot;&gt;already being devoured by artifice&lt;/a&gt;. &lt;/p&gt;&lt;p&gt;The sales pitch for AI is heavily predicated on the fact that this is all a profitable and sustainable venture that evolves into computerized sentience, and there&#039;s &lt;em&gt;simply no evidence that&#039;s true&lt;/em&gt;. These models are all absurdly expensive to run, and the &lt;a href=&quot;https://karlbode.com/ai-artifice-and-authenticity/&quot; rel=&quot;noreferrer&quot;&gt;mad dash toward pseudo-productivity&lt;/a&gt; masked the reality that execs blew gargantuan wads of cash on &lt;a href=&quot;https://www.businessinsider.com/uber-coo-andrew-macdonald-ai-token-spending-harder-justify-2026-5?ref=karlbode.com&quot; rel=&quot;noreferrer&quot;&gt;negligible net benefit&lt;/a&gt; and a lot of chronic migraines.&lt;/p&gt;&lt;p&gt;Software automation can be helpful, but it helps if you&#039;re self-aware, not in a cult, trained to use it, inherently skeptical, and living in a society with working ethical and public interest guardrails that hasn&#039;t been devoured by artifice and corruption. &lt;/p&gt;&lt;/div&gt;&lt;p&gt;We ain&#039;t that.&lt;/p&gt;

&lt;small&gt;(Just a quick reminder that if you like and appreciate my work, please consider signing up for a &lt;a href=&quot;https://karlbode.com/#/portal/signup&quot;&gt;paid subscription tier&lt;/a&gt;. It genuinely helps me keep doing what I do in a country that doesn&#039;t value (or fund) journalism. Consider it the equivalent of buying me a coffee every month. I very much appreciate your time and readership!)&lt;/small&gt;


    &lt;/section&gt;

        

&lt;/article&gt;
&lt;/div&gt;</description>
            <pubDate>Thu, 09 Jul 2026 06:35:33 +0000</pubDate>
            <guid>https://karlbode.com/the-ai-hype-reckoning-is-upon-us/</guid>
        </item>
        <item>
            <title>Github repo pghqdev/OpenScreenShot</title>
            <link>https://github.com/pghqdev/OpenScreenShot</link>
            <description>&lt;div class=&quot;star js-feed-item-view&quot;&gt;&lt;div class=&quot;body&quot;&gt;
&lt;!-- watch --&gt;
&lt;div class=&quot;d-flex flex-items-baseline tmp-py-4&quot;&gt;
  &lt;div class=&quot;d-flex flex-column width-full&quot;&gt;
      &lt;div&gt;
        &lt;div class=&quot;d-flex flex-items-baseline&quot;&gt;
          &lt;div class=&quot;color-fg-muted&quot;&gt;
              &lt;span class=&quot;mr-2&quot;&gt;&lt;a class=&quot;d-inline-block&quot; href=&quot;https://github.com/splitbrain&quot; rel=&quot;noreferrer&quot;&gt;&lt;img class=&quot;avatar avatar-user&quot; src=&quot;https://avatars.githubusercontent.com/u/86426?s=64&amp;amp;v=4&quot; width=&quot;32&quot; height=&quot;32&quot; alt=&quot;@splitbrain&quot;&gt;&lt;/a&gt;&lt;/span&gt;
            &lt;a class=&quot;Link--primary no-underline wb-break-all&quot; href=&quot;https://github.com/splitbrain&quot; rel=&quot;noreferrer&quot;&gt;splitbrain&lt;/a&gt;
            starred
            &lt;a class=&quot;Link--primary no-underline wb-break-all&quot; href=&quot;https://github.com/pghqdev/OpenScreenShot&quot; rel=&quot;noreferrer&quot;&gt;pghqdev/OpenScreenShot&lt;/a&gt;
            &lt;span&gt;
              · &lt;relative-time tense=&quot;past&quot; datetime=&quot;2026-07-08T22:27:25-07:00&quot; data-view-component=&quot;true&quot;&gt;July 8, 2026 22:27&lt;/relative-time&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;Box tmp-p-3 mt-2 color-shadow-medium color-bg-overlay&quot;&gt;
        &lt;div&gt;
          &lt;div class=&quot;f4 lh-condensed text-bold color-fg-default&quot;&gt;
            &lt;a class=&quot;Link--primary text-bold no-underline wb-break-all d-inline-block&quot; href=&quot;https://github.com/pghqdev/OpenScreenShot&quot; rel=&quot;noreferrer&quot;&gt;pghqdev/OpenScreenShot&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;dashboard-break-word color-fg-muted mt-1 mb-0 repo-description&quot;&gt;
            &lt;p&gt;OpenScreenShot is a privacy-first, free, open-source screenshot extension — zero data leaves your device, no account needed, no telemetry, no third…&lt;/p&gt;
          &lt;/div&gt;

          &lt;p class=&quot;f6 color-fg-muted mt-2 mb-0&quot;&gt;
              &lt;span class=&quot;d-inline-block color-fg-muted tmp-mr-3&quot;&gt;
                &lt;span class=&quot;ml-0 tmp-ml-0&quot;&gt;
  &lt;span class=&quot;repo-language-color&quot;&gt;&lt;/span&gt;
  &lt;span itemprop=&quot;programmingLanguage&quot;&gt;TypeScript&lt;/span&gt;
&lt;/span&gt;

              &lt;/span&gt;

              &lt;span class=&quot;d-inline-block tmp-mr-3&quot;&gt;
                  &lt;a class=&quot;Link--muted&quot; href=&quot;https://github.com/pghqdev/OpenScreenShot/stargazers&quot; rel=&quot;noreferrer&quot;&gt;&lt;svg data-component=&quot;Octicon&quot; class=&quot;octicon octicon-star mr-1&quot; viewbox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;9&lt;/a&gt;
              &lt;/span&gt;


              &lt;span&gt;Updated Jul 7&lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;</description>
            <pubDate>Thu, 09 Jul 2026 05:27:25 +0000</pubDate>
            <guid>https://github.com/pghqdev/OpenScreenShot</guid>
        </item>
        <item>
            <title>Dark mode with web standards</title>
            <link>https://olliewilliams.xyz/blog/dark-mode/</link>
            <description>&lt;blockquote&gt;&lt;hr&gt;&lt;/blockquote&gt;&lt;div data-astro-cid-tldeq5d5&gt;&lt;article data-astro-cid-tldeq5d5&gt;&lt;div data-astro-cid-tldeq5d5&gt;
&lt;p&gt;Respecting the user’s OS setting is straightforward: use the &lt;code&gt;prefers-color-scheme&lt;/code&gt; media query in CSS. Arguably, that isn’t enough: users should also be able to customise their choice on a per-site basis. A user might want dark mode for the UI of an application, but light mode for reading long-form text on content-heavy sites, for example.&lt;/p&gt;
&lt;p&gt;We need to:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Support the user’s system setting as the default for when the user lands on our website for the first time&lt;/li&gt;
&lt;li&gt;Allow the user to override their system setting with a toggle in our application.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The color scheme of a web page can be set either via a HTML meta tag in the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; of the document or via the CSS &lt;code&gt;color-scheme&lt;/code&gt; property on the &lt;code&gt;html&lt;/code&gt; element. It can take time for CSS to load on slow connections, so using the meta tag is the recommended approach. When a user lands on your website for the first time, respect their system preference by setting &lt;code&gt;&amp;lt;meta name=&quot;color-scheme&quot; content=&quot;light dark&quot;&amp;gt;&lt;/code&gt;. To override the OS setting via a control in your web app or site, use JavaScript to update the &lt;code&gt;content&lt;/code&gt; attribute value to &lt;code&gt;light&lt;/code&gt; to force light mode, &lt;code&gt;dark&lt;/code&gt; to force dark mode, or &lt;code&gt;light dark&lt;/code&gt; to revert back to the OS setting.&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;js&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; metaTag&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; document.&lt;/span&gt;&lt;span&gt;querySelector&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&#039;[name=&quot;color-scheme&quot;]&#039;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;const&lt;/span&gt;&lt;span&gt; savedScheme&lt;/span&gt;&lt;span&gt; =&lt;/span&gt;&lt;span&gt; localStorage.&lt;/span&gt;&lt;span&gt;getItem&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;colorScheme&quot;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;if&lt;/span&gt;&lt;span&gt; (savedScheme) {metaTag.&lt;/span&gt;&lt;span&gt;setAttribute&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&#039;content&#039;&lt;/span&gt;&lt;span&gt;, savedScheme);}&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;btnlight.&lt;/span&gt;&lt;span&gt;addEventListener&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&#039;click&#039;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    metaTag.&lt;/span&gt;&lt;span&gt;setAttribute&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&#039;content&#039;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;&#039;light&#039;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    localStorage.&lt;/span&gt;&lt;span&gt;setItem&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;colorScheme&quot;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;&quot;light&quot;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;btndark.&lt;/span&gt;&lt;span&gt;addEventListener&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&#039;click&#039;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    metaTag.&lt;/span&gt;&lt;span&gt;setAttribute&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&#039;content&#039;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;&#039;dark&#039;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    localStorage.&lt;/span&gt;&lt;span&gt;setItem&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;colorScheme&quot;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;&quot;dark&quot;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;btnsystem.&lt;/span&gt;&lt;span&gt;addEventListener&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&#039;click&#039;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt;() {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    metaTag.&lt;/span&gt;&lt;span&gt;setAttribute&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&#039;content&#039;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;&#039;light dark&#039;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    localStorage.&lt;/span&gt;&lt;span&gt;removeItem&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;&quot;colorScheme&quot;&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;});&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h4 id=&quot;what-does-the-color-scheme-affect&quot;&gt;What does the &lt;code&gt;color-scheme&lt;/code&gt; affect?&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Colors, gradients, or images set via the &lt;code&gt;light-dark()&lt;/code&gt; CSS function&lt;/li&gt;
&lt;li&gt;System colors like &lt;code&gt;Canvas&lt;/code&gt; and &lt;code&gt;CanvasText&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Scrollbar colors&lt;/li&gt;
&lt;li&gt;The default colors of HTML elements like buttons&lt;/li&gt;
&lt;li&gt;iframes styles (so long as the iframe document has opted in via the meta tag)&lt;/li&gt;
&lt;li&gt;SVG’s that make use of &lt;code&gt;light-dark()&lt;/code&gt; or &lt;code&gt;prefers-color-scheme&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&quot;what-doesnt-color-scheme-affect&quot;&gt;What doesn’t &lt;code&gt;color-scheme&lt;/code&gt; affect?&lt;/h4&gt;
&lt;p&gt;There’s an unfortunate disconnect between &lt;code&gt;color-scheme&lt;/code&gt; and the &lt;code&gt;prefers-color-scheme&lt;/code&gt; media query. &lt;code&gt;prefers-color-scheme&lt;/code&gt; reflects the OS settings — regardless of the &lt;code&gt;color-scheme&lt;/code&gt; value. If you’re providing an in-page toggle that implements dark mode, you can’t adopt the &lt;code&gt;prefers-color-scheme&lt;/code&gt; media query.&lt;/p&gt;
&lt;p&gt;The following code is not be impacted by &lt;code&gt;color-scheme&lt;/code&gt;:&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;picture&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;  &amp;lt;&lt;/span&gt;&lt;span&gt;source&lt;/span&gt;&lt;span&gt; srcset&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;logo-dark.png&quot;&lt;/span&gt;&lt;span&gt; media&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;(prefers-color-scheme: dark)&quot;&lt;/span&gt;&lt;span&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;  &amp;lt;&lt;/span&gt;&lt;span&gt;img&lt;/span&gt;&lt;span&gt; src&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;logo-light.png&quot;&lt;/span&gt;&lt;span&gt; alt&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;Product logo&quot;&lt;/span&gt;&lt;span&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;picture&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Other than making use of a &lt;code&gt;background-image&lt;/code&gt;, there’s sadly not an equivalent approach to the &lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt; element that references the &lt;code&gt;color-scheme&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;There are two exceptions where &lt;code&gt;color-scheme&lt;/code&gt; will affect the &lt;code&gt;prefers-color-scheme&lt;/code&gt; media query:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;iframes&lt;/li&gt;
&lt;li&gt;SVG&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Below are two iframes that show the same document. The document inside the iframe is making use of the &lt;code&gt;prefers-color-scheme&lt;/code&gt; media query.&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;iframe&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;color-scheme: light;&quot;&lt;/span&gt;&lt;span&gt; src&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;/example.html&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;iframe&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;iframe&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;color-scheme: dark;&quot;&lt;/span&gt;&lt;span&gt; src&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;/example.html&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;iframe&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;


&lt;p&gt;As you can see in the above example, the &lt;code&gt;@media (prefers-color-scheme: dark)&lt;/code&gt; styles are being applied when &lt;code&gt;color-scheme: dark&lt;/code&gt; is used in the parent document.&lt;/p&gt;
&lt;p&gt;The same principle applies to SVG. Here’s the content of an &lt;code&gt;.svg&lt;/code&gt; file:&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;svg&lt;/span&gt;&lt;span&gt; viewBox&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;0 0 100 100&quot;&lt;/span&gt;&lt;span&gt; xmlns&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;http://www.w3.org/2000/svg&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;style&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;circle {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    fill: rgb(40,40,40);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;@media (prefers-color-scheme: dark) {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    circle {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;        fill: rgb(216, 216, 216);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    }&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;style&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;  &amp;lt;&lt;/span&gt;&lt;span&gt;circle&lt;/span&gt;&lt;span&gt; cx&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;50&quot;&lt;/span&gt;&lt;span&gt; cy&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;50&quot;&lt;/span&gt;&lt;span&gt; r&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;50&quot;&lt;/span&gt;&lt;span&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;svg&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;img&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;color-scheme: light;&quot;&lt;/span&gt;&lt;span&gt; src&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;/circle.svg&quot;&lt;/span&gt;&lt;span&gt; alt&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;img&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;color-scheme: dark;&quot;&lt;/span&gt;&lt;span&gt; src&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;/circle.svg&quot;&lt;/span&gt;&lt;span&gt; alt&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;img src=&quot;/circle-icon.svg&quot; alt&gt;
&lt;img src=&quot;/circle-icon.svg&quot; alt&gt;&lt;/p&gt;&lt;p&gt;The CSS spec has recently been &lt;a href=&quot;https://github.com/w3c/csswg-drafts/pull/13857#:~:text=This%20PR%20applies%20the%20resolution%20from%20the%20recent%20F2F%20in%20#13377%2C%20making%20(prefers%2Dcolor%2Dscheme)%20reflect%20the%20effects%20of%20%3Cmeta%20name=color%2Dscheme%3E&quot;&gt;updated&lt;/a&gt; so that the color-scheme of the document does effect the media query in all contexts, but no browser has implemented this.&lt;/p&gt;
&lt;h4 id=&quot;some-safari-caveats&quot;&gt;Some Safari caveats&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Support for the &lt;code&gt;prefers-color-scheme&lt;/code&gt; media query within SVG was added in &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes?changes=la,la#:~:text=175598175)-,Fixed%20an%20issue%20where,the%20system%20color%20appearance,-.%20(176413340&quot;&gt;Safari 27&lt;/a&gt;, but &lt;code&gt;color-scheme&lt;/code&gt; does not affect the media query (&lt;a href=&quot;https://bugs.webkit.org/show_bug.cgi?id=316640&quot;&gt;see bug report&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;Support for the &lt;code&gt;prefers-color-scheme&lt;/code&gt; media query within iframes was added in &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes?changes=la,la#:~:text=140674753)-,Fixed%20an%20issue%20where,was%20set%20to%20dark,-.%20(142072593&quot;&gt;Safari 27&lt;/a&gt; and the &lt;code&gt;color-scheme&lt;/code&gt; of the parent document does override it, as it should 🎉. However, other bugs remain (&lt;a href=&quot;https://bugs.webkit.org/show_bug.cgi?id=316680&quot;&gt;see bug report&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;using-light-dark-with-images-and-gradients&quot;&gt;Using &lt;code&gt;light-dark()&lt;/code&gt; with images and gradients&lt;/h2&gt;
&lt;p&gt;The &lt;code&gt;light-dark()&lt;/code&gt; function was originally limited to colors. It can now be used for gradients and images (as of Chrome/Edge version 150, Firefox version 150, and Safari Technology Preview).&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;.bg-gradient&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;  background-image&lt;/span&gt;&lt;span&gt;: light-dark(&lt;/span&gt;&lt;span&gt;linear-gradient&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;15&lt;/span&gt;&lt;span&gt;deg&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;#b9b6ff&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;#308dc6&lt;/span&gt;&lt;span&gt;), &lt;/span&gt;&lt;span&gt;linear-gradient&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;15&lt;/span&gt;&lt;span&gt;deg&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;#6b7495&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;#001339&lt;/span&gt;&lt;span&gt;)); &lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt; class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;bg-gradient&quot;&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;color-scheme: light;&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt; class&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;bg-gradient&quot;&lt;/span&gt;&lt;span&gt; style&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;color-scheme: dark;&quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span&gt;div&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;


&lt;p&gt;It’s also possible to switch between a single solid color and a gradient, depending on the &lt;code&gt;color-scheme&lt;/code&gt;.&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;.bg-grad-solid&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    background-image&lt;/span&gt;&lt;span&gt;: light-dark(&lt;/span&gt;&lt;span&gt;linear-gradient&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;15&lt;/span&gt;&lt;span&gt;deg&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;#b9b6ff&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;#308dc6&lt;/span&gt;&lt;span&gt;), image(&lt;/span&gt;&lt;span&gt;#001339&lt;/span&gt;&lt;span&gt;)); &lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;


&lt;h3 id=&quot;images&quot;&gt;Images&lt;/h3&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;.bg&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    background-image&lt;/span&gt;&lt;span&gt;: light-dark(&lt;/span&gt;&lt;span&gt;url&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;/lightmode.avif&lt;/span&gt;&lt;span&gt;), &lt;/span&gt;&lt;span&gt;url&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;/darkmode.avif&lt;/span&gt;&lt;span&gt;));&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;



&lt;h2 id=&quot;changing-more-than-colors-images-and-gradients&quot;&gt;Changing more than colors, images and gradients&lt;/h2&gt;
&lt;p&gt;By and large, the thing you need to change between modes is color, but there are exceptions. A &lt;code&gt;box-shadow&lt;/code&gt; might not be visible on a dark background in dark mode, so you may decide to apply a border instead, for example. Implementing that is currently rather challenging. The CSS standards body is planning to add a way to &lt;a href=&quot;https://github.com/w3c/csswg-drafts/issues/10577#issuecomment-3329616811&quot;&gt;detect the current color-scheme&lt;/a&gt; using either a CSS &lt;code&gt;if()&lt;/code&gt; statement or a style query, but no browser has implemented this feature. It’s possible to hack together an alternative. Below I’ll look at two approaches.&lt;/p&gt;
&lt;p&gt;Define a CSS variable to be true when the page is using dark mode:&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;html&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    --dark&lt;/span&gt;&lt;span&gt;: false;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;} &lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;html&lt;/span&gt;&lt;span&gt;:has&lt;/span&gt;&lt;span&gt;([&lt;/span&gt;&lt;span&gt;content&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;light dark&quot;&lt;/span&gt;&lt;span&gt;]) {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt; @&lt;/span&gt;&lt;span&gt;media&lt;/span&gt;&lt;span&gt; (&lt;/span&gt;&lt;span&gt;prefers-color-scheme&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;dark&lt;/span&gt;&lt;span&gt;) {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    --dark&lt;/span&gt;&lt;span&gt;: true;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt; }&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;html&lt;/span&gt;&lt;span&gt;:has&lt;/span&gt;&lt;span&gt;([&lt;/span&gt;&lt;span&gt;content&lt;/span&gt;&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&quot;dark&quot;&lt;/span&gt;&lt;span&gt;]) {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    --dark&lt;/span&gt;&lt;span&gt;: true;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;All browsers now support style queries, which allow you to apply styles depending on the value of a custom property:&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;@container&lt;/span&gt;&lt;span&gt; style(--dark: false) {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;.card&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    box-shadow&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;px&lt;/span&gt;&lt;span&gt; 2&lt;/span&gt;&lt;span&gt;px&lt;/span&gt;&lt;span&gt; 3&lt;/span&gt;&lt;span&gt;px&lt;/span&gt;&lt;span&gt; rgba&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;0.2&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;@container&lt;/span&gt;&lt;span&gt; style(--dark: true) {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;  .card&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    border&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;solid&lt;/span&gt;&lt;span&gt; 1&lt;/span&gt;&lt;span&gt;px&lt;/span&gt;&lt;span&gt; rgb&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;94&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;94&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;94&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;A better approach that also uses style queries would be:&lt;/p&gt;
&lt;pre tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span&gt;&lt;span&gt;@property&lt;/span&gt;&lt;span&gt; --usedScheme {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;        syntax: &quot;&amp;lt;color&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;span&gt;&quot;;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;        inherits: true;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;        initial-value&lt;/span&gt;&lt;span&gt;: transparent;&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    }&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;body&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    --usedScheme&lt;/span&gt;&lt;span&gt;: light-dark(&lt;/span&gt;&lt;span&gt;white&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;black&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;@container&lt;/span&gt;&lt;span&gt; style(--usedScheme: white) {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    .card&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;        box-shadow&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;px&lt;/span&gt;&lt;span&gt; 2&lt;/span&gt;&lt;span&gt;px&lt;/span&gt;&lt;span&gt; 3&lt;/span&gt;&lt;span&gt;px&lt;/span&gt;&lt;span&gt; rgba&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;0.2&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    }&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;@container&lt;/span&gt;&lt;span&gt; style(--usedScheme: black) {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;  .card&lt;/span&gt;&lt;span&gt; {&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;    border&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;solid&lt;/span&gt;&lt;span&gt; 1&lt;/span&gt;&lt;span&gt;px&lt;/span&gt;&lt;span&gt; rgb&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;94&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;94&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;94&lt;/span&gt;&lt;span&gt;);&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;  }&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;a-possible-future-overriding-prefers-color-scheme-via-js&quot;&gt;A (possible) future: overriding &lt;code&gt;prefers-color-scheme&lt;/code&gt; via JS&lt;/h2&gt;
&lt;p&gt;We might get a way to override the &lt;code&gt;prefers-color-scheme&lt;/code&gt; media query with JavaScript in the future. There’s a &lt;a href=&quot;https://drafts.csswg.org/mediaqueries-5/#script-control-user-prefs&quot;&gt;spec&lt;/a&gt;, an &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/User_Preferences_API&quot;&gt;MDN entry&lt;/a&gt; and a prototype in Chrome Canary but the Safari team are &lt;a href=&quot;https://github.com/WebKit/standards-positions/issues/252&quot;&gt;opposed to the idea&lt;/a&gt;.&lt;/p&gt;

&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;</description>
            <pubDate>Sun, 05 Jul 2026 19:08:40 +0000</pubDate>
            <guid>https://olliewilliams.xyz/blog/dark-mode/</guid>
        </item>
    </channel>
</rss>
