Darkprint Theme

A dark mode variant of the Newsprint theme for Typora, combining classic serif typography with comfortable dark colors.

Overview

Darkprint preserves the elegant layout and typography of the Newsprint theme while applying the color scheme from the Night theme. This creates a reading experience that's both classic and easy on the eyes in low-light conditions.

Theme Composition

Base: Newsprint Theme

• Typography: PT Serif font family (regular, italic, bold, bold italic)
• Layout: 40em max-width for optimal readability
• Line Height: 1.5em for comfortable reading
• Spacing: Generous margins and padding throughout
• Font Files: Uses existing fonts in ./newsprint/ directory

Colors: Night Theme

• Background: #363B40 (dark blue-gray)
• Text: #b8bfc6 (light gray-blue)
• Headings: #DEDEDE (lighter gray)
• Links: #e0e0e0 (hover: #fff)
• Code Blocks: #333 background with full syntax highlighting
  • Keywords: #C88FD0 (purple)
  • Tags: #7DF46A (green)
  • Strings: #D26B6B (red)
  • Comments: #DA924A (orange)
  • Numbers: #64AB8F (teal)
  • Attributes: #7575E4 (blue)
  • And more (imported from night/codeblock.dark.css)
• Sidebar: #2E3033
• Blockquotes: #9DA2A6 text with #474d54 left border
• Selection: #4a89dc (blue)
• Table Headers: #333
• Table Rows (even): #2E3033

Key Features Preserved

Typography

• H1: 1.875em with bottom border
• H2/H3: 1.3125em
• H4: 1.125em
• H5/H6: 1em
• Body: 16px base font size

Layout Elements

• Ordered lists: decimal numbering
• Unordered lists: disc bullets
• Nested lists: lower-alpha, then lower-roman
• Blockquotes: italic with 5px left border
• Code: inline padding, block indentation
• Tables: collapsed borders, alternating row colors

UI Components

• Task lists with custom checkboxes
• File browser with active file highlighting
• Sidebar with hover effects
• Focus mode support
• Search highlighting
• Modal dialogs

Files Required

CSS File

• darkprint.css - Main theme file

Dependencies (from Night theme)

• ./night/codeblock.dark.css - Code syntax highlighting

Font Files (from Newsprint)

• ./newsprint/pt-serif-v11-latin-regular.woff2
• ./newsprint/pt-serif-v11-latin-italic.woff2
• ./newsprint/pt-serif-v11-latin-700.woff2
• ./newsprint/pt-serif-v11-latin-700italic.woff2

CSS Variables

:root {
	--active-file-bg-color: rgb(34, 34, 34);
	--active-file-text-color: white;
	--bg-color: #363B40;
	--text-color: #b8bfc6;
	--control-text-color: #b7b7b7;
	--rawblock-edit-panel-bd: #333;
	--select-text-bg-color: #4a89dc;
	--select-text-font-color: white;
	--side-bar-bg-color: #2E3033;
	--item-hover-bg-color: #70717d;
	--item-hover-text-color: white;
	--primary-color: #6dc1e7;
	--active-file-border-color: #8d8df0;
	--window-border: 1px solid #555;
	--search-select-bg-color: #428bca;
}

Changes from Source Themes

From Newsprint

• Replaced all color values with Night theme colors
• Updated background colors for dark mode
• Changed text colors for proper contrast
• Modified table styling for dark backgrounds
• Updated UI element colors (sidebar, modals, etc.)
• Added import of Night's code block syntax highlighting

From Night

• Replaced font family (Helvetica → PT Serif)
• Adjusted heading sizes to match Newsprint
• Modified line heights and spacing
• Changed layout max-width (914px → 40em)
• Preserved Newsprint's border styles

Known Compatibility

• Platform: macOS (tested on Darwin 25.1.0)
• Typora Version: Works with current Typora releases
• Font Loading: Uses @include-when-export for Google Fonts fallback
• Dependencies: Requires FontAwesome for outline expander icons

Bugfixing Reference

Common Issues

1. Fonts not loading: Check that ./newsprint/ directory exists with all .woff2 files
2. Syntax highlighting not working: Ensure ./night/codeblock.dark.css exists and is properly imported
3. Colors too bright: Adjust --text-color in :root variables
4. Colors too dim: Increase contrast by adjusting --bg-color and --text-color
5. Links hard to see: Modify a color values (currently #e0e0e0)
6. Code blocks hard to read: Adjust .md-fences background (currently #333)

Color Adjustment Areas

• Main text: Line 77 (color: #b8bfc6)
• Headings: Line 198 (color: #DEDEDE)
• Links: Line 186 (color: #e0e0e0)
• Background: Line 75 (background-color: #363B40)
• Code blocks: Line 233-234 (background-color: #333)
• Blockquotes: Line 219 (color: #9DA2A6)

Layout Adjustment Areas

• Content width: Line 99 (max-width: 40em)
• Line height: Line 78 (line-height: 1.5em)
• Font size: Line 71 (font-size: 16px)

Future Enhancements

Potential areas for customization:

• Adjust contrast ratios for accessibility
• Add syntax highlighting for code blocks
• Customize blockquote styling
• Modify link underline behavior
• Adjust table row striping colors
• Fine-tune focus mode colors

Credits

• Newsprint Theme: Original layout and typography
• Night Theme: Color scheme and dark mode styling
• PT Serif Font: Google Fonts
• Created: 2025-11-13