Using theme's stylus variables in Vue components

[FistMeNaruto]

I think it is useful to have access to theme variables inside custom components. I required the config.styl from vuepress/lib/default-theme/styles and it does work, but there may be better solutions.

<template>
  <button>Click</button>
</template>

<style lang="stylus">
@require '~vuepress/lib/default-theme/styles/config'

button
  background-color $accentColor
</style>

Is there any other way of accessing theme variables while retaining "single source of truth" for them?

[ulivz]

You can use:

@require '~@default-theme/styles/config.styl'

[FistMeNaruto]

Currently there is no information in documentation about webpack aliases defined here. https://github.com/vuejs/vuepress/blob/777c4f1551dba530cb88f35371980409088f5c7b/lib/webpack/createBaseConfig.js#L39-L50 Some of them are quite useful and deserve a mention in the docs. My suggestion is https://vuepress.vuejs.org/guide/assets.html#relative-urls or https://vuepress.vuejs.org/guide/using-vue.html#using-components (ex. using a theme variable inside a Vue component)

[ulivz]

Contribution welcome.

[Sandstedt]

Seems it's global now in v1 btw? Works without importing anything for me at least :)

[salazarr-js]

@FistMeNaruto that could be useful, I am creating a component, and I'll like to use the default-theme colors variables, but it's not explicit in the docs where I can find them or what they are.

Thanks to @ulivz and how @Sandstedt says it's not requiere to import it.

<style lang="stylus" scoped>
  // @require '~@default-theme/styles/config.styl';

  .class-name {
    color: $textColor
    border: 1px solid $borderColor
  }
</style>

But it should be noted that when executing vuepress eject, there is no file in /.vuepress/theme/ where we can find the colors variables or palette like in config.style

These are some color variables

// colors
$accentColor ?= #3eaf7c
$textColor ?= #2c3e50
$borderColor ?= #eaecef
$codeBgColor ?= #282c34
$arrowBgColor ?= #ccc
$badgeTipColor ?= #42b983
$badgeWarningColor ?= darken(#ffe564, 35%)
$badgeErrorColor ?= #DA5961