Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何自定义主题 #40

Closed
youngjuning opened this issue Jun 27, 2018 · 3 comments
Closed

如何自定义主题 #40

youngjuning opened this issue Jun 27, 2018 · 3 comments

Comments

@youngjuning
Copy link

如何自定义主题,这是 antd 的方法,但是在 rn 项目中不适用

antd

@ccgitgit
Copy link

ccgitgit commented Jul 2, 2018

官方有例子 不过我不知道如何自定义覆盖brandPrimary和brandPrimaryTap的值,知道的麻烦告知。

@hezhii
Copy link

hezhii commented Nov 26, 2018

官方例子中覆盖主题的方法也就是通过一个脚本修改主题文件,找到相应的变量覆盖即可。
@ccgitgit

/// theme.js
const brandPrimary = '#4c6fff';
const brandPrimaryTap = '#3651d9';

module.exports = {
  brand_primary: brandPrimary,
  brand_primary_tap: brandPrimaryTap,
  primary_button_fill: brandPrimary,
  primary_button_fill_tap: brandPrimaryTap,
};
/// custom-rn-theme.js
const path = require('path');
const fs = require('fs');
const defaultVars = require('antd-mobile-rn/lib/style/themes/default.native');

const customVars = require('./theme');
const themePath = path.resolve(require.resolve('antd-mobile-rn'), '../style/themes/default.native.js');
const themeVars = Object.assign({}, defaultVars, customVars);

if (fs.statSync(themePath).isFile()) {
  // 修改下面的变量没有用,因为上面导入的时候,变量已经被替换成值了,只能在 theme.js 覆盖。
  fs.writeFileSync(
      themePath,
      'var brandPrimary = "#108ee9"; var brandPrimaryTap = "#1284d6";module.exports = ' + JSON.stringify(themeVars),
  );
}

@BANG88 BANG88 added this to the Reborn - 3.0.0 milestone Dec 2, 2018
@BANG88
Copy link
Member

BANG88 commented Dec 3, 2018

@hezhii 👍 另外请关注 #119 主题切换在3.0会重构,将来会更方便使用

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants