Skip to content

Added reset for theme, preview for effects in profile #18347

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

Merged
snipe merged 5 commits into from
Dec 13, 2025
+101 −17
Merged

Added reset for theme, preview for effects in profile #18347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1112a40
Added reset button
snipe Dec 13, 2025
d7fa4a0
Tweaked colors
snipe Dec 13, 2025
6ad3154
Added confetti, sounds test on checkboxes
snipe Dec 13, 2025
951a4e3
New strings
snipe Dec 13, 2025
4658bf3
Removed user migration for colors
snipe Dec 13, 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
6 changes: 1 addition & 5 deletions database/migrations/2025_11_28_175733_add_link_colors_to_settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,7 @@ public function up(): void
'link_dark_color' => $link_dark_color,
'nav_link_color' => $nav_color,
'header_color' => $header_color]);

DB::table('users')->whereNull('skin')->update([
'link_light_color' => $link_light_color,
'link_dark_color' => $link_dark_color,
'nav_link_color' => $nav_color]);

}

}
Expand Down
3 changes: 3 additions & 0 deletions resources/lang/en-US/admin/settings/general.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@
'backups_logged_out' => 'All existing users, including you, will be logged out once your restore is complete.',
'backups_large' => 'Very large backups may time out on the restore attempt and may still need to be run via command line. ',
'barcode_settings' => 'Barcode Settings',
'color_preferences' => 'Color & Theme Settings',
'color_settings_help' => 'These settings will be used throughout Snipe-IT. Users are able to override the link colors by editing their account preferences to meet their individual readability requirements.',
'color_reset' => 'Reset to Default',
'confirm_purge' => 'Confirm Purge',
'confirm_purge_help' => 'Enter the text "DELETE" in the box below to purge your deleted records. This action cannot be undone and will PERMANENTLY delete all soft-deleted items and users. (You should make a backup first, just to be safe.)',
'custom_css' => 'Custom CSS',
Expand Down
3 changes: 2 additions & 1 deletion resources/lang/en-US/general.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -540,7 +540,8 @@
'light_mode' => 'Light Mode',
'dark_mode' => 'Dark Mode',
'light_dark' => 'Light/Dark Mode',
'system_default' => 'Use System Default',
'system_default' => 'Use System Settings',
'system_default_help' => 'This will reset your light/dark mode preferences to use the defaults set in your computer operating system preferences.',
'theme' => 'Theme',
'error_user_company' => 'Checkout target company and asset company do not match',
'error_user_company_multiple' => 'One or more of the checkout target company and asset company do not match',
Expand Down
52 changes: 49 additions & 3 deletions resources/views/account/profile.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,18 +71,23 @@
<label class="col-md-3 control-label" for="locale">{{ trans('general.light_dark') }}</label>
<div class="col-md-9">
<p class="form-control-static" style="padding-top: 7px;">
<a data-theme-toggle-clear class="btn btn-default btn-sm" href="{{ route('profile') }}">
<a data-theme-toggle-clear class="btn btn-theme btn-sm" href="{{ route('profile') }}">
{{ trans('general.system_default') }}
</a>
</p>

<p class="help-block">
{{ trans('general.system_default_help') }}
</p>
</p>
</div>
</div>


<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<label class="form-control">
<input type="checkbox" name="enable_sounds" value="1" {{ old('enable_sounds', $user->enable_sounds) ? 'checked' : '' }}>
<input type="checkbox" id="enable_sounds" name="enable_sounds" value="1" {{ old('enable_sounds', $user->enable_sounds) ? 'checked' : '' }}>
{{ trans('account/general.enable_sounds') }}
</label>
</div>
Expand All @@ -91,7 +96,7 @@
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<label class="form-control">
<input type="checkbox" name="enable_confetti" value="1" {{ old('enable_confetti', $user->enable_confetti) ? 'checked' : '' }}>
<input type="checkbox" name="enable_confetti" id="enable_confetti" value="1" {{ old('enable_confetti', $user->enable_confetti) ? 'checked' : '' }}>
{{ trans('account/general.enable_confetti') }}
</label>
</div>
Expand Down Expand Up @@ -264,6 +269,47 @@
localStorage.removeItem("theme");
});

$('#enable_sounds').on("click",function () {
if ($('#enable_sounds').is(":checked")) {
var audio = new Audio('{{ config('app.url') }}/sounds/success.mp3');
audio.play();
}

});

$('#enable_confetti').on("click",function () {
if ($('#enable_confetti').is(":checked")) {
var duration = 1500;
var animationEnd = Date.now() + duration;
var defaults = {startVelocity: 30, spread: 360, ticks: 60, zIndex: 0};

function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}

var interval = setInterval(function () {
var timeLeft = animationEnd - Date.now();

if (timeLeft <= 0) {
return clearInterval(interval);
}

var particleCount = 50 * (timeLeft / duration);
// since particles fall down, start a bit higher than random
confetti({
...defaults,
particleCount,
origin: {x: randomInRange(0.1, 0.3), y: Math.random() - 0.2}
});
confetti({
...defaults,
particleCount,
origin: {x: randomInRange(0.7, 0.9), y: Math.random() - 0.2}
});
}, 250);
}
});



$('#nav-link-color').colorpicker().on('changeColor', function(e) {
Expand Down
10 changes: 5 additions & 5 deletions resources/views/layouts/default.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@
--main-footer-bg-color: light-dark(#ffffff,#3d4144);
--main-footer-text-color: light-dark(#605e5e, #d2d6de);
--main-footer-top-border-color: light-dark(#d2d6de,#605e5e);
--main-theme-color: {{ $snipeSettings->header_color ?? '#5fa4cc' }};
--nav-hover-text-color: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l - 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
--nav-primary-text-color: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l - 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
--main-theme-color: {{ $snipeSettings->header_color ?? '#3c8dbc' }};
--nav-hover-text-color: {{ $nav_link_color ?? 'hsl(from var(--main-theme-color) h s calc(l - 10))' }};
--nav-primary-text-color: {{ $nav_link_color ?? '#ffffff' }};
--search-highlight: #e9d15b;
--sidenav-hover-color-bg: #4c4b4b;
--sidenav-text-hover-color: #fff;
Expand All @@ -63,7 +63,7 @@
--table-stripe-bg-alt: light-dark(rgba(211, 211, 211, 0.25), #323131);
--table-stripe-bg: light-dark(#ffffff, #494747);
--text-danger: light-dark(#a94442, #fa5b48);
--text-help: light-dark(#605e5e,#a6a4a4);
--text-help: light-dark(#777676,#a6a4a4);
--text-info: light-dark(#31708f,#2baae6);
--text-success: light-dark(#039516,#4ced61);
--text-warning: light-dark(#da9113,#f3a51f);
Expand Down Expand Up @@ -672,7 +672,7 @@


.help-block {
color: var(--text-help);
color: var(--text-help) !important;
}

.alert-msg,
Expand Down
44 changes: 41 additions & 3 deletions resources/views/settings/branding.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,11 @@ class="form-horizontal"
</div>
</div>

<fieldset name="color-preferences">
<x-form-legend help_text="{!! trans('admin/settings/general.color_settings_help') !!}">
{{ trans('admin/settings/general.color_preferences') }}
</x-form-legend>

<!-- Header color -->
<div class="form-group {{ $errors->has('header_color') ? 'error' : '' }}">
<label for="header_color" class="col-md-3 control-label">{{ trans('admin/settings/general.header_color') }}</label>
Expand All @@ -86,7 +91,7 @@ class="form-horizontal"
<div class="form-group {{ $errors->has('nav_link_color') ? 'error' : '' }}">
<label for="nav_link_color" class="col-md-3 control-label">{{ trans('admin/settings/general.nav_link_color') }}</label>
<div class="col-md-9">
<x-input.colorpicker :item="$setting" placeholder="#ffffff" div_id="nav-link-color" id="nav-link-color" :value="old('nav_link_color', ($setting->nav_link_color ?? '#ffffff'))" name="nav_link_color" />
<x-input.colorpicker :item="$setting" placeholder="#ffffff" div_id="nav-link-color" id="nav_link_color" :value="old('nav_link_color', ($setting->nav_link_color ?? '#ffffff'))" name="nav_link_color" />
{!! $errors->first('nav_link_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
<p class="help-block">{{ trans('admin/settings/general.nav_link_color_help') }}</p>
</div>
Expand All @@ -112,6 +117,17 @@ class="form-horizontal"
</div>
</div>

<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<p class="form-control-static" style="padding-top: 7px;">
<a data-theme-toggle-clear class="btn btn-default btn-sm" onClick(return false;);>
{{ trans('admin/settings/general.color_reset') }}
</a>
</p>
</div>
</div>
</fieldset>

<fieldset name="logo-preferences">
<x-form-legend>
{{ trans('admin/settings/general.legends.logos') }}
Expand Down Expand Up @@ -269,7 +285,7 @@ class="form-control"
</fieldset>
<!-- colors and skins -->

<fieldset name="color-preferences">
<fieldset name="css-preferences">
<x-form-legend>
{{ trans('admin/settings/general.custom_css') }}
</x-form-legend>
Expand Down Expand Up @@ -439,6 +455,7 @@ class="form-control"

// This takes the color from the color picker to show a live preview
$(function() {

$('#header-color').colorpicker().on('changeColor', function(e) {
var color = e.color.toString('rgba');
$('.main-header .navbar, .header-preview, .left-navblock, .navbar-custom-menu > .navbar-nav, .navbar-custom-menu > .navbar-nav > li > .navbar-form, .navbar-nav > li > a:link, .navbar-nav > li > a').css('background-color', color);
Expand All @@ -448,16 +465,37 @@ class="form-control"
$('#nav-link-color').colorpicker().on('changeColor', function(e) {
var color = e.color.toString('rgba');
var header_color = $('#header_color').val();
console.log(header_color);

// $('.navbar-nav > li > a').css('background-color', header_color);
$('.navbar-nav > li > a:link').attr('style','color: '+ color +' !important').css('background-color', header_color);
$('.btn-theme').attr('style','color: '+ color +' !important').css('background-color', header_color);

});

/**
* 5. Add an event listener to toggle the reset
*/
clearButton.addEventListener("click", (event) => {

var header_color = '#3c8dbc';
var nav_link_color = '#ffffff';
var link_light_color = '#296282';
var link_dark_color = '#5fa4cc';

$('#header_color').val(header_color);
$('#nav_link_color').val(nav_link_color);
$('#link_light_color').val(link_light_color);
$('#link_dark_color').val(link_dark_color);

$('.main-header .navbar, .header-preview, .left-navblock, .navbar-custom-menu > .navbar-nav, .navbar-custom-menu > .navbar-nav > li > .navbar-form, .navbar-nav > li > a:link, .navbar-nav > li > a').css('background-color', header_color);
$('.btn-theme').css('background-color', header_color);

$('.navbar-nav > li > a:link').attr('style','color: '+ nav_link_color +' !important').css('background-color', header_color);
$('.btn-theme').attr('style','color: '+ nav_link_color +' !important').css('background-color', header_color);

return false;
});

});

</script>
Expand Down
Loading