Vssue provides compiled style file
vssue.min.css, and you can import it to use the default styles.
Alternatively, you can use custom styles for Vssue.
Use Source Code of Vssue Styles
The style of Vssue is written in Stylus, and the source files are located in
vssue/src/styles directory. The main style file is
You can eject and modify it to have fully customized styles for Vssue.
As our comments support markdown syntax, we need to set the style of the parsed markdown content.
Currently, Vssue use github-markdown-css as the preset. You may notice that all the content of comments in Vssue is wrapped in
However, the css file of
github-markdown-css is not included in Vssue's stylus code. Instead, it is concat to the complied CSS file at build time.
So if you want to use the source code of Vssue styles, remember to import
github-markdown-css, or add your own style under
Use Variables to Customize Vssue
There are some pre-defined stylus variables of Vssue, and you can check them in
// the main color $vssue-theme-color // the text color (used for common text) $vssue-text-color // the text light color (used for muted text, disabled text, etc) $vssue-text-light-color // the border color $vssue-border-color // the progress color $vssue-progress-color // the font size $vssue-font-size // the font family $vssue-font-family // the mobile breakpoint $vssue-breakpoint-mobile // the text direction (ltr / rtl) (used for RTL languages, e.g. Hebrew) $vssue-direction
For example, Vssue use a "Vue green" (
#3eaf7c) as the theme color, which is defined as the default value of variable
$vssue-theme-color. You can change the theme color by setting
$vssue-theme-color before import
Here is a sample stylus file showing that how to change the theme color to
red. Assume that you are using
stylus-loader so that you can resolve modules via
// set the variable first $vssue-theme-color = red // import the main file of Vssue styles and github-markdown-css @import '~vssue/src/styles/index' @import '~github-markdown-css/github-markdown.css'
See Markdown Body for why we need to import