geist-org/vue

Background color of body doesn't turn dark when importing components on demand

Opened this issue · 4 comments

Creedowl commented

Bug report 🐞

I import components in the following way:

import Vue from 'vue'
import Button from '@zeit-ui/vue/lib/button.common'

import '@zeit-ui/themes/index.css'
import '@zeit-ui/themes/dark.css'
import '@zeit-ui/vue/lib/button.css'

Button.install(Vue)

It works well, but when I try to swtich theme to dark:

import ZeitUI from '@zeit-ui/vue'

ZeitUI.theme.enableDark()

Only the Button turn to dark, but the body's background color is still white. When I change to import 'zeit-ui.css'

import Vue from 'vue'
import Button from '@zeit-ui/vue/lib/button.common'

import '@zeit-ui/vue/dist/zeit-ui.css'
import '@zeit-ui/vue/lib/button.css'

Button.install(Vue)

Everything works well

Version & Environment

"@zeit-ui/vue": "^2.5.0-canary.3" with "nuxt": "^2.13.0"

Expection

Background color of body doesn't turn dark when importing components on demand

Actual results (or Errors)

As described above. I found that when I import 'zeit-ui.css', there is such a css

image

But that doesn't exist when I use the first way

unix commented

Yes, it's expected behavior, not an error.

  • @zeit-ui/themes is a basic lib and does not contain any styles (design draft), it's just an abstraction of CSS variables.
  • Users do not need to manually import @zeit-ui/themes at any time, because it's just a base dependency lib.
  • zeit-ui.css contains @zeit-ui/themes by default.
  • zeit-ui.css is an implementation based on @zeit-ui/themes, and zeit-ui.css is required.

However, in a few scenarios, you may need to use the dependency lib directly (Do not want to import all the style files), you can follow these steps:

  1. import the basic variables file:
import '@zeit-ui/themes/index.css'
import '@zeit-ui/themes/dark.css'
  1. import the basic typography style based on @zeit-ui/themes (It provides typesetting style rendering):
import '@zeit-ui/typography/index.css'
  1. improt the component styles you need:
import '@zeit-ui/vue/lib/code.css'

This is a little cumbersome, I created an online example for you to refer to. Although introducing styles on demand can reduce the volume of your apps, the effect is not obvious, after gzip is turned on, the difference is almost negligible. (If you think this way is too complicated, you can import all the style files directly)

  • 👍2
Creedowl commented

@unix Thanks a lot! So I may import all the style files, premature optimization is the root of all evil.

Creedowl commented

By the way, it's the operation in docs confused me:

import Vue from 'vue'
import Button from '@zeit-ui/vue/lib/button.common'
import '@zeit-ui/themes/index.css'
import '@zeit-ui/vue/lib/button.css'

Button.install(Vue)

That import @zeit-ui/themes directly

unix commented

@Creedowl
Yup, the document looks out of date, I'll sync the document content again later.

  • 👍1
  • ❤️1