Mweb Themes

screenshot of Mweb Themes
scss

30+ 款 Markdown 预览主题,Typo.css、Vue、Bear、飞书云文档等风格,适用于 MWeb、Typora。

Overview:

The MWeb-Themes is a collection of more than 30 Markdown preview themes that are compatible with note-taking software such as MWeb and Typora. These themes come in various styles, including Typo.css, Vue, Bear, Lark, and more. Users can preview all the themes online and choose their preferred one. The installation process differs slightly between MWeb and Typora.

Features:

  • Includes over 30 Markdown preview themes in various styles like Typo.css, Vue, Bear, Lark, and more.
  • Compatible with note-taking software like MWeb and Typora.
  • Users can preview all the themes online and select their favorite one.
  • Easy installation process for both MWeb and Typora.
  • Themes can be customized by modifying relevant variables.
  • Provides a standard style template for developers to quickly develop new preview themes.

MWeb:

  • Download the latest theme compression package (mweb3-themes.zip) from the release page.
  • Open MWeb preferences and navigate to Preview Style -> Edit -> Open the directory containing the custom styles (PreviewCSS folder).
  • Drag the extracted theme files (.css files) into the folder.
  • Click on MWeb preferences -> Preview Style -> Refresh to see the list of all themes.
  • Select the desired theme from the list.

MWeb 4.0.x:

  • Download the latest theme compression package (mweb3-themes.zip) from the release page.
  • Extract the files and obtain a series of mweb-xxx.css files.
  • Open MWeb preferences and go to Custom Theme -> Add Light Theme (select "Add Dark Theme" for dark themes).
  • Name the theme as mweb-xxx and uncheck the "Automatically generate preview CSS by the editor theme" option.
  • Copy the content of the mweb-xxx.css file and paste it into the text input box on the right.
  • Click "Save" to save the changes and then switch between light and dark themes in the preferences.

MWeb 4.2.x (MWeb Pro):

  • Download and extract the mweb4-themes.zip file.
  • Open MWeb preferences and navigate to Theme & Style -> Custom Theme -> Import Light Theme (choose "Import Dark Theme" for dark themes).
  • Select all the mweb-xxx.mwebtheme files obtained from the previous step and import them.
  • Each theme file includes both editor and preview themes.

Typora:

  • Download the latest theme compression package (typora-themes.zip) from the release page.
  • Open Typora preferences and go to Appearance.
  • Open the theme folder by clicking on "Open Theme Folder".
  • Drag the extracted theme files (.css files) into the folder.
  • Restart Typora.
  • Click on the menu bar -> Themes to see the list of all themes.
  • Select the preferred theme.

Summary:

The MWeb-Themes collection offers a wide range of over 30 Markdown preview themes compatible with note-taking software like MWeb and Typora. Users can select from various styles such as Typo.css, Vue, Bear, Lark, and more. The installation process differs slightly between MWeb and Typora, but both are relatively straightforward. Developers can also utilize the provided standard style template to quickly develop new preview themes.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.