I am using brace which is a npm module for theming in ace editor. Currently, I am importing each theme using

import 'brace/theme/solarized_dark';

How do I import all the themes as I need to give the user the option to pick any theme.

I am using brace which is a npm module for theming in ace editor. Currently, I am importing each theme using

import 'brace/theme/solarized_dark';

How do I import all the themes as I need to give the user the option to pick any theme.

• javascript
• reactjs
• ecmascript-6
• es6-modules

2 Answers 2

Create one brace/themes/index.js and export the things that you want to acess

export * as theme1 from './theme1';
export * as theme2 from './theme2';
....

Then import from that folder : (name is index.js so no need to give full path to the file)

import * as SolDark 'brace/themes'; // by default get index.js

Then you can access each method like :

SolDark.theme1;
SolDark.theme2;

I don't know how does your file structure look like, but lets assume it is something like that

|brace |---theme | |---theme1 | |---theme2 | | ... | |---solarized_dark

Then you could create index.js in the theme folder and inside it:

//index.js
export {default as theme1} from './theme1';
export {default as theme2} from './theme2';

assuming you have default exports.

Then in other files you just simply do:

//other_file.js
import {theme1, theme2} from 'someRelativePath/brace/theme/index'

or

import * as themes from 'someRelativePath/brace/theme/index'