') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); feat: add admonition styles with Dracula colors and Font Awesome icons by FernandoCelmer · Pull Request #33 · dracula/mkdocs · GitHub
Skip to content

feat: add admonition styles with Dracula colors and Font Awesome icons - #33

Merged
FernandoCelmer merged 14 commits into
developfrom
feature/29
Aug 16, 2026
Merged

feat: add admonition styles with Dracula colors and Font Awesome icons#33
FernandoCelmer merged 14 commits into
developfrom
feature/29

Conversation

@FernandoCelmer

@FernandoCelmerFernandoCelmer commented Mar 25, 2026

Copy link
Copy Markdown
Member

Description

  • template/assets/css/mkdocs.css: added admonition styles covering all MkDocs admonition types
  • mkdocs_dracula_theme/assets/css/mkdocs.min.css: added the same styles to the served stylesheet

Motivation and Context

Admonition blocks (!!! note, !!! warning, etc.) rendered without any visual styling in the theme. MkDocs emits the correct HTML structure but the theme had no .admonition CSS rules at all.

This adds styled admonitions using the Dracula color palette (CSS variables from dracula-ui.min.css) and Font Awesome 4.7 icons — which are already loaded unconditionally in base.html. Each admonition type gets a color-coded left border, a matching transparent background, and an icon in the title bar.

Closes#29

Types of changes

  • Bug fix (change that fixes an issue)
  • New feature (change which adds functionality)
  • Documentation

Checklist

  • I have performed a self-review of my own code
  • I have added tests that prove my fix is effective or that my feature works
  • I have updated the CHANGELOG
  • I have updated the documentation accordingly

@FernandoCelmer
FernandoCelmer changed the base branch from main to developMarch 25, 2026 00:43
FernandoCelmer
FernandoCelmer commented Mar 25, 2026
View reviewed changes

@FernandoCelmerFernandoCelmer left a comment

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔍 Code Review

Code issues found: 3

See inline comments below.

Comment threadmkdocs_dracula_theme/assets/css/mkdocs.min.css Outdated
Comment threadmkdocs_dracula_theme/__init__.py
Comment threadtemplate/assets/css/mkdocs.css Outdated
@FernandoCelmer
fix: address review comments
6de0eb1
- revert version bump to 1.0.9-dev1 (let CI handle release)
- minify admonition CSS in mkdocs.min.css
- replace fa-fire with fa-lightbulb-o for tip/hint/important admonitions
Refs #29
@FernandoCelmer
TEST: add unit tests for admonition styles
f0b29ef
Add pytest suite covering admonition CSS rules introduced in this PR:
- CSS coverage: all 26 admonition types present in source and minified files
- Icon validation: correct Font Awesome 4.7 codepoints per type
- Color validation: Dracula CSS variables used (no hardcoded hex)
- Minified format: single-line, no comments, shorthand values
Refs #29
@FernandoCelmer
⬆️ CI/CD: Merge develop, reconcile CI infra with admonition styles
7382c97
Merged origin/develop (PR #32/#34/#35 CI + show_footer) into feature/29.
Kept develop's canonical test.yml/conftest.py/pyproject.toml layout,
regenerated poetry.lock, and fixed ruff formatting in test_admonitions.py.
@FernandoCelmer
❤️ TEST-#29: Add css_source and css_min pytest fixtures
2a55899
@FernandoCelmer
❤️ TEST-#29: Add unittest coverage for admonition type coverage
952df70
@FernandoCelmer
❤️ TEST-#29: Add unittest coverage for admonition icons
7acc713
@FernandoCelmer
❤️ TEST-#29: Add unittest coverage for admonition color variables
81515c9
@FernandoCelmer
❤️ TEST-#29: Add unittest coverage for minified CSS format
1dba2e1
@FernandoCelmer
❤️ TEST-#29: Split test_admonitions.py into per-concern unittest modules
1bb3a97
@FernandoCelmer
📘 DOCS-#29: Enable admonition/tables markdown extensions
15f16ed
@FernandoCelmer
📘 DOCS-#29: Add component showcase page for visual QA
bcf00b9
@FernandoCelmer
📘 DOCS-#29: Replace placeholder showcase copy with Dracula theme content
28013df
@FernandoCelmer
📘 DOCS-#29: Fix inaccurate port count and fabricated quote
520df63
@FernandoCelmer
FernandoCelmer merged commit af9b7fa into developAug 16, 2026
10 checks passed
@FernandoCelmer
FernandoCelmer deleted the feature/29 branch August 16, 2026 20:51
@FernandoCelmerFernandoCelmer mentioned this pull request Aug 16, 2026
Closed
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@FernandoCelmerFernandoCelmer

Labels

feature

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Admonitions should have box, color and icon

1 participant

@FernandoCelmer