🎨 ReDesign - Spicetify CSS Editor

A modern, accessible Spicetify extension providing a floating CSS editor with syntax highlighting, live preview, and an enhanced color picker with OKLCH support.

Features

✨ Live CSS Editing

• Edit your Spotify theme CSS in real-time with instant preview
• Floating, draggable, and resizable editor window
• Minimize/maximize functionality that follows window resizing

🎨 Advanced Editor

• Syntax highlighting powered by Ace Editor
• Auto-completion and intelligent code suggestions
• Customizable font size and tab spacing
• Line numbers and code folding
• Multiple color themes for the editor

🍭 Advanced Color Picker

• ace-colorpicker with HEX, RGB, HSL
• OKLCH supported in conversion
• Previous-color swatch and full hue slider
• Scrollbar Hidden by default in the color picker - appears on hover or while scrolling

⚙️ Smart Features

• Auto-save option to persist changes automatically
• Word wrap for better readability
• Configurable hotkey to quickly open/close the editor
• Position memory - remembers where you placed it

🎯 Seamless Integration

• Native Spotify settings integration
• Follows Spotify's design language
• Properly aligned controls and spacing

Installation

Via Spicetify Marketplace (Recommended)

1. Install Spicetify
2. Install Spicetify Marketplace
3. Search for "ReDesign" in the Extensions tab
4. Click Install

Manual Installation

1. Download the latest release from the Releases page
2. Copy redesign.js to your Spicetify extensions folder:
   • Windows: %APPDATA%\spicetify\Extensions
   • Linux/macOS: ~/.config/spicetify/Extensions
3. Run the following commands:

   spicetify config extensions redesign.js
   spicetify apply

Build from Source

1. Clone this repository:

   git clone https://github.com/kalashnikxvxiii/redesign
   cd redesign

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. The compiled extension will be automatically placed in your Spicetify extensions folder
5. Apply the extension:

   spicetify apply

Usage

1. Open the Editor: Use your configured hotkey (default: Ctrl+Shift+E) or access it from Spotify's settings
2. Edit CSS: Type your CSS code in the editor
3. See Changes Live: Changes are applied immediately as you type
4. Save: Enable auto-save in settings, or your changes persist automatically
5. Customize: Access settings in Spotify's settings page under "ReDesign" section

Configuration

Access settings in Spotify Settings > ReDesign:

• Hotkey to open/close editor: Customize the keyboard shortcut
• Editor font size: Adjust font size for better readability
• Tab size: Set the number of spaces for tabs
• Enable Auto-save: Automatically save changes
• Show Line Numbers: Toggle line numbers visibility
• Enable word wrap: Wrap long lines for better viewing
• Editor color theme: Choose from multiple color schemes
• Save editor position: Remember editor position between sessions
• Restore default CSS: Reset to original Spotify CSS

Keyboard Shortcuts

Shortcut	Action
Ctrl+Shift+E	Toggle editor (customizable)
Ctrl+S	Save CSS (when auto-save is disabled)
Ctrl+F	Find in editor
Ctrl+H	Find and replace
Ctrl+/	Toggle comment
Ctrl+Z	Undo
Ctrl+Y	Redo

Development

📦 Project Structure

src/
├── app.tsx                    # Main extension component
├── css-editor-iframe.tsx      # Editor UI and state management
└── lib/
    ├── color-converter.ts     # Color format conversions
    ├── colorpicker-manager.ts # Color picker state machine
    ├── colorpicker-enhanced.css # Modern color picker styles
    ├── ace-colorpicker.min.js # Color picker library
    ├── settingsSection.tsx    # Settings UI component
    ├── settings.module.css    # Settings styles
    └── types/                 # TypeScript definitions (e.g. settings-field.ts)

scripts/
├── build.mjs                  # Build with esbuild
├── deploy.js                  # Deploy to Spicetify
├── test.js                    # Run test suite
└── verify.js                  # Verify deployment

docs/
└── DEVELOPMENT.md             # Development guide

🛠️ Available Commands

Command	Description
npm run build	Build extension
npm run watch	Build with file watching
npm test	Run test suite
npm run deploy	Full deployment pipeline
npm run deploy:quick	Quick deploy (skip tests)
npm run verify	Verify installation

🎨 Color Formats

The color picker supports:

• HEX: #FF5733, #FF5733FF (with alpha)
• RGB: rgb(255, 87, 51), rgba(255, 87, 51, 0.8)
• HSL: hsl(9, 100%, 60%), hsla(9, 100%, 60%, 0.8)
• OKLCH: oklch(0.620 0.220 29.0) (modern, perceptually uniform)

♿ Accessibility

• ✅ WCAG AA contrast compliance checking
• ✅ Keyboard navigation support
• ✅ Focus indicators
• ✅ Screen reader compatible
• ✅ High contrast mode support
• ✅ Reduced motion support

🧪 Testing

Run the comprehensive test suite:

npm test

Tests cover:

• File structure validation
• Color conversion accuracy
• Accessibility compliance
• CSS validation
• Performance benchmarks

🔧 Configuration

Editor Settings (in Spotify Preferences)

• Font Size: Adjust editor font size
• UI Theme: Dark or Light mode (affects which editor palettes are available)
• Editor Palette: Syntax highlighting theme; options are filtered by UI theme (18 dark and 18 light palettes)
• Auto-save: Enable/disable automatic saving
• Line Numbers: Show/hide line numbers
• Word Wrap: Enable/disable text wrapping
• Tab Size: Set indentation size

Hotkey

Default: F12 - Customize in Spotify Preferences

📊 Performance

Metric	Target	Status
Bundle Size	< 50KB	✅ ~37KB
Load Time	< 200ms	✅ ~150ms
Color Conversion	< 10ms	✅ ~5ms
Accessibility	WCAG AA	✅ Compliant

🐛 Troubleshooting

Editor doesn't open

• Verify Spicetify is installed: spicetify status
• Check hotkey in Spotify Preferences
• Restart Spotify

Color picker closes unexpectedly

• This is normal behavior - it closes when you move the mouse away
• Click the color preview again to reopen

CSS not applying

• Check CSS syntax (use browser DevTools)
• Ensure selectors are specific enough
• Try adding !important if needed

Colors look different

• Different color spaces render differently
• Use OKLCH for perceptually uniform colors
• Check your monitor's color profile

📚 Resources

• Spicetify Documentation
• WCAG 2.1 Guidelines
• OKLCH Color Space
• CSS Color Module Level 4

📝 Development

For development setup and contribution guidelines, see DEVELOPMENT.md.

📄 License

MIT License - See LICENSE file for details

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

👥 Credits

• Original project forked from Spotify CSS Editor
• Heavily modified and enhanced by me :)
• Built for Spicetify

License

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

Support

If you encounter any issues or have suggestions, please open an issue on GitHub.

---

Made with ❤️ for the Spicetify community