Command-line tools for theme development

Atomix Theme CLI

Validate, inspect, compare, and export themes from the command line. Integrate theme tools into your build process and CI/CD pipeline.

Command-Line Interface

The Atomix Theme CLI provides powerful command-line tools for theme validation, inspection, comparison, and export. Perfect for automation and CI/CD integration.

Installation

Global Installation

BASH

# Install globally
npm install -g @shohojdhara/atomix

# Verify installation
atomix-theme --version

5 lines99 characters

Project Installation

BASH

# Install as dev dependency
npm install --save-dev @shohojdhara/atomix

# Use with npx
npx atomix-theme --help

5 lines110 characters

Available Commands

Command	Description	Options
`validate`	Validate theme configuration	`--config`, `--strict`
`list`	List all available themes	-
`inspect`	Inspect a specific theme	`--theme`, `--json`
`compare`	Compare two themes	`--theme1`, `--theme2`
`export`	Export theme to JSON	`--theme`, `--output`
`help`	Show help information	-

Command Examples

Validate Theme

Validate a theme configuration file:

BASH

# Validate default config
atomix-theme validate

# Validate specific config file
atomix-theme validate --config ./my-theme.json

# Strict mode (fail on warnings)
atomix-theme validate --strict

8 lines192 characters

Validation checks for required properties, type correctness, color formats, and accessibility issues.

List Themes

Display all available themes:

BASH

# List all themes
atomix-theme list

# Output:
# Available themes:
#   - light (Light Theme)
#   - dark (Dark Theme)
#   - custom (Custom Theme)

8 lines144 characters

Inspect Theme

Get detailed information about a theme:

BASH

# Inspect theme (human-readable)
atomix-theme inspect --theme light

# Inspect theme (JSON output)
atomix-theme inspect --theme light --json

# Pipe to file
atomix-theme inspect --theme light --json > theme-info.json

8 lines216 characters

Compare Themes

Compare two themes and show differences:

BASH

# Compare two themes
atomix-theme compare --theme1 light --theme2 dark

# Compare theme files
atomix-theme compare --theme1 ./v1.json --theme2 ./v2.json

# Output differences only
atomix-theme compare --theme1 light --theme2 dark --diff-only

8 lines241 characters

Export Theme

Export a theme to JSON file:

BASH

# Export to default location
atomix-theme export --theme light

# Export to specific file
atomix-theme export --theme light --output ./themes/light.json

# Export with formatting
atomix-theme export --theme light --output ./light.json --pretty

8 lines243 characters

CI/CD Integration

GitHub Actions

Validate themes in your CI pipeline:

YAML

name: Validate Themes

on: [push, pull_request]

jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm install
      
      - name: Validate themes
        run: npx atomix-theme validate --strict
      
      - name: Compare with main
        if: github.event_name == 'pull_request'
        run: |
          git fetch origin main
          npx atomix-theme compare \
            --theme1 ./themes/current.json \
            --theme2 ./themes/new.json

28 lines659 characters

NPM Scripts

Add theme validation to package.json:

JSON

{
  "scripts": {
    "theme:validate": "atomix-theme validate",
    "theme:validate:strict": "atomix-theme validate --strict",
    "theme:list": "atomix-theme list",
    "theme:export": "atomix-theme export --theme custom --output ./dist/theme.json",
    "pretest": "npm run theme:validate"
  }
}

9 lines296 characters

Pre-commit Hook

Validate themes before committing:

BASH

# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# Validate theme files
npx atomix-theme validate --strict

# Exit if validation fails
if [ $? -ne 0 ]; then
  echo "Theme validation failed. Please fix errors before committing."
  exit 1
fi

12 lines252 characters

Configuration

Config File

Create atomix.config.ts in your project root:

TYPESCRIPT

import { defineConfig } from '@shohojdhara/atomix/config';

export default defineConfig({
  theme: {
    themes: {
      'my-theme': {
        type: 'css',
        name: 'My Theme',
        description: 'Custom theme',
        version: '1.0.0',
      },
    },
  },
});

14 lines269 characters

Environment Variables

Configure CLI behavior with environment variables:

BASH

# Set config file path
export ATOMIX_CONFIG=./config/atomix.config.ts

# Set theme directory
export ATOMIX_THEME_DIR=./src/themes

# Enable debug mode
export ATOMIX_DEBUG=true

8 lines175 characters

Troubleshooting

Common Issues

Command Not Found

If atomix-theme command is not found:

BASH

# Use npx instead
npx atomix-theme --help

# Or install globally
npm install -g @shohojdhara/atomix

5 lines99 characters

Config File Not Found

Ensure atomix.config.ts exists in project root:

BASH

# Check if config exists
ls atomix.config.ts

# Specify config path
atomix-theme validate --config ./path/to/config.ts

5 lines118 characters

Validation Errors

Run validation with verbose output:

BASH

# Verbose validation
atomix-theme validate --verbose

# Debug mode
ATOMIX_DEBUG=true atomix-theme validate

5 lines106 characters

Best Practices

Automate Validation

Add theme validation to your CI/CD pipeline and pre-commit hooks to catch issues early.

Use Strict Mode

Enable strict mode in CI to fail builds on warnings, ensuring high theme quality.

Version Control Themes

Export themes to JSON and commit them to version control. Use compare command to review changes in pull requests.

Document Breaking Changes

When comparing theme versions, document any breaking changes (removed or significantly changed properties) in your release notes.

Related Tools

The CLI complements the React devtools components:

→ Theme Inspector - Visual theme inspection → Theme Comparator - Visual theme comparison → Live Editor - Interactive theme editing ← Back to Devtools Overview

Command-line tools for theme development

Atomix Theme CLI

Validate, inspect, compare, and export themes from the command line. Integrate theme tools into your build process and CI/CD pipeline.

Command-Line Interface

The Atomix Theme CLI provides powerful command-line tools for theme validation, inspection, comparison, and export. Perfect for automation and CI/CD integration.

Installation

Global Installation

BASH

# Install globally
npm install -g @shohojdhara/atomix

# Verify installation
atomix-theme --version

5 lines99 characters

Project Installation

BASH

# Install as dev dependency
npm install --save-dev @shohojdhara/atomix

# Use with npx
npx atomix-theme --help

5 lines110 characters

Available Commands

Command	Description	Options
`validate`	Validate theme configuration	`--config`, `--strict`
`list`	List all available themes	-
`inspect`	Inspect a specific theme	`--theme`, `--json`
`compare`	Compare two themes	`--theme1`, `--theme2`
`export`	Export theme to JSON	`--theme`, `--output`
`help`	Show help information	-

Command Examples

Validate Theme

Validate a theme configuration file:

BASH

# Validate default config
atomix-theme validate

# Validate specific config file
atomix-theme validate --config ./my-theme.json

# Strict mode (fail on warnings)
atomix-theme validate --strict

8 lines192 characters

Validation checks for required properties, type correctness, color formats, and accessibility issues.

List Themes

Display all available themes:

BASH

# List all themes
atomix-theme list

# Output:
# Available themes:
#   - light (Light Theme)
#   - dark (Dark Theme)
#   - custom (Custom Theme)

8 lines144 characters

Inspect Theme

Get detailed information about a theme:

BASH

# Inspect theme (human-readable)
atomix-theme inspect --theme light

# Inspect theme (JSON output)
atomix-theme inspect --theme light --json

# Pipe to file
atomix-theme inspect --theme light --json > theme-info.json

8 lines216 characters

Compare Themes

Compare two themes and show differences:

BASH

# Compare two themes
atomix-theme compare --theme1 light --theme2 dark

# Compare theme files
atomix-theme compare --theme1 ./v1.json --theme2 ./v2.json

# Output differences only
atomix-theme compare --theme1 light --theme2 dark --diff-only

8 lines241 characters

Export Theme

Export a theme to JSON file:

BASH

# Export to default location
atomix-theme export --theme light

# Export to specific file
atomix-theme export --theme light --output ./themes/light.json

# Export with formatting
atomix-theme export --theme light --output ./light.json --pretty

8 lines243 characters

CI/CD Integration

GitHub Actions

Validate themes in your CI pipeline:

YAML

name: Validate Themes

on: [push, pull_request]

jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm install
      
      - name: Validate themes
        run: npx atomix-theme validate --strict
      
      - name: Compare with main
        if: github.event_name == 'pull_request'
        run: |
          git fetch origin main
          npx atomix-theme compare \
            --theme1 ./themes/current.json \
            --theme2 ./themes/new.json

28 lines659 characters

NPM Scripts

Add theme validation to package.json:

JSON

{
  "scripts": {
    "theme:validate": "atomix-theme validate",
    "theme:validate:strict": "atomix-theme validate --strict",
    "theme:list": "atomix-theme list",
    "theme:export": "atomix-theme export --theme custom --output ./dist/theme.json",
    "pretest": "npm run theme:validate"
  }
}

9 lines296 characters

Pre-commit Hook

Validate themes before committing:

BASH

# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# Validate theme files
npx atomix-theme validate --strict

# Exit if validation fails
if [ $? -ne 0 ]; then
  echo "Theme validation failed. Please fix errors before committing."
  exit 1
fi

12 lines252 characters

Configuration

Config File

Create atomix.config.ts in your project root:

TYPESCRIPT

import { defineConfig } from '@shohojdhara/atomix/config';

export default defineConfig({
  theme: {
    themes: {
      'my-theme': {
        type: 'css',
        name: 'My Theme',
        description: 'Custom theme',
        version: '1.0.0',
      },
    },
  },
});

14 lines269 characters

Environment Variables

Configure CLI behavior with environment variables:

BASH

# Set config file path
export ATOMIX_CONFIG=./config/atomix.config.ts

# Set theme directory
export ATOMIX_THEME_DIR=./src/themes

# Enable debug mode
export ATOMIX_DEBUG=true

8 lines175 characters

Troubleshooting

Common Issues

Command Not Found

If atomix-theme command is not found:

BASH

# Use npx instead
npx atomix-theme --help

# Or install globally
npm install -g @shohojdhara/atomix

5 lines99 characters

Config File Not Found

Ensure atomix.config.ts exists in project root:

BASH

# Check if config exists
ls atomix.config.ts

# Specify config path
atomix-theme validate --config ./path/to/config.ts

5 lines118 characters

Validation Errors

Run validation with verbose output:

BASH

# Verbose validation
atomix-theme validate --verbose

# Debug mode
ATOMIX_DEBUG=true atomix-theme validate

5 lines106 characters

Best Practices

Automate Validation

Add theme validation to your CI/CD pipeline and pre-commit hooks to catch issues early.

Use Strict Mode

Enable strict mode in CI to fail builds on warnings, ensuring high theme quality.

Version Control Themes

Export themes to JSON and commit them to version control. Use compare command to review changes in pull requests.

Document Breaking Changes

When comparing theme versions, document any breaking changes (removed or significantly changed properties) in your release notes.

Related Tools

The CLI complements the React devtools components:

→ Theme Inspector - Visual theme inspection → Theme Comparator - Visual theme comparison → Live Editor - Interactive theme editing ← Back to Devtools Overview

Getting Started

Documentation

Resources

Community

Atomix Theme CLI

Command-Line Interface

Installation

Global Installation

Project Installation

Available Commands

Command Examples

Validate Theme

List Themes

Inspect Theme

Compare Themes

Export Theme

CI/CD Integration

GitHub Actions

NPM Scripts

Pre-commit Hook

Configuration

Config File

Environment Variables

Troubleshooting

Common Issues

Command Not Found

Config File Not Found

Validation Errors

Best Practices

Automate Validation

Use Strict Mode

Version Control Themes

Document Breaking Changes

Related Tools

Atomix Theme CLI

Command-Line Interface

Installation

Global Installation

Project Installation

Available Commands

Command Examples

Validate Theme

List Themes

Inspect Theme

Compare Themes

Export Theme

CI/CD Integration

GitHub Actions

NPM Scripts

Pre-commit Hook

Configuration

Config File

Environment Variables

Troubleshooting

Common Issues

Command Not Found

Config File Not Found

Validation Errors

Best Practices

Automate Validation

Use Strict Mode

Version Control Themes

Document Breaking Changes

Related Tools