<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>Osmyka Knowledge Hub Blog</title>
        <link>https://osmyka.com/docs/blog</link>
        <description>Osmyka Knowledge Hub Blog</description>
        <lastBuildDate>Sun, 30 Aug 2026 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>en</language>
        <item>
            <title><![CDATA[Introducing the Osmyka Knowledge Hub]]></title>
            <link>https://osmyka.com/docs/blog/welcome-to-osmyka-knowledge-hub</link>
            <guid>https://osmyka.com/docs/blog/welcome-to-osmyka-knowledge-hub</guid>
            <pubDate>Sun, 30 Aug 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[Today, we are thrilled to officially launch the Osmyka Knowledge Hub — a dedicated engineering and documentation portal powered by Docusaurus.]]></description>
            <content:encoded><![CDATA[<p>Today, we are thrilled to officially launch the <strong>Osmyka Knowledge Hub</strong> — a dedicated engineering and documentation portal powered by Docusaurus.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="why-we-built-a-dedicated-documentation-hub">Why We Built a Dedicated Documentation Hub<a href="https://osmyka.com/docs/blog/welcome-to-osmyka-knowledge-hub#why-we-built-a-dedicated-documentation-hub" class="hash-link" aria-label="Direct link to Why We Built a Dedicated Documentation Hub" title="Direct link to Why We Built a Dedicated Documentation Hub" translate="no">​</a></h2>
<p>As our platforms — including the <strong>AutoBook</strong> 24/7 client booking engine and the <strong>Osmyka AutoRepair CRM</strong> — continue to expand across workshop deployments in Estonia and the EU, having a centralized, transparent technical knowledge base became essential.</p>
<p>This portal provides:</p>
<ul>
<li class=""><strong>Comprehensive Product Manuals</strong>: In-depth operational guides for garage owners, service advisors, and technicians.</li>
<li class=""><strong>Transparent Version Changelogs</strong>: Continuous release notes documenting every feature, performance boost, and patch.</li>
<li class=""><strong>Architectural Specifications</strong>: Detailed blueprints covering our 3-2-1 multi-level backup strategy, GDPR compliance, and edge CDN routing.</li>
<li class=""><strong>Developer API &amp; Webhooks</strong>: Reference specifications for third-party ERP, accounting, and SMS gateway integrations.</li>
</ul>
<p>Explore the guides and let us know what topics you would like us to cover next!</p>]]></content:encoded>
            <category>announcement</category>
            <category>engineering</category>
            <category>platform</category>
        </item>
        <item>
            <title><![CDATA[Designing a Zero-Flash Accessible Dark & Light Theme]]></title>
            <link>https://osmyka.com/docs/blog/building-accessible-dark-light-design-system</link>
            <guid>https://osmyka.com/docs/blog/building-accessible-dark-light-design-system</guid>
            <pubDate>Sat, 29 Aug 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[How we engineered a high-contrast, WCAG AAA compliant theme system for automotive web applications with 0ms Flash of Unstyled Content (FOUT).]]></description>
            <content:encoded><![CDATA[<p>How we engineered a high-contrast, WCAG AAA compliant theme system for automotive web applications with 0ms Flash of Unstyled Content (FOUT).</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="the-challenge-flash-of-unstyled-content-fout">The Challenge: Flash of Unstyled Content (FOUT)<a href="https://osmyka.com/docs/blog/building-accessible-dark-light-design-system#the-challenge-flash-of-unstyled-content-fout" class="hash-link" aria-label="Direct link to The Challenge: Flash of Unstyled Content (FOUT)" title="Direct link to The Challenge: Flash of Unstyled Content (FOUT)" translate="no">​</a></h2>
<p>Many modern web apps suffer from a jarring white or dark flicker when loading, caused by JavaScript themes evaluating after the HTML body renders.</p>
<p>To solve this in Osmyka, we implemented a micro-inline blocking script directly within the <code>&lt;head&gt;</code> of all pages before any CSS parses:</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#bfc7d5"><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(255, 85, 114)">script</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&gt;</span><span class="token script language-javascript"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript keyword" style="font-style:italic">function</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token script language-javascript">  </span><span class="token script language-javascript keyword control-flow" style="font-style:italic">try</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="font-style:italic">var</span><span class="token script language-javascript"> saved </span><span class="token script language-javascript operator" style="color:rgb(137, 221, 255)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:rgb(191, 199, 213)">localStorage</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript method function property-access" style="color:rgb(130, 170, 255)">getItem</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript string" style="color:rgb(195, 232, 141)">'osmyka-theme'</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="font-style:italic">var</span><span class="token script language-javascript"> prefersLight </span><span class="token script language-javascript operator" style="color:rgb(137, 221, 255)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:rgb(191, 199, 213)">window</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript method function property-access" style="color:rgb(130, 170, 255)">matchMedia</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript string" style="color:rgb(195, 232, 141)">'(prefers-color-scheme: light)'</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript property-access">matches</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token script language-javascript">    </span><span class="token script language-javascript dom variable" style="color:rgb(191, 199, 213)">document</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript property-access">documentElement</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript method function property-access" style="color:rgb(130, 170, 255)">setAttribute</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript string" style="color:rgb(195, 232, 141)">'data-theme'</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"> saved </span><span class="token script language-javascript operator" style="color:rgb(137, 221, 255)">||</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript">prefersLight </span><span class="token script language-javascript operator" style="color:rgb(137, 221, 255)">?</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:rgb(195, 232, 141)">'light'</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:rgb(137, 221, 255)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:rgb(195, 232, 141)">'dark'</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="font-style:italic">catch</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript">e</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(255, 85, 114)">script</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&gt;</span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="css-tokenized-color-palettes">CSS Tokenized Color Palettes<a href="https://osmyka.com/docs/blog/building-accessible-dark-light-design-system#css-tokenized-color-palettes" class="hash-link" aria-label="Direct link to CSS Tokenized Color Palettes" title="Direct link to CSS Tokenized Color Palettes" translate="no">​</a></h2>
<p>By decoupling token definitions in <code>tokens.css</code>, all components automatically adapt without duplicated CSS rules:</p>
<ul>
<li class=""><strong>Dark Theme</strong>: <code>#050912</code> deep space blue with <code>#38e1ff</code> electric cyan and <code>#8b7bff</code> violet.</li>
<li class=""><strong>Light Theme</strong>: <code>#f8fafc</code> ultra-clean slate with <code>#0284c7</code> ocean cyan and <code>#6366f1</code> indigo.</li>
</ul>
<p>Both palettes achieve contrast ratios exceeding <strong>7:1</strong>, easily surpassing the WCAG AAA accessibility standard for readability in bright sunlight on mobile devices in workshop bays.</p>]]></content:encoded>
            <category>design</category>
            <category>frontend</category>
            <category>performance</category>
            <category>css</category>
        </item>
    </channel>
</rss>