Integration Guide: theme-injector.js

A simple tool to inject dynamic CSS themes into your website.

What is it?

theme-injector.js allows you to apply custom themes without directly modifying the site's original CSS files.

How does it work?

• Embed the script in your site:

<script src="https://sector02.dev/widgets/theme-injector.js"></script>

• The script will inject CSS variables into the DOM
• You can customize them using your own CSS

Example

Root variables for dark mode

:root {
    --color-primary: #6C63FF;
    --color-secondary: #3D5AFE;
    --color-background: #0B0C10;
    --color-surface: #1F2833;
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #cccccc;
    --color-text-tertiary: #999999;
}

Root variables for light mode

:root {
    --color-primary: #3D5AFE;
    --color-secondary: #6C63FF;
    --color-background: #f5f5f5;
    --color-surface: #ffffff;
    --color-text-primary: #111111;
    --color-text-secondary: #333333;
    --color-text-tertiary: #666666;
}

Benefits

• Easy to integrate
• Modular and customizable themes
• Compatible with WordPress and other CMSs