Documentation 🏠 Home 📚 API Reference 🎨 Themes & Colors 🎮 Interactions 🎛️ Animation Controls 📊 Performance 🏗️ Layered Backgrounds 💻 GitHub 📦 NPM 🎮 Live Demo

Class

ThemeManager

ThemeSystem.ThemeManager()

Theme utility functions

Constructor

# new ThemeManager()

View Source utils/themeSystem.js, line 356

Methods

# applyTheme(themeName) → {Object}

Apply a theme to animation settings

Parameters:
Name Type Description
themeName string

Name of the theme to apply

View Source utils/themeSystem.js, line 370

Theme configuration

Object

# createCustomTheme(name, config)

Create a custom theme

Parameters:
Name Type Description
name string

Theme name
config Object

Theme configuration

View Source utils/themeSystem.js, line 435

# createGradient(ctx, gradientType, coordinates) → {CanvasGradient}

Get gradient colors for canvas

Parameters:
Name Type Default Description
ctx CanvasRenderingContext2D

Canvas context
gradientType string primary

'primary', 'secondary', or 'accent'
coordinates Object

{x1, y1, x2, y2} for linear gradient

View Source utils/themeSystem.js, line 417

Canvas gradient object

CanvasGradient

# easeInOutCubic(t) → {number}

Cubic easing function

Parameters:
Name Type Description
t number

Time parameter (0-1)

View Source utils/themeSystem.js, line 635

Eased value

number

# enableThemeCycling(themes, intervalopt)

Enable automatic theme cycling

Parameters:
Name Type Attributes Default Description
themes Array

Array of theme names to cycle through
interval number <optional>
 10000

Time between changes in milliseconds

View Source utils/themeSystem.js, line 644

# getAnimationSettings(animationType) → {Object}

Generate theme-appropriate settings for animations

Parameters:
Name Type Description
animationType string

Type of animation

View Source utils/themeSystem.js, line 454

Animation-specific settings

Object

# getAvailableThemes() → {Array.<string>}

Get all available themes

View Source utils/themeSystem.js, line 484

Array of theme names

Array.<string>

# getBackgroundColor(opacityopt) → {string}

Get background color for current theme

Parameters:
Name Type Attributes Default Description
opacity number <optional>
 0.1

Background opacity

View Source utils/themeSystem.js, line 511

Background color with opacity

string

# getCurrentColors() → {Array.<string>}

Get current theme colors

View Source utils/themeSystem.js, line 501

Array of current colors

Array.<string>

# getCurrentThemeName() → {string}

Get current theme name

View Source utils/themeSystem.js, line 527

Current theme name or 'default'

string

# getEffectColor(effectType) → {string}

Get effect color from current theme

Parameters:
Name Type Description
effectType string

'glow', 'highlight', or 'shadow'

View Source utils/themeSystem.js, line 444

Hex color string

string

# getRandomColor(categoryopt) → {string}

Get random color from current theme

Parameters:
Name Type Attributes Default Description
category string <optional>
 'colors'

Color category ('colors', 'primary', 'secondary', 'accent')

View Source utils/themeSystem.js, line 387

Hex color string

string

# getRecommendedAnimations() → {Array.<string>}

Get recommended animations for current theme

View Source utils/themeSystem.js, line 492

Array of animation names

Array.<string>

# hasTheme() → {boolean}

Check if a theme is currently applied

View Source utils/themeSystem.js, line 535

True if a theme is applied

boolean

# interpolateColor(color1, color2, factor) → {string}

Interpolate between two colors

Parameters:
Name Type Description
color1 string

Start color (hex or rgb)
color2 string

End color (hex or rgb)
factor number

Interpolation factor (0-1)

View Source utils/themeSystem.js, line 595

Interpolated color

string

# parseColor(color) → {Object}

Parse color string to RGB object

Parameters:
Name Type Description
color string

Color string

View Source utils/themeSystem.js, line 611

RGB object

Object

# stopThemeCycling()

Stop automatic theme cycling

View Source utils/themeSystem.js, line 657

# toRgba(color, opacityopt) → {string}

Convert any color to rgba format

Parameters:
Name Type Attributes Default Description
color string

Input color (hex, rgb, rgba)
opacity number <optional>
 1

Opacity (0-1)

View Source utils/themeSystem.js, line 545

RGBA color string

string

# transitionToTheme(newTheme, durationopt, easingFunctionopt)

Smooth transition between themes

Parameters:
Name Type Attributes Default Description
newTheme string

Target theme name
duration number <optional>
 2000

Transition duration in milliseconds
easingFunction function <optional>

Custom easing function

View Source utils/themeSystem.js, line 556