Skip to content

feat: acrylic theme #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dnrovs wants to merge 9 commits into from
Closed

feat: acrylic theme #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a9cb03b
feat: acrylic theme
dnrovs Sep 6, 2025
7c13368
style: prettier
dnrovs Sep 6, 2025
e8801c3
fix: main window layout
dnrovs Sep 6, 2025
81084f8
fix: theme description
dnrovs Sep 6, 2025
8b429f3
fix: window header, turnstile and button changes
dnrovs Sep 7, 2025
ca0b93c
fix: minor fixes
dnrovs Sep 7, 2025
055c9b3
fix: added flex styling to the Unselect Paid button for consistent la…
dnrovs Sep 7, 2025
effac0e
feat: resize dialog styles
dnrovs Sep 7, 2025
5ba10cb
style: prettier
dnrovs Sep 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 57 additions & 39 deletions src/Auto-Image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,27 @@ import {
'pixel-blink': true,
},
},
Acrylic: {
primary: '#00000080',
secondary: '#00000040',
accent: 'rgba(0,0,0,0.75)',
text: '#ffffff',
highlight: '#ffffff',
success: '#00e500',
error: '#e50000',
warning: '#e5e500',
fontFamily: "'Inter', 'Apple Color Emoji'",
borderRadius: '10px',
borderStyle: 'solid',
borderWidth: '0px',
boxShadow: 'none',
backdropFilter: 'blur(20px)',
animations: {
glow: false,
scanline: false,
'pixel-blink': false,
},
},
},
currentTheme: 'Classic Autobot',
PAINT_UNAVAILABLE: true,
Expand Down Expand Up @@ -279,20 +300,19 @@ import {
*/
function applyTheme() {
const theme = getCurrentTheme();
// Toggle theme class on documentElement so CSS vars cascade to our UI
document.documentElement.classList.remove(
'wplace-theme-classic',
'wplace-theme-classic-light',
'wplace-theme-neon'
);

// Map CONFIG theme names to CSS class names
const themeClassMapping = {
'Classic Autobot': 'wplace-theme-classic',
'Classic Light': 'wplace-theme-classic-light',
'Neon Retro': 'wplace-theme-neon',
Acrylic: 'wplace-theme-acrylic',
};

// Toggle theme class on documentElement so CSS vars cascade to our UI
document.documentElement.classList.remove(
...Object.values(themeClassMapping)
);

const themeClass =
themeClassMapping[CONFIG.currentTheme] || 'wplace-theme-classic';

Expand All @@ -311,6 +331,7 @@ import {
'Classic Autobot': 'classic',
'Classic Light': 'classic-light',
'Neon Retro': 'neon',
Acrylic: 'acrylic',
};

const themeFileName = themeFileMapping[themeName] || 'classic';
Expand Down Expand Up @@ -4231,15 +4252,6 @@ import {
</div>
</div>

<!-- Automation Section -->
<div class="wplace-settings-section">
<label class="wplace-settings-section-label">
<i class="fas fa-robot wplace-icon-robot"></i>
${Utils.t('automation')}
</label>
<!-- Token generator is always enabled - settings moved to Token Source above -->
</div>

<!-- Overlay Settings Section -->
<div class="wplace-settings-section">
<label class="wplace-settings-section-label">
Expand Down Expand Up @@ -4423,12 +4435,13 @@ import {
</div>

<!-- Speed Control Toggle -->
<label class="wplace-speed-control-toggle">
<input type="checkbox" id="enableSpeedToggle" ${
CONFIG.PAINTING_SPEED_ENABLED ? 'checked' : ''
} class="wplace-speed-checkbox"/>
<span>${Utils.t('enablePaintingSpeedLimit')}</span>
</label>
<label class="wplace-settings-toggle">
<div>
<span class="wplace-settings-toggle-title">${Utils.t('enablePaintingSpeedLimit')}</span>
<p class="wplace-settings-toggle-description">Limits concurrent paint operations to prevent performance issues and ensure smoother rendering</p>
</div>
<input type="checkbox" id="enableSpeedToggle" ${CONFIG.PAINTING_SPEED_ENABLED ? 'checked' : ''} class="wplace-speed-checkbox"/>
</label>
</div>

<!-- Coordinate Generation Section -->
Expand Down Expand Up @@ -4518,23 +4531,28 @@ import {
Desktop Notifications
</label>
<div class="wplace-settings-section-wrapper wplace-notifications-wrapper">
<label class="wplace-notification-toggle">
<span>${Utils.t('enableNotifications')}</span>
<input type="checkbox" id="notifEnabledToggle" ${
state.notificationsEnabled ? 'checked' : ''
} class="wplace-notification-checkbox" />
<label class="wplace-settings-toggle">
<div>
<span class="wplace-settings-toggle-title">${Utils.t('enableNotifications')}</span>
<p class="wplace-settings-toggle-description">Receive browser notifications for important events and updates</p>
</div>
<input type="checkbox" id="notifEnabledToggle" ${state.notificationsEnabled ? 'checked' : ''} class="wplace-notification-checkbox" />
</label>
<label class="wplace-notification-toggle">
<span>${Utils.t('notifyOnChargesThreshold')}</span>
<input type="checkbox" id="notifOnChargesToggle" ${
state.notifyOnChargesReached ? 'checked' : ''
} class="wplace-notification-checkbox" />

<label class="wplace-settings-toggle">
<div>
<span class="wplace-settings-toggle-title">${Utils.t('notifyOnChargesThreshold')}</span>
<p class="wplace-settings-toggle-description">Get notified when your charges reach threshold limits</p>
</div>
<input type="checkbox" id="notifOnChargesToggle" ${state.notifyOnChargesReached ? 'checked' : ''} class="wplace-notification-checkbox" />
</label>
<label class="wplace-notification-toggle">
<span>${Utils.t('onlyWhenNotFocused')}</span>
<input type="checkbox" id="notifOnlyUnfocusedToggle" ${
state.notifyOnlyWhenUnfocused ? 'checked' : ''
} class="wplace-notification-checkbox" />

<label class="wplace-settings-toggle">
<div>
<span class="wplace-settings-toggle-title">${Utils.t('onlyWhenNotFocused')}</span>
<p class="wplace-settings-toggle-description">Only show notifications when the browser tab is not in focus</p>
</div>
<input type="checkbox" id="notifOnlyUnfocusedToggle" ${state.notifyOnlyWhenUnfocused ? 'checked' : ''} class="wplace-notification-checkbox" />
</label>
<div class="wplace-notification-interval">
<span>${Utils.t('repeatEvery')}</span>
Expand All @@ -4545,7 +4563,7 @@ import {
<button id="notifRequestPermBtn" class="wplace-btn wplace-btn-secondary wplace-notification-perm-btn"><i class="fas fa-unlock"></i><span>${Utils.t(
'grantPermission'
)}</span></button>
<button id="notifTestBtn" class="wplace-btn wplace-notification-test-btn"><i class="fas fa-bell"></i><span>${Utils.t(
<button id="notifTestBtn" class="wplace-btn wplace-btn-secondary wplace-notification-test-btn"><i class="fas fa-bell"></i><span>${Utils.t(
'test'
)}</span></button>
</div>
Expand Down Expand Up @@ -4709,7 +4727,7 @@ import {
<div class="wplace-row" style="display: flex;">
<button id="selectAllBtn" class="wplace-btn" style="flex: 1;">Select All</button>
<button id="unselectAllBtn" class="wplace-btn" style="flex: 1;">Unselect All</button>
<button id="unselectPaidBtn" class="wplace-btn">Unselect Paid</button>
<button id="unselectPaidBtn" class="wplace-btn" style="flex: 1;">Unselect Paid</button>
</div>
<div id="colors-container" class="wplace-color-grid"></div>
</div>
Expand Down
28 changes: 0 additions & 28 deletions src/auto-image-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2200,34 +2200,6 @@
transition: all 0.2s ease;
}

/* Theme and language selects */
#themeSelect:hover,
#languageSelect:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

#themeSelect:focus,
#languageSelect:focus {
border-color: #4facfe;
box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.3);
}

#themeSelect option,
#languageSelect option {
background: #2d3748;
color: white;
padding: 10px;
border-radius: 6px;
}

#themeSelect option:hover,
#languageSelect option:hover {
background: #4a5568;
}

/* Dragging state */
.wplace-dragging {
opacity: 0.9;
Expand Down
Loading