Element: [Feature Request] How to access to theme colors?

[gen4sp]

Existing Component

Yes

Component Name

All

Description

It's not clear how to access to theme colors?
For example, I want to set a DIV with light-black background. How I supposed to do that?
Thanks!

[gen4sp]

Also typography classes (such as text-smaller) don't work for me.
what i am doing wrong?

[Leopoldthecoder]

You are not doing anything wrong. We may have made a mistake putting Color and Typography in the Components section when they really belong to the Guide section.

Element doesn't have built-in color classes or typography classes. Color and Typography actually are suggestions on how pages using Element look best.

Sorry about the confusion. We'll remove Color and Typography from Components.

[gen4sp]

Ok, got it.
But actually, it would be great to have color and text classes or SCSS variables.
I would say, it is essential, isn't it?

[ffxsam]

I agree. I came here trying to find out how to reference theme colors in a <style> block. Is it not possible?

[quannt]

Well, here's my small class, really thought this was already a part of the library.

$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;


$--color-primary-text: #303133;
$--color-regular-text: #606266;
$--color-secondary-text: #909399;
$--color-placeholder-text: #C0C4CC;

@import './variable';

.text-success {
    color: $--color-success;
}
.text-warning {
    color: $--color-warning;
}
.text-danger {
    color: $--color-danger;
}
.text-info {
    color: $--color-info;
}
.text-primary {
    color: $--color-primary-text;
}
.text-regular {
    color: $--color-regular-text;
}
.text-secondary {
    color: $--color-secondary-text;
}
.text-placeholder {
    color: $--color-placeholder-text;
}

[ffxsam]

I wanted to share this solution, though it's very specific to the Vue webpack template (for those using vue-cli). This works great for me.

First, you'll want to use the Element theme CLI command to generate theme files, as described here.

Once you have your element-variables.scss file (you can throw away all the other dozens of files it creates), edit build/utils.js and change the loader for SCSS:

    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: [
          path.resolve(
            __dirname,
            '../src/assets/styles/element-variables.scss'
          ),
          path.resolve(__dirname, '../src/assets/styles/main.scss'),
        ],
      },
    }),

This assumes I'm putting my styles in src/assets/styles of course. I've also added my own main.scss file that contains variables and classes I'd like to be available throughout the Vue app in the <style> block.

Also be sure to install the node-sass, sass-loader, and sass-resources-loader as dev dependencies in your project if they aren't already.

Let me know if this works, or if I've forgotten a step! It's been awhile since I set it up.

[chmcphoy]

@ffxsam I take the same approach albeit using nuxt.js as is shown here. Standardized color & text classes that are explicitly stated in the components section would be a nice addition though.