| 3963 | 3963 | `, |
| 3964 | 3964 | })); |
| 3965 | 3965 | SlashCommandParser.addCommandObject(SlashCommand.fromProps({ |
| 3966 | + name: 'css-var', |
| 3967 | + /** @param {{to: string, varname: string }} args @param {string} value @returns {string} */ |
| 3968 | + callback: (args, value) => { |
| 3969 | + // Map enum to target selector |
| 3970 | + const targetSelector = { |
| 3971 | + chat: '#chat', |
| 3972 | + background: '#bg1', |
| 3973 | + gallery: '#draggable_gallery', |
| 3974 | + zoomedAvatar: 'div.zoomed_avatar', |
| 3975 | + }[args.to || 'chat']; |
| 3976 | + |
| 3977 | + if (!targetSelector) { |
| 3978 | + toastr.error(`Invalid target: ${args.to}`); |
| 3979 | + return; |
| 3980 | + } |
| 3981 | + |
| 3982 | + if (!args.varname) { |
| 3983 | + toastr.error('CSS variable name is required'); |
| 3984 | + return; |
| 3985 | + } |
| 3986 | + if (!args.varname.startsWith('--')) { |
| 3987 | + toastr.error('CSS variable names must start with "--"'); |
| 3988 | + return; |
| 3989 | + } |
| 3990 | + |
| 3991 | + const elements = document.querySelectorAll(targetSelector); |
| 3992 | + if (elements.length === 0) { |
| 3993 | + toastr.error(`No elements found for ${args.to ?? 'chat'} with selector "${targetSelector}"`); |
| 3994 | + return; |
| 3995 | + } |
| 3996 | + |
| 3997 | + elements.forEach(element => { |
| 3998 | + element.style.setProperty(args.varname, value); |
| 3999 | + }); |
| 4000 | + |
| 4001 | + console.info(`Set CSS variable "${args.varname}" to "${value}" on "${targetSelector}"`); |
| 4002 | + }, |
| 4003 | + namedArgumentList: [ |
| 4004 | + SlashCommandNamedArgument.fromProps({ |
| 4005 | + name: 'varname', |
| 4006 | + description: 'CSS variable name (starting with double dashes)', |
| 4007 | + typeList: [ARGUMENT_TYPE.STRING], |
| 4008 | + isRequired: true, |
| 4009 | + }), |
| 4010 | + SlashCommandNamedArgument.fromProps({ |
| 4011 | + name: 'to', |
| 4012 | + description: 'The target element to which the CSS variable will be applied', |
| 4013 | + typeList: [ARGUMENT_TYPE.STRING], |
| 4014 | + enumList: [ |
| 4015 | + new SlashCommandEnumValue('chat', null, enumTypes.enum, enumIcons.message), |
| 4016 | + new SlashCommandEnumValue('background', null, enumTypes.enum, enumIcons.image), |
| 4017 | + new SlashCommandEnumValue('zoomedAvatar', null, enumTypes.enum, enumIcons.character), |
| 4018 | + new SlashCommandEnumValue('gallery', null, enumTypes.enum, enumIcons.image), |
| 4019 | + ], |
| 4020 | + defaultValue: 'chat', |
| 4021 | + }), |
| 4022 | + ], |
| 4023 | + unnamedArgumentList: [ |
| 4024 | + SlashCommandArgument.fromProps({ |
| 4025 | + description: 'CSS variable value', |
| 4026 | + typeList: [ARGUMENT_TYPE.STRING], |
| 4027 | + isRequired: true, |
| 4028 | + }), |
| 4029 | + ], |
| 4030 | + helpString: ` |
| 4031 | + <div> |
| 4032 | + Sets a CSS variable to a specified value on a target element. |
| 4033 | + <br /> |
| 4034 | + Only setting of variable names is supported. They have to be prefixed with double dashes ("--exampleVar"). |
| 4035 | + Setting actual CSS properties is not supported. Custom CSS in the theme settings can be used for that. |
| 4036 | + <br /><br /> |
| 4037 | + <b>This value will be gone after a page reload!</b> |
| 4038 | + </div> |
| 4039 | + <div> |
| 4040 | + <strong>Example:</strong> |
| 4041 | + <ul> |
| 4042 | + <li> |
| 4043 | + <pre><code>/css-var varname="--SmartThemeBodyColor" #ff0000</code></pre> |
| 4044 | + Sets the text color of the chat to red |
| 4045 | + </li> |
| 4046 | + <li> |
| 4047 | + <pre><code>/css-var to=zoomedAvatar varname="--SmartThemeBlurStrength" 0</code></pre> |
| 4048 | + Remove the blur from the zoomed avatar |
| 4049 | + </li> |
| 4050 | + </ul> |
| 4051 | + </div> |
| 4052 | + `, |
| 4053 | + })); |
| 4054 | + SlashCommandParser.addCommandObject(SlashCommand.fromProps({ |
| 3966 | 4055 | name: 'movingui', |
| 3967 | 4056 | callback: setmovingUIPreset, |
| 3968 | 4057 | unnamedArgumentList: [ |