Clear Blue Theme
FkeMark Docs now use Clear Blue as the default visual system. It is designed for a Markdown editor: clean blue-white surfaces, readable content cards, clear hierarchy, and restrained decoration for long writing and review sessions.
The site uses VitePress Theme Teek + FkeMark custom CSS. Teek provides documentation features, while the custom styles keep the home page, docs pages, top navigation, sidebar, buttons, links, and Markdown details consistent.
Why Teek
Teek fits the current docs site better than only extending the default VitePress theme:
- Still VitePress-based: Markdown-first, static builds, and Cloudflare Pages friendly.
- Richer docs features: article cards, code block enhancements, theme color switching, back-to-top, site analysis, and grouped footers.
- Centralized configuration:
defineTeekConfigkeeps navigation, sidebars, language switching, version links, and theme enhancements in one place. - Default home page retained:
teekHome: false+vpHome: truekeeps the VitePress home layout while adding FkeMark sections. - Controlled brand layer:
custom.cssoverrides colors, cards, buttons, Markdown reading details, and responsive layout.
Enabled Teek features
| Feature | Usage |
|---|---|
pageStyle: 'card-nav' | Card-style reading layout for guide pages |
themeEnhance | Theme color, layout enhancement, and spotlight reading helper |
codeBlock | Enhanced code blocks, long-code collapse, and language labels |
backTop | Reading-progress back-to-top button |
articleAnalyze | Updated time, word count, and reading info |
docAnalysis | Site statistics in the footer area |
footerGroup / footerInfo | Project, version, deploy, and theme links |
Design principles
- Blue-white surface: pale blue page background with white content cards for comfortable reading.
- Clear hierarchy: deep ink-blue body text with muted blue-gray secondary text.
- Editor feel: subtle grid texture, navy code blocks, rounded cards, and clean borders echo Markdown editing tools.
- Unified primary color: home, content, sidebar, top navigation, buttons, and links share the same blue palette.
- Subtle motion: only small hover feedback, so documentation stays focused.
Color tokens
Reuse in a Markdown renderer
| File | Purpose |
|---|---|
doc/.vitepress/theme/custom.css | Blue-white overrides for the docs home page, docs pages, top navigation, sidebar, and Teek components |
doc/public/theme/fkemark-vellum.css | Reusable Clear Blue CSS for an application Markdown preview area |
The
fkemark-vellum.cssfile name andfkemark-vellumclass are kept for compatibility with older references; the current visual style is Clear Blue.
Import the CSS and add the fkemark-vellum class to your Markdown container:
<link rel="stylesheet" href="/theme/fkemark-vellum.css" />
<article class="markdown-body fkemark-vellum">
<h1>Project notes</h1>
<blockquote>Local files first, writing stays portable.</blockquote>
<pre><code>const mode = 'Live + Source'</code></pre>
</article>VitePress theme entry
import Teek from 'vitepress-theme-teek'
import 'vitepress-theme-teek/index.css'
import './custom.css'
export default TeekBest fit
Good for tutorials, long-term notes, project docs, reading notes, technical plans, and final review before publishing.
Not ideal for dense dashboards, heavy marketing pages, or highly interactive chart-heavy pages.