diff --git a/README.md b/README.md index 5f4689f..acbe894 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ It looks for `@dnb/eufemia` – nearest located from where this plugin is used ( 2. This plugin also wraps your application with the [``](https://eufemia.dnb.no/uilib/usage/customisation/theming/theme/) provider. If you want to wrap your apps by yourself, you can disable this by using this option: `wrapWithThemeProvider: false`. You could make your own wrapper like so: -```jsx +```tsx import { Theme } from '@dnb/eufemia/shared' import { useThemeHandler } from 'gatsby-plugin-eufemia-theme-handler' @@ -59,6 +59,9 @@ function ThemeProvider({ children }) { // (optional) defaults to "eufemia-theme" (localStorage) storageId: 'your-custom-id', + // (optional) whether to include your own local styles. More information down below. + includeLocalStyles: true, + // (optional) defines with a glob where the styles are placed inside of @dnb/eufemia/... filesGlobs: [ '**/style/dnb-ui-core.min.css', @@ -92,6 +95,7 @@ function ThemeProvider({ children }) { } ``` +<<<<<<< HEAD You can also import local themes. They need to start with `./` when defined in `filesGlobs` and the files need to include `theme-{theme-name}` in the name: ```js @@ -135,8 +139,96 @@ export default { ``` You can also use the interceptor methods from inside your components: +======= +### Your own theme styles + +You can also import your own local themes by enabling `includeLocalStyles`. +>>>>>>> c0bcd82 (feat: import local themes (#27)) + +```js +// gatsby-config.js +{ + plugins: [ + 'gatsby-plugin-sass', + { + resolve: 'gatsby-plugin-eufemia-theme-handler', + options: { + defaultTheme: 'ui', + includeLocalStyles: true, + themes: { + ui: { name: 'DNB Eufemia' }, + sbanken: { name: 'Sbanken' }, + }, + }, + }, + ], +} +``` + +Your file structure would then need to be as so (this can be customized): ```js +/src/.../styles/themes/theme-ui.scss +/src/.../styles/themes/theme-sbanken.scss +``` + +or + +```js +/src/.../styles/themes/.../theme-ui.scss +/src/.../styles/themes/.../theme-sbanken.scss +``` + +#### Further local theme styles customization + +They need to start with `./` when defined in `filesGlobs`: + +```ts +import { + filesGlobsFallback, + includeFilesFallback, +} from 'gatsby-plugin-eufemia-theme-handler/config.js' + +export default { + plugins: [ + 'gatsby-plugin-sass', + { + resolve: 'gatsby-plugin-eufemia-theme-handler', + options: { + verbose: true, + defaultTheme: 'ui', + storageId: 'eufemia-ui', + filesGlobs: [ + // Eufemia Styles + ...filesGlobsFallback, + + // Local themes + './**/styles/themes/**/*.css', + ], + includeFiles: [ + // Eufemia Styles + ...includeFilesFallback, + + // Local themes + '**/styles/themes/**/*.css', + ], + themes: { + ui: { name: 'DNB Eufemia' }, + sbanken: { name: 'Sbanken' }, + }, + }, + }, + ], +} +``` + +The file and folder structure is defined in `themeMatchers` and can also be customized if needed. + +### Switch a theme in runtime + +You can also use the interceptor methods from inside your components: + +```tsx // Your React Component import { getThemes, diff --git a/examples/ui-theme-example/gatsby-config.mjs b/examples/ui-theme-example/gatsby-config.mjs index ab0968b..594496a 100644 --- a/examples/ui-theme-example/gatsby-config.mjs +++ b/examples/ui-theme-example/gatsby-config.mjs @@ -1,8 +1,3 @@ -import { - filesGlobsFallback, - includeFilesFallback, -} from 'gatsby-plugin-eufemia-theme-handler/config.js' - export default { plugins: [ 'gatsby-plugin-sass', @@ -12,20 +7,7 @@ export default { verbose: true, defaultTheme: 'ui', storageId: 'eufemia-ui', - filesGlobs: [ - // Eufemia Styles - ...filesGlobsFallback, - - // Local styles - './**/styles/themes/**/*', - ], - includeFiles: [ - // Eufemia Styles - ...includeFilesFallback, - - // Local styles - '**/styles/themes/**/*', - ], + includeLocalStyles: true, themes: { ui: { name: 'DNB Eufemia' }, sbanken: { name: 'Sbanken' }, diff --git a/examples/ui-theme-example/src/styles/themes/theme-sbanken.scss b/examples/ui-theme-example/src/styles/themes/theme-sbanken.scss index dfaf056..9dccc00 100644 --- a/examples/ui-theme-example/src/styles/themes/theme-sbanken.scss +++ b/examples/ui-theme-example/src/styles/themes/theme-sbanken.scss @@ -1,3 +1,3 @@ -.eufemia-theme__sbanken { +.eufemia-theme { background: limegreen; } diff --git a/examples/ui-theme-example/src/styles/themes/theme-ui.scss b/examples/ui-theme-example/src/styles/themes/theme-ui.scss index 8f2f193..0efd76b 100644 --- a/examples/ui-theme-example/src/styles/themes/theme-ui.scss +++ b/examples/ui-theme-example/src/styles/themes/theme-ui.scss @@ -1,3 +1,3 @@ -.eufemia-theme__ui { +.eufemia-theme { background: tomato; } diff --git a/packages/gatsby-plugin-eufemia-theme-handler/src/collectThemes.ts b/packages/gatsby-plugin-eufemia-theme-handler/src/collectThemes.ts index d1f4a6d..42925b5 100644 --- a/packages/gatsby-plugin-eufemia-theme-handler/src/collectThemes.ts +++ b/packages/gatsby-plugin-eufemia-theme-handler/src/collectThemes.ts @@ -18,12 +18,17 @@ export function createThemesImport({ programDirectory, pluginOptions, }) { - const includeFiles = pluginOptions.includeFiles + const { filesGlobs, includeFiles } = pluginOptions + + if (pluginOptions.includeLocalStyles) { + filesGlobs.push('./**/styles/themes/**/*') + includeFiles.push('**/styles/themes/**/*') + } const packageRoot = path.dirname( require.resolve('@dnb/eufemia', { paths: [programDirectory] }) ) - const globbyPaths = pluginOptions.filesGlobs.map((glob) => { + const globbyPaths = filesGlobs.map((glob) => { if (glob.startsWith('./')) { return slash(path.join(programDirectory, glob)) }