Biofects Extract Theme for Home Assistant

A stunning sci-fi themed Home Assistant interface, featuring animated circuit board backgrounds, cyan/yellow color scheme, and futuristic aesthetics.

Preview

---

💸 Donations Welcome!

If you find this theme useful, please consider donating. Your support is greatly appreciated!

or

Features

✨ Animated Circuit Background - Moving circuit lines with glowing endpoints and pulsing nodes
🌟 Glowing Effects - Text shadows and border glows throughout the interface
📱 Fully Responsive - Works on desktop, tablet, and mobile
🎯 Custom Sidebar - Themed sidebar with blur effects and animations
⚡ Performance Optimized - Smooth canvas animations at 60fps

---

Installation via HACS (Recommended)

Prerequisites

1. HACS installed - Install HACS
2. card-mod installed via HACS:
   • Open HACS → Frontend
   • Search "card-mod"
   • Install and restart

Installation Steps

1. Add Custom Repository:

   • Open HACS
   • Click on Frontend
   • Click the three dots (top right)
   • Select Custom repositories
   • Add this URL: https://github.com/biofects/Biofects-Extract
   • Category: Theme
   • Click Add

2. Install the Theme:

   • Find "Biofects Extract Theme" in HACS
   • Click Download
   • Restart Home Assistant

3. Manually Copy Background Script ⚠️ (Required):

   Note: HACS themes can only install .yaml theme files. The JavaScript background must be copied manually.

   • Download biofects-extract-background.js from this repository's www/community/biofects-extract-background/ folder
   • Copy it to: config/www/community/biofects-extract-background/biofects-extract-background.js
   • Create the folders if they don't exist

4. Add Resource to Configuration:

   • Add to your configuration.yaml:

lovelace:
  mode: yaml
  resources:
    - url: /local/community/biofects-extract-background/biofects-extract-background.js
      type: module

• Restart Home Assistant

5. Activate the Theme:

   • Click your Profile (bottom left)
   • Select "Biofects Extract" from the Theme dropdown
   • Hard refresh your browser: Ctrl + Shift + R (Windows/Linux) or Cmd + Shift + R (Mac)

6. Verify:

   • Open browser console (F12)
   • Look for: ✅ Biofects Extract circuit background injected successfully!
   • You should see animated cyan circuit lines!

---

Manual Installation

If you prefer not to use HACS:

Click to expand manual installation steps

Step 1: Download Files

Download or clone this repository.

Step 2: Copy Theme File

1. Copy the themes/biofects-extract/ folder to config/themes/
2. Add to configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes

3. Restart Home Assistant

Step 3: Copy JavaScript File

1. Copy the entire www/ folder contents to config/www/
2. Your structure should be:

config/
├── themes/
│   └── biofects-extract/
│       └── biofects-extract.yaml
└── www/
    └── community/
        └── biofects-extract-background/
            └── biofects-extract-background.js

Step 4: Add Resource

1. Add to your configuration.yaml:

lovelace:
  mode: yaml
  resources:
    - url: /local/community/biofects-extract-background/biofects-extract-background.js
      type: module

2. Restart Home Assistant

Step 5: Activate Theme

1. Click your Profile (bottom left)
2. Select "Biofects Extract" from the Theme dropdown
3. Hard refresh your browser (Ctrl+Shift+R)

---

Troubleshooting

• No animation? Check browser console (F12) for the success message
• Theme not showing? Ensure you've restarted Home Assistant
• Colors look wrong? Try a hard refresh (Ctrl+Shift+R)

Credits

Created by Biofects

License

This project is licensed under the MIT License - see the LICENSE file for details.