Feature request for Vue theme - configure font size

[alexellis]

Feature request

I searched StackOverflow and couldn't find any references to this, but it is mentioned in the roadmap under https://github.com/docsifyjs/docsify/issues/657

So far docsify has been very helpful in getting up a quick docs site for https://inlets.dev/ but I find the font size rather small when viewed at 100% zoom, especially the body and nav-bar.

I have found a few links on Google such as this one however it doesn't appear to work with the Vue theme.

I'd like to see in the docs instructions for increasing the font scaling for the default theme. 18pt appears to render at a more readable size.

Compare the two screenshots (one with default text on GitHub and one with the default docsify theme for context)

What are your thoughts on the suggestion?

[anikethsaha]

Thanks for the issue.

I dont have experience with vue so maybe some else can pick this. about the default font size, I think we can consider that to be increased as there are other issue as well for this https://github.com/docsifyjs/docsify/issues/1196

PR welcome for the default style. Or we can add it as a css variable.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jhildenbiddle]

I believe @alexellis is referring the the vue theme, not a Vue.js template. I have updated the title accordingly (let me know if I have this wrong).

A few options:

1. Override the style declarations in vue.css. The theme isn't setup to do this easily, so you'll have to override several rules. Here's a quick-and-dirty example:

   <style>
    html {
      font-size: 18px;
    }
   
    body,
    .app-nav li ul li,
    .sidebar ul li a,
    input[type='search'] {
      font-size: 1em;
    }
   </style>

2. Use docsify-themeable instead of vue.css. The base font size is set to 16px by default, but you can easily the CSS custom property that controls this:

   <style>
    :root {
      --base-font-size: 18px
    }
   </style>

3. Wait for docsify v5, which (according to current plans) will integrate docsify-themeable. A vue.css-like option will be available, but it will be built using docsify-themeable.