/* ***************************************************** 4host Kft. — Tudásbázis (docs.4host.hu) brand theme Material for MkDocs override. Ports the same visual language already shipped on 4host.hu and client.4host.hu: deep navy surfaces, violet (#5d00ff) accent, Poppins headings / Inter body, solid-black CTA buttons. Works by remapping Material's own CSS custom properties (--md-*) rather than fighting its selectors, so component behavior (search, nav state, code copy button, tabs, etc.) is untouched — only the palette and type change. Both of Material's schemes are branded, not just one: dark ("slate") is the navy/violet look used everywhere else on the brand; light ("default") reuses the header's own colors — white surfaces, the same dark navy (#202744) text — across the whole page. Every component rule below only ever references --c26-* tokens, and those tokens are the only thing that changes between the two [data-md-color-scheme="…"] blocks, so the toggle switches themes cleanly without any component needing its own light/dark variant. Wire this in via mkdocs.yml: extra_css: - stylesheets/brand.css (adjust the path to wherever this file lives relative to your docs_dir/site config — Material serves anything under docs_dir as a static asset, so docs/stylesheets/ is the usual place.) ***************************************************** */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ---- tokens that don't change between light/dark ---- */ --c26-cta-bg: #000000; --c26-cta-text: #ffffff; --c26-radius: 22px; --c26-radius-sm: 14px; --c26-danger: #ff6b6b; --c26-warning: #ffb84d; --c26-success: #2ecc8f; --c26-info: #4fb8ff; /* header is always white / dark navy text, in both schemes — matches 4host.hu and client.4host.hu, which don't have a dark mode toggle of their own */ --c26-header-text: #202744; } /* ---- Material palette remap ---- References var(--c26-*) rather than literal colors, so it automatically follows whichever scheme block below is in effect. This has to carry the SAME selector list as the two token blocks below (not just :root) — Material's own theme CSS sets these same --md-* properties directly on whichever element carries [data-md-color-scheme] (the site puts that attribute on , not ), and a property set directly on an element always wins over one only inherited from :root, regardless of source order. Declaring the remap on the same selectors keeps it at equal specificity and later in the stylesheet, so it wins instead of silently losing to whatever the site shipped with. --md-primary-* controls the header; --md-default-* controls the page body. */ :root, [data-md-color-scheme="slate"], [data-md-color-scheme="default"] { --md-primary-fg-color: #ffffff; --md-primary-fg-color--light: #f4f6fb; --md-primary-fg-color--dark: #e8ebf5; --md-primary-bg-color: var(--c26-header-text); --md-primary-bg-color--light: rgba(32, 39, 68, 0.6); --md-accent-fg-color: var(--c26-accent-2); --md-accent-fg-color--transparent: var(--c26-accent-tint); --md-accent-bg-color: #ffffff; --md-accent-bg-color--light: #ffffff; --md-default-bg-color: var(--c26-bg); --md-default-bg-color--light: var(--c26-surface); --md-default-bg-color--lighter: var(--c26-surface-2); --md-default-bg-color--lightest: var(--c26-surface-2); --md-default-fg-color: var(--c26-text); --md-default-fg-color--light: var(--c26-muted); --md-default-fg-color--lighter: var(--c26-border-strong); --md-default-fg-color--lightest: var(--c26-border); --md-typeset-color: var(--c26-text); --md-typeset-a-color: var(--c26-accent-2); --md-typeset-mark-color: var(--c26-accent-tint); --md-code-bg-color: var(--c26-surface-2); --md-code-fg-color: var(--c26-code-fg); --md-code-hl-color: var(--c26-accent-tint); --md-footer-bg-color: var(--c26-bg-deep); --md-footer-bg-color--dark: var(--c26-bg-deep); --md-footer-fg-color: var(--c26-text); --md-footer-fg-color--light: var(--c26-muted); /* Material's own default for this one is a low-opacity white (fine on ITS dark footer, illegible on our light-scheme footer) — it's what "Made with Material for MkDocs" uses, so it needs an explicit brand value like the others above. */ --md-footer-fg-color--lighter: var(--c26-muted); --md-admonition-fg-color: var(--c26-text); --md-admonition-bg-color: var(--c26-surface); } /* ---------- Dark scheme ("slate") ---------- The navy/violet look used across the rest of the brand. Also the fallback on bare :root, for the instant before JS sets data-md-color-scheme on . */ :root, [data-md-color-scheme="slate"] { --c26-bg: #0a1830; --c26-bg-soft: #0d2344; --c26-bg-deep: #060e1f; --c26-surface: #101f3d; --c26-surface-2: #16294f; --c26-border: rgba(159, 182, 214, 0.16); --c26-border-strong: rgba(159, 182, 214, 0.28); --c26-text: #eef4ff; --c26-muted: #9bb1d3; --c26-accent: #5d00ff; --c26-accent-2: #8a4dff; --c26-accent-tint: rgba(93, 0, 255, 0.14); --c26-cta-bg-hover: #16162c; --c26-code-fg: #cfe0ff; } /* ---------- Light scheme ("default") ---------- Reuses the header's own white / dark-navy pairing for the whole page instead of a generic light theme: surfaces go white, text goes to the same #202744 the header uses. The violet accent shifts a shade darker here — the lighter violet (#8a4dff) used for links on the dark scheme is too pale to read on white, so light mode swaps which of the two violets is "base" vs. "hover" (see the button/link rules below, which don't otherwise change between schemes). */ [data-md-color-scheme="default"] { --c26-bg: #f6f7fb; --c26-bg-soft: #eef1f8; --c26-bg-deep: #e7eaf3; --c26-surface: #ffffff; --c26-surface-2: #eef1f8; --c26-border: rgba(32, 39, 68, 0.12); --c26-border-strong: rgba(32, 39, 68, 0.24); --c26-text: #202744; --c26-muted: #5b6480; --c26-accent: #4a00cc; --c26-accent-2: #5d00ff; --c26-accent-tint: rgba(93, 0, 255, 0.08); --c26-cta-bg-hover: #262640; --c26-code-fg: #1c2b4a; } /* ---------- Base / typography ---------- */ body { background: var(--c26-bg); font-family: "Inter", system-ui, -apple-system, sans-serif; } .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6, .md-nav__title, .md-header__topic { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 500; } .md-typeset h1 { font-weight: 400; color: var(--c26-text); } /* ---------- Header ---------- */ .md-header { background-color: #ffffff; color: var(--c26-header-text); box-shadow: 0 1px 0 rgba(0, 0, 0, .1); } .md-header--shadow { box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 4px 14px rgba(3, 8, 20, .12); } .md-header__title, .md-header__topic, .md-header__ellipsis { color: var(--c26-header-text); } .md-header__button.md-icon { color: var(--c26-header-text); } .md-search__input { background-color: rgba(32, 39, 68, .06); color: var(--c26-header-text); border-radius: var(--c26-radius-sm); } .md-search__input::placeholder { color: rgba(32, 39, 68, .55); } .md-search__form { border-radius: var(--c26-radius-sm); } .md-search__icon svg { fill: var(--c26-header-text); } /* search results panel */ .md-search__output { background-color: var(--c26-surface); border: 1px solid var(--c26-border); box-shadow: 0 8px 24px rgba(3, 8, 20, .12); } .md-search-result__link:hover, .md-search-result__link[data-md-state="active"] { background-color: var(--c26-accent-tint); } /* ---------- Left nav ---------- */ .md-nav__link--active, .md-nav__link:focus, .md-nav__link:hover { color: var(--c26-accent-2); } .md-nav__item .md-nav__link--active { font-weight: 600; } .md-nav__link[data-md-state="blur"] { color: var(--c26-muted); } .md-nav__title { color: var(--c26-text); } .md-sidebar__scrollwrap::-webkit-scrollbar-thumb { background-color: var(--c26-border-strong); } /* current-page highlight rail some Material versions render */ .md-nav__item--active > .md-nav__link { color: var(--c26-accent-2); } /* ---------- Links ---------- */ .md-typeset a { color: var(--c26-accent-2); text-decoration-color: var(--c26-accent-tint); } .md-typeset a:hover, .md-typeset a:focus { color: var(--c26-accent); } /* ---------- Buttons ---------- */ .md-typeset .md-button { background-color: var(--c26-cta-bg); color: var(--c26-cta-text) !important; border: 1px solid var(--c26-cta-bg); border-radius: 999px; font-weight: 700; } .md-typeset .md-button:hover, .md-typeset .md-button:focus { background-color: var(--c26-cta-bg-hover); border-color: var(--c26-cta-bg-hover); color: var(--c26-cta-text) !important; } .md-typeset .md-button--primary { background-color: var(--c26-accent); border-color: var(--c26-accent); color: #ffffff !important; } .md-typeset .md-button--primary:hover, .md-typeset .md-button--primary:focus { background-color: var(--c26-accent-2); border-color: var(--c26-accent-2); } /* ---------- Code blocks ---------- */ .md-typeset code { background-color: var(--c26-surface-2); border-radius: 4px; } .md-typeset pre > code { border-radius: var(--c26-radius-sm); } .md-clipboard { color: var(--c26-muted); } .md-clipboard:hover { color: var(--c26-accent-2); } /* ---------- Admonitions / callouts ---------- */ .md-typeset .admonition, .md-typeset details { background-color: var(--c26-surface); border: 1px solid var(--c26-border); border-radius: var(--c26-radius-sm); box-shadow: none; } .md-typeset .admonition-title, .md-typeset summary { background-color: var(--c26-surface-2); } .md-typeset .admonition-title::before, .md-typeset summary::before { background-color: var(--c26-accent-2); } /* tip/note/info accent bar uses the left border color driven by --md-admonition variables above plus these type-specific ones */ .md-typeset .tip > .admonition-title, .md-typeset .tip > summary, .md-typeset .hint > .admonition-title, .md-typeset .hint > summary { background-color: rgba(93, 0, 255, .12); } .md-typeset .tip, .md-typeset .hint { border-color: var(--c26-accent); } .md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before, .md-typeset .hint > .admonition-title::before, .md-typeset .hint > summary::before { background-color: var(--c26-accent); } /* ---------- Tables ---------- */ .md-typeset table:not([class]) { background-color: var(--c26-surface); border: 1px solid var(--c26-border); border-radius: var(--c26-radius-sm); } .md-typeset table:not([class]) th { background-color: var(--c26-surface-2); color: var(--c26-text); } .md-typeset table:not([class]) tr:hover { background-color: var(--c26-accent-tint); } /* ---------- Tabs (content tabs plugin) ---------- */ .md-typeset .tabbed-labels > label { color: var(--c26-muted); } .md-typeset .tabbed-set > input:checked + label, .md-typeset .tabbed-labels > label:hover { color: var(--c26-accent-2); } .md-typeset .tabbed-set > input:checked + label { border-color: var(--c26-accent-2); } /* ---------- Footer ---------- */ .md-footer-meta { background-color: var(--c26-bg-deep); } .md-footer-nav__link:hover .md-footer-nav__title, .md-footer-nav__link:hover .md-footer-nav__direction { color: var(--c26-accent-2); } /* ---------- Table of contents (right rail) ---------- */ .md-nav--secondary .md-nav__link--active { color: var(--c26-accent-2); } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--c26-bg); } ::-webkit-scrollbar-thumb { background-color: var(--c26-border-strong); border-radius: 8px; } ::selection { background: var(--c26-accent); color: #ffffff; }