@aire-ux/aire-theme-material v0.0.16
Aire Theme Manager
This component is intended to be used by the Aire UX Theme Manager component. Nonetheless, it can be a useful way to alter styles within the DOM and respond to them
Installation
npm i @aire-ux/aire-theme-manager
Usage
Aire ThemeManager supports two types of styling changes out of the box:
Dynamic Page Inclusions
This is the simplest type of theming: the theme manager dynamically adds
and removes <link>
tags to the page for your components' consumption.
For better or worse, the CSS isolation of shadow-dom prevents this
styling from propagating to web-component based components.
import {Aire} from '@aire-ux/aire-theme-manager'
function setBootstrap() {
Aire.uninstallStyles();
Aire.installStyles([{
id: 'bootstrap',
url: 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css',
mode: Aire.Mode.Global
}])
}
function setMaterial() {
Aire.uninstallStyles();
Aire.installStyles([{
id: 'mdb',
url: 'https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css',
mode: Aire.Mode.Global
}])
}
Adopted Stylesheets (Shadow DOM)
This mode is the default for Aire components. Changes are propagated via
events to all listening components (
registered via the
@dynamicallyThemeable
decorator exported by @aire-ux/aire-theme-decorators
)
function setBootstrap() {
Aire.uninstallStyles();
Aire.installStyles([{
id: 'bootstrap',
url: 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css',
mode: Aire.Mode.Constructable
}])
}
function setMaterial() {
Aire.uninstallStyles();
Aire.installStyles([{
id: 'mdb',
url: 'https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css',
mode: Aire.Mode.Constructable
}])
}
Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
npm run lint
You can lint with ESLint and Prettier individually as well
npm run lint:eslint
npm run lint:prettier
To automatically fix many linting errors, run
npm run format
You can format using ESLint and Prettier individually as well
npm run format:eslint
npm run format:prettier
Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
npm run test
To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
npm run test:watch
Demoing with Storybook
To run a local instance of Storybook for your component, run
npm run storybook
To build a production version of Storybook, run
npm run storybook:build
Tooling configs
For most of the tools, the configuration is in the package.json
to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
Local Demo with web-dev-server
npm start
To run a local development server that serves the basic demo located in demo/index.html
3 years ago