Skip to content

Commit

Permalink
update theme md
Browse files Browse the repository at this point in the history
  • Loading branch information
iamkun committed Jun 26, 2019
1 parent 0eaa789 commit 926cf39
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 11 deletions.
8 changes: 4 additions & 4 deletions examples/docs/en-US/custom-theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide four ways to change the style variables.

### Online Theme Roller
Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components,and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components,and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' part of this section).

<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">

Expand Down Expand Up @@ -92,16 +92,16 @@ $--color-primary: red;
```

#### <strong>Build theme</strong>
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name. By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`.
```shell
et

> ✔ build theme font
> ✔ build element theme
```

### Use custom theme
#### <strong>Import custom theme</strong>
By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":

```javascript
import '../theme/index.css'
Expand Down
7 changes: 4 additions & 3 deletions examples/docs/es/custom-theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 4 maneras de modificar los estilos.

### Online Theme Roller
Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and components,and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and components,and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or part of this section).

<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">

Expand Down Expand Up @@ -92,16 +92,17 @@ $--color-primary: red;
```

#### <strong>Construyendo el tema</strong>
Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre.
Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre. Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`.
```shell
et

> ✔ build theme font
> ✔ build element theme
```

### Use custom theme
#### <strong>Importar un tema personalizado</strong>
Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:
Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":

```javascript
import '../theme/index.css'
Expand Down
8 changes: 4 additions & 4 deletions examples/docs/zh-CN/custom-theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Element 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。我们提供了四种方法,可以进行不同程度的样式自定义。

### 在线主题编辑器
使用[在线主题编辑器](./#/zh-CN/theme),可以修改定制 Element 所有全局和组件的 Design Tokens,并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包,供直接下载使用(关于如何使用下载的主题包,请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分)。
使用[在线主题编辑器](./#/zh-CN/theme),可以修改定制 Element 所有全局和组件的 Design Tokens,并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包,供直接下载使用(关于如何使用下载的主题包,请参考本节「引入自定义主题」部分)。

<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">

Expand Down Expand Up @@ -91,16 +91,16 @@ $--color-primary: red;
```

#### <strong>编译主题</strong>
保存文件后,到命令行里执行 `et` 编译主题,如果你想启用 `watch` 模式,实时编译主题,增加 `-w` 参数;如果你在初始化时指定了自定义变量文件,则需要增加 `-c` 参数,并带上你的变量文件名
保存文件后,到命令行里执行 `et` 编译主题,如果你想启用 `watch` 模式,实时编译主题,增加 `-w` 参数;如果你在初始化时指定了自定义变量文件,则需要增加 `-c` 参数,并带上你的变量文件名。默认情况下编译的主题目录是放在 `./theme` 下,你可以通过 `-o` 参数指定打包目录。
```shell
et

> ✔ build theme font
> ✔ build element theme
```

### 使用自定义主题
#### <strong>引入自定义主题</strong>
默认情况下编译的主题目录是放在 `./theme` 下,你可以通过 `-o` 参数指定打包目录。像引入默认主题一样,在代码里直接引用 `theme/index.css` 文件即可。
和引入默认主题一样,在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 `theme/index.css` 文件即可。

```javascript
import '../theme/index.css'
Expand Down

0 comments on commit 926cf39

Please sign in to comment.