World.CSS

Real-time ambient theming that adapts to your environment

📚 Documentation 📦 View on GitHub

✨ Features

🌅

Solar-Based Theming

Automatically adapts colors based on solar elevation - from deep night to bright noon, your interface evolves with the day.

🌤️

Weather Integration

Incorporates real-time weather data to enhance the ambient experience with temperature and condition-based adjustments.

🎨

Customizable Colors

Full control over your color palette with easy configuration files for every phase of the day.

⚡

Performance Optimized

Lightweight and efficient with intelligent caching and minimal impact on your application's performance.

🔧

Multi-Backend Support

Works with PHP, Node.js, Python, and Ruby backends - choose your preferred technology stack.

📱

Framework Agnostic

Integrates seamlessly with React, Vue, Angular, or vanilla JavaScript - no framework lock-in.

🚀 Installation

Quick Start

# Clone the repository
git clone https://github.com/Nom-nom-hub/World-CSS.git
cd World-CSS

# Include World.CSS in your HTML
<link rel="stylesheet" href="assets/world.css">
<script src="assets/world.js"></script>
<script src="assets/world-config.js"></script>

Backend Setup

Choose your preferred backend technology:

🐘 PHP

Perfect for traditional web hosting

# Copy backend files
cp backend/world.php /your-project/
cp backend/config.php /your-project/

# Set up .env file
OPENWEATHER_API_KEY=your_api_key

🟢 Node.js

Modern JavaScript backend

# Install dependencies
npm install

# Start server
npm start

🐍 Python

Flask-based backend

# Install dependencies
pip install -r requirements.txt

# Start server
python python-app.py

💎 Ruby

Sinatra-based backend

# Install dependencies
bundle install

# Start server
ruby ruby-app.rb

📚 Documentation

Configuration

Customize your World.CSS experience with the configuration file:

const WorldCSSConfig = {
    // API Configuration
    api: {
        endpoint: '/backend/world.php'
    },
    
    // Phase Configuration
    phases: {
        night: {
            background: { hue: 240, saturation: 80, lightness: 15 },
            accent: { hue: 280, saturation: 70, lightness: 40 }
        },
        day: {
            background: { hue: 45, saturation: 60, lightness: 65 },
            accent: { hue: 30, saturation: 80, lightness: 55 }
        }
        // ... more phases
    }
};

CSS Variables

World.CSS provides these CSS custom properties:

Background Colors

  • --background-color
  • --background-hue
  • --background-saturation
  • --background-lightness

Accent Colors

  • --accent-color
  • --accent-hue
  • --accent-saturation
  • --accent-lightness

Text & UI

  • --text-color
  • --text-shadow
  • --border-color

JavaScript API

// Get current state
const state = window.worldcss.state;

// Manual theme application
window.worldcss.applyTheme();

// Listen for theme updates
document.addEventListener('worldcss:update', () => {
    console.log('Theme updated!');
});

// Set mode (auto/light/dark)
window.worldcss.setMode('auto');

💡 Examples

Basic Integration

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="assets/world.css">
    <script src="assets/world.js"></script>
    <script src="assets/world-config.js"></script>
</head>
<body>
    <div class="app">
        <h1>My World.CSS App</h1>
        <p>This text adapts to the current theme!</p>
    </div>
</body>
</html>

Custom Styling

/* Your custom CSS */
.my-component {
    background: var(--background-color);
    color: var(--text-color);
    border: 2px solid var(--accent-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.button {
    background: var(--accent-color);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}