# @nuskin/foundation-theme

> This repository contains the theme required for the nuskin applications

Latest version **1.8.1** (published 2026-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nuskin/foundation-theme
pnpm add @nuskin/foundation-theme
yarn add @nuskin/foundation-theme
bun add @nuskin/foundation-theme
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.8.1 |
| Published | 2026-10-15 |
| First published | 2023-02-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nkranendonk, emoore, nuskin-cws, klau, rellenberger, akshay263, nishalk, aallani |
| Keywords | nuskin, nuskin themes, next.js, react |

## Links

- npm: https://www.npmjs.com/package/@nuskin/foundation-theme
- Repository: git@code.tls.nuskin.io:ns-am/content-foundation/foundation-theme
- Homepage: https://code.tls.nuskin.io/ns-am/content-foundation/foundation-theme/blob/master/README.md
- npm.io page: https://npm.io/package/@nuskin/foundation-theme

## Dependencies (5)

- [ramda](https://npm.io/package/ramda.md) ^0.29.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@mui/material](https://npm.io/package/@mui/material.md) 5.14.16
- [@emotion/cache](https://npm.io/package/@emotion/cache.md) ^11.11.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.8.1 (latest) — 2026-10-15
- 1.8.1-cx130-2446.1 (prerelease) — 2026-10-10
- 1.8.1-fixpackage.3 — 2025-08-05
- 1.8.1-fixpackage.2 — 2025-07-31
- 1.8.1-fixpackage.1 — 2025-07-31
- 1.8.1-td-2050.1 — 2025-06-25
- 1.8.0 — 2025-06-19
- 1.8.0-td-1837.5 — 2025-05-19
- 1.8.0-td-1837.4 — 2025-05-16
- 1.8.0-td-1837.3 — 2025-05-16
- 1.8.0-td-1837.2 — 2025-05-16
- 1.8.0-td-1837.1 — 2025-05-16
- 1.8.0-td-1472.3 — 2025-04-23
- 1.8.0-td-1472.2 — 2025-04-22
- 1.8.0-td-1472.1 — 2025-04-22
- … 54 more at https://npm.io/package/@nuskin/foundation-theme/versions

## README

<div align="right">
<a href='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-theme/badges/master/pipeline.svg'><img src='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-theme/badges/master/pipeline.svg' alt='Pipeline Badge' /></a>
<a href='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-theme/-/badges/release.svg'><img src='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-theme/-/badges/release.svg' alt='Latest Release Badge' /></a>
<a href='https://img.shields.io/npm/dt/%40nuskin/foundation-theme'><img src='https://img.shields.io/npm/dt/%40nuskin/foundation-theme' alt='Downloads Badge' /></a>
</div>

# @nuskin/foundation-themes

This repository houses a collection of Nuskin themes. Intended for utilization by developers across various teams, these themes serve as a standardized design system to ensure a consistent and cohesive visual identity throughout the Nuskin website.

#### Supports Dark Mode:
Enhance the user experience with a seamlessly integrated dark mode feature.

#### NuskinThemeProvider for Theme Change:
The repository includes a NuskinThemeProvider that simplifies the process of dynamically changing themes.

#### Tailwind CSS Utilities:
Utility CSS classes from Tailwind CSS included to provide a robust set of styling options.

## Latest Release

### [Released Versions](https://www.npmjs.com/package/@nuskin/foundation-theme?activeTab=versions)

## Installation Guide

### Clone the repository to your local machine

```shell
git clone git@code.tls.nuskin.io:ns-am/content-foundation/foundation-theme.git
```

## Usage

The following example illustrates how to use this project

```shell
import { NextGenThemeProvider, forceForGoodTheme, FoundationTheme } from '@nuskin/foundation-theme';
import { NsButton } from '@nuskin/foundation-ui-components';

import Button from '@mui/material/Button';

export function App1(props) {
    const theme = useMemo(() => {
        if (props.theme === 'forceForGood') {
            return forceForGoodTheme;
        }
    }, props.theme);
    const { palette = {} } = theme || {};
    const colorVariables = Object.keys(palette) as FoundationTheme.PaletteColors[];
    return (
        <NextGenThemeProvider isSSR cacheKey="app" theme={theme}>
            {colorVariables?.map((color, index) => (
                <NsButton variant="contained" color={color} key={color + index}>
                  `Button ${index}`
                </NsButton>

            ))}
        </NextGenThemeProvider>
    );
}

```

## Project Dependencies

### Emotion Libraries
- [@emotion/babel-plugin](https://www.npmjs.com/package/@emotion/babel-plugin): ^11.11.0
- [@emotion/cache](https://www.npmjs.com/package/@emotion/cache): ^11.11.0
- [@emotion/react](https://www.npmjs.com/package/@emotion/react): ^11.11.1
- [@emotion/styled](https://www.npmjs.com/package/@emotion/styled): ^11.11.0

### Material-UI
- [@mui/material](https://www.npmjs.com/package/@mui/material): 5.14.14

### Utility Libraries
- [lodash](https://www.npmjs.com/package/lodash): ^4.17.21
- [ramda](https://www.npmjs.com/package/ramda): ^0.29.1

## Testing

We use Jest for testing our project. Below are the available test scripts:

- Run all tests and generate coverage report:**
  ```bash
  yarn test
- Run tests for a specific pattern (e.g., accordion/*):
  ```bash
  yarn run test:pattern
- Run only failed tests from the last test run:
  ```bash
  yarn run test:failed
- Generate and view code coverage report:
  ```bash
  yarn run test:coverage

- The yarn test script builds the project using Next.js before running Jest tests.
- Feel free to customize the test patterns or add additional options as needed.

### Coverage Report:

After running tests, open the `index.html` file in the `coverage` directory to view the coverage report.

## Notes

### 1. To opt out of theme switching between light and dark mode, pass the `darkModeEnabled` prop with a `false` value.

### 2. The following example shows how to retrieve colors using **ColorUtils.color**
```shell
import { ColorUtils } from '@nuskin/foundation-theme';

const color = ColorUtils.color('primary', 'main')(validTheme);

```

### 3. The theme repository offers style exports through a Universal Module Definition (UMD) file.

### 4. Additionally, it provides convenient access to styling capabilities via the Styled and globalStyled features directly from the theme.

---
_Source: https://npm.io/package/@nuskin/foundation-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._