Skip to content

Commit

Permalink
Theme support (#663)
Browse files Browse the repository at this point in the history
Co-authored-by: ButterscotchV <[email protected]>
  • Loading branch information
ImUrX and ButterscotchV committed Apr 8, 2023
1 parent 30adeb2 commit 0ad3b9f
Show file tree
Hide file tree
Showing 17 changed files with 432 additions and 190 deletions.
2 changes: 1 addition & 1 deletion gui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
"prettier": "^2.7.1",
"pretty-quick": "^3.1.3",
"tailwind-gradient-mask-image": "^1.0.0",
"tailwindcss": "^3.0.23",
"tailwindcss": "^3.3.1",
"vite": "^4.0.3"
}
}
1 change: 1 addition & 0 deletions gui/public/i18n/en/translation.ftl
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,7 @@ settings-general-interface-feedback_sound = Feedback sound
settings-general-interface-feedback_sound-description = This option will play a sound when a reset is triggered
settings-general-interface-feedback_sound-label = Feedback sound
settings-general-interface-feedback_sound-volume = Feedback sound volume
settings-general-interface-theme = Color theme
settings-general-interface-lang = Select language
settings-general-interface-lang-description = Change the default language you want to use.
settings-general-interface-lang-placeholder = Select the language to use
Expand Down
8 changes: 5 additions & 3 deletions gui/src/components/commons/BaseModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,16 @@ export function BaseModal({
overlayClassName={
props.overlayClassName ||
classNames(
'fixed top-0 right-0 left-0 bottom-0 flex flex-col justify-center items-center w-full h-full bg-background-90 bg-opacity-60 z-20'
'fixed top-0 right-0 left-0 bottom-0 flex flex-col justify-center',
'items-center w-full h-full bg-background-90 bg-opacity-60 z-20'
)
}
className={
props.className ||
classNames(
props.className as string,
'items-center focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent outline-none bg-background-60 p-6 rounded-lg text-white'
'items-center focus:ring-transparent focus:ring-offset-transparent',
'focus:outline-transparent outline-none bg-background-60 p-6 rounded-lg',
'text-background-10'
)
}
>
Expand Down
2 changes: 1 addition & 1 deletion gui/src/components/commons/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function CheckBox({
<div
className={classNames(
{
'bg-background-60 rounded-lg text-white': outlined,
'bg-background-60 rounded-lg text-background-10': outlined,
'text-background-30': !outlined,
},
'flex items-center gap-2 w-full'
Expand Down
6 changes: 3 additions & 3 deletions gui/src/components/commons/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function Dropdown({
<div className="relative w-fit">
<div
className={classNames(
'min-h-[35px] text-white px-5 py-2.5 rounded-md focus:ring-4 text-center',
'min-h-[35px] text-background-10 px-5 py-2.5 rounded-md focus:ring-4 text-center',
'flex cursor-pointer',
variant == 'primary' &&
'bg-background-60 hover:bg-background-50',
Expand Down Expand Up @@ -109,11 +109,11 @@ export function Dropdown({
alignment === 'left' && 'left-0'
)}
>
<ul className="py-1 text-sm text-gray-200 flex flex-col pr-2">
<ul className="py-1 text-sm text-background-20 flex flex-col pr-2">
{items.map((item) => (
<li
className={classNames(
'py-2 px-4 hover:text-white min-w-max cursor-pointer',
'py-2 px-4 hover:text-background-10 min-w-max cursor-pointer',
variant == 'primary' && 'hover:bg-background-50',
variant == 'secondary' && 'hover:bg-background-60'
)}
Expand Down
7 changes: 5 additions & 2 deletions gui/src/components/commons/Radio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,17 @@ export function Radio({
>
<input
type="radio"
className="text-accent-background-30 focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent"
className={classNames(
'text-accent-background-30 focus:ring-transparent',
'focus:ring-offset-transparent focus:outline-transparent'
)}
name={name}
ref={ref}
onChange={onChange}
value={value}
checked={value == checked}
{...props}
></input>
/>
<div className="flex flex-col gap-2">
<Typography bold>{label}</Typography>
{desciption && (
Expand Down
45 changes: 45 additions & 0 deletions gui/src/components/commons/ThemeSelector.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import classNames from 'classnames';
import { Control, Controller } from 'react-hook-form';

export function ThemeSelector({
control,
name,
value,
// input props
disabled,
colors,
...props
}: {
control: Control<any>;
name: string;
colors: string | undefined;
value: string | number;
} & React.HTMLProps<HTMLInputElement>) {
return (
<Controller
control={control}
name={name}
render={({ field: { onChange, ref, name, value: checked } }) => (
<input
type="radio"
className={classNames(
colors,
'focus:ring-transparent focus:ring-offset-transparent',
'focus:outline-transparent appearance-none border-4 border-solid',
'border-transparent checked:!border-accent-background-30 w-16 h-16'
)}
style={{
WebkitTextFillColor: 'transparent',
}}
name={name}
ref={ref}
onChange={onChange}
value={value}
checked={value == checked}
disabled={disabled}
{...props}
/>
)}
/>
);
}
16 changes: 5 additions & 11 deletions gui/src/components/commons/icon/CloseIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import classNames from 'classnames';

export function CloseIcon({
className,
size = 35,
Expand All @@ -9,21 +11,13 @@ export function CloseIcon({
<svg
width={size}
height={size}
className={className}
className={classNames('stroke-window-icon', className)}
viewBox="0 0 31 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.3804 17.8804L12.619 11.119"
stroke="#C0A1D8"
strokeLinecap="round"
/>
<path
d="M12.6196 17.8804L19.381 11.119"
stroke="#C0A1D8"
strokeLinecap="round"
/>
<path d="M19.3804 17.8804L12.619 11.119" strokeLinecap="round" />
<path d="M12.6196 17.8804L19.381 11.119" strokeLinecap="round" />
</svg>
);
}
9 changes: 4 additions & 5 deletions gui/src/components/commons/icon/MaximiseIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import classNames from 'classnames';

export function MaximiseIcon({ className }: { className?: string }) {
return (
<svg
width="35"
height="35"
className={className}
className={classNames('stroke-window-icon', className)}
viewBox="0 0 31 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 11.5H14C13.1716 11.5 12.5 12.1716 12.5 13V17C12.5 17.8284 13.1716 18.5 14 18.5H18C18.8284 18.5 19.5 17.8284 19.5 17V13C19.5 12.1716 18.8284 11.5 18 11.5Z"
stroke="#C0A1D8"
/>
<path d="M18 11.5H14C13.1716 11.5 12.5 12.1716 12.5 13V17C12.5 17.8284 13.1716 18.5 14 18.5H18C18.8284 18.5 19.5 17.8284 19.5 17V13C19.5 12.1716 18.8284 11.5 18 11.5Z" />
</svg>
);
}
6 changes: 4 additions & 2 deletions gui/src/components/commons/icon/MinimiseIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import classNames from 'classnames';

export function MinimiseIcon({ className }: { className?: string }) {
return (
<svg
width="35"
height="35"
className={className}
className={classNames('stroke-window-icon', className)}
viewBox="0 0 31 29"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20.5 15.5H10.5" stroke="#C0A1D8" strokeLinecap="round" />
<path d="M20.5 15.5H10.5" strokeLinecap="round" />
</svg>
);
}
9 changes: 3 additions & 6 deletions gui/src/components/commons/icon/ResetIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,18 @@ export function FullResetIcon({ width = 33 }: { width?: number }) {
width={width}
height="29"
viewBox="0 0 33 29"
className="stroke-background-10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.39801 3.061V11.524H10.861"
stroke="white"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.93801 18.576C6.85461 21.1713 8.58991 23.3983 10.8824 24.9215C13.1749 26.4447 15.9003 27.1816 18.648 27.021C21.3957 26.8604 24.0168 25.8111 26.1162 24.0312C28.2157 22.2514 29.6797 19.8373 30.2878 17.153C30.8958 14.4686 30.6149 11.6593 29.4874 9.14845C28.3599 6.63762 26.4468 4.56127 24.0365 3.23233C21.6262 1.90339 18.8493 1.39384 16.1242 1.7805C13.3991 2.16715 10.8735 3.42904 8.92801 5.376L2.39301 11.523"
stroke="white"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
Expand All @@ -31,19 +30,18 @@ export function YawResetIcon({ width = 33 }: { width?: number }) {
width={width}
height="29"
viewBox="0 0 33 29"
className="stroke-background-10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.39804 3.04599V11.509H10.861"
stroke="white"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.93804 18.561C6.85464 21.1563 8.58994 23.3833 10.8824 24.9065C13.1749 26.4297 15.9003 27.1666 18.648 27.006C21.3957 26.8454 24.0168 25.7961 26.1163 24.0162C28.2157 22.2363 29.6798 19.8223 30.2878 17.1379C30.8959 14.4536 30.615 11.6443 29.4874 9.13344C28.3599 6.6226 26.4468 4.54626 24.0365 3.21732C21.6262 1.88837 18.8493 1.37883 16.1242 1.76548C13.3991 2.15213 10.8735 3.41402 8.92804 5.36099L2.39304 11.508"
stroke="white"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
Expand All @@ -62,19 +60,18 @@ export function MountingResetIcon({ width = 33 }: { width?: number }) {
width={width}
height="29"
viewBox="0 0 33 29"
className="stroke-background-10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.39801 3.061V11.524H10.861"
stroke="white"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.93801 18.576C6.85461 21.1713 8.58991 23.3983 10.8824 24.9215C13.1749 26.4447 15.9003 27.1816 18.648 27.021C21.3957 26.8604 24.0168 25.8111 26.1162 24.0312C28.2157 22.2514 29.6797 19.8373 30.2878 17.153C30.8958 14.4686 30.6149 11.6593 29.4874 9.14845C28.3599 6.63762 26.4468 4.56127 24.0365 3.23233C21.6262 1.90339 18.8493 1.39384 16.1242 1.7805C13.3991 2.16715 10.8735 3.42904 8.92801 5.376L2.39301 11.523"
stroke="white"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
Expand Down
6 changes: 2 additions & 4 deletions gui/src/components/commons/icon/VRCIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@ export function VRCIcon({ width }: { width?: number }) {
<svg
viewBox="100 100 824 824"
width={width ?? 'fit-content'}
className="fill-background-10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M246.1 418.9h531.8c8.4 0 16 3.4 21.5 8.9s8.9 13.1 8.9 21.5v125.4c0 8.4-3.4 16-8.9 21.5-4.8 4.8-11.1 8-18.1 8.7v46.3c0 10.9-8.8 19-19.5 15.1-3.8-1.4-7.9-4.6-11.9-9.9L709.6 605H246.1c-8.4 0-16-3.4-21.5-8.9s-8.9-13.1-8.9-21.5V449.3c0-8.4 3.4-16 8.9-21.5s13.1-8.9 21.5-8.9zm523.8 174.8h8c5.2 0 10-2.1 13.5-5.6 3.5-3.5 5.6-8.2 5.6-13.5V449.3c0-5.2-2.1-10-5.6-13.5-3.5-3.5-8.2-5.6-13.5-5.6H246.1c-5.2 0-10 2.1-13.5 5.6-3.5 3.5-5.6 8.2-5.6 13.5v125.4c0 5.2 2.1 10 5.6 13.5 3.5 3.5 8.2 5.6 13.5 5.6h469.4c15.8 19.8 31.1 40 46.9 59.8 2.5 3.3 7.7 3.9 7.6-2.5v-57.4h-.1zm-132.3-67.1h23.9l-12-42.2-11.9 42.2zm110.8-74.2H460.6c-10.8 0-19.6 8.8-19.6 19.6v79.7c0 10.8 8.8 19.6 19.6 19.6h287.8c10.8 0 19.6-8.8 19.6-19.6V472c0-10.7-8.8-19.6-19.6-19.6zm-270.3 91.4c2.5 2.6 6.2 3.9 10.9 3.9 3.1 0 5.6-.5 7.4-1.5 1.8-1 3.2-2.2 4.1-3.7.9-1.5 1.5-3.1 1.9-4.7.3-1.7.5-3.3.6-4.7.2-2.1 1.1-3.6 2.8-4.4 1.7-.8 3.7-1.2 6.1-1.2 3.1 0 5.4.6 6.9 1.8 1.5 1.2 2.2 3.5 2.2 7 0 4.1-.8 7.9-2.4 11.3-1.6 3.4-3.9 6.3-6.8 8.6s-6.4 4.1-10.5 5.4c-4 1.3-8.4 1.9-13.2 1.9-4.3 0-8.4-.6-12.2-1.7-3.9-1.1-7.2-3-10.1-5.4-2.9-2.5-5.2-5.7-6.8-9.7-1.7-4-2.5-8.9-2.5-14.7v-38.4c0-5.8.8-10.7 2.5-14.7s4-7.2 6.9-9.7c2.9-2.5 6.3-4.3 10.1-5.4 3.9-1.1 7.9-1.7 12.2-1.7 4.8 0 9.2.6 13.2 1.9 4 1.2 7.5 3 10.4 5.2 2.9 2.2 5.1 5 6.7 8.3 1.6 3.3 2.4 6.9 2.4 10.8 0 3.6-.7 5.9-2.2 7.1-1.5 1.1-3.7 1.7-6.7 1.7-2.6 0-4.7-.4-6.3-1.2-1.7-.8-2.5-2.3-2.6-4.4-.1-1.1-.3-2.4-.6-3.9s-.9-3-1.9-4.5c-1-1.5-2.4-2.7-4.2-3.7-1.8-1-4.4-1.5-7.7-1.5-4.7 0-8.3 1.3-10.7 3.9-2.5 2.6-3.7 6.6-3.7 12v38.4c0 5.1 1.3 9.1 3.8 11.6zm122.7 13.1c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-39.5h-31v39.5c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-89.4c0-1.9.9-3.3 2.8-4.2 1.8-.9 3.9-1.3 6.2-1.3 2.2 0 4.2.4 6.1 1.3 1.9.9 2.8 2.3 2.8 4.2v35.9h31v-35.9c0-1.9.9-3.3 2.8-4.2 1.8-.9 3.9-1.3 6.2-1.3 2.2 0 4.2.4 6.1 1.3 1.9.9 2.8 2.3 2.8 4.2v89.4zm86 1.2c-.7.9-1.7 1.7-2.8 2.3-1.1.7-2.3 1.2-3.6 1.6-1.3.4-2.6.6-3.8.6-1.6 0-2.9-.3-3.9-.8-1.1-.6-1.8-1.5-2.1-2.8l-5.2-18.3h-31.5l-5.2 18.3c-.4 1.3-1.1 2.2-2.1 2.8-1.1.5-2.4.8-3.9.8-1.2 0-2.5-.2-3.8-.6-1.3-.4-2.5-.9-3.6-1.5s-2-1.4-2.8-2.3c-.7-.9-1.1-1.9-1.1-3 0-.2.1-.6.3-1.4l26.6-86.5c.6-2.1 2.1-3.6 4.3-4.6 2.2-1 4.6-1.4 7.2-1.4 2.7 0 5.1.5 7.3 1.4 2.2 1 3.6 2.5 4.3 4.6l26.6 86.5c.2.7.3 1.2.3 1.4-.4 1-.7 2-1.5 2.9zm65-82.5c-1 1.7-2.4 2.5-4.2 2.5h-20.1v78.8c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-78.8h-20.2c-1.8 0-3.2-.8-4.2-2.4-1-1.6-1.4-3.5-1.4-5.7 0-1.9.5-3.7 1.4-5.4.9-1.7 2.3-2.5 4.3-2.5h58.2c1.9 0 3.3.8 4.3 2.5.9 1.7 1.4 3.5 1.4 5.4-.2 2.1-.7 3.9-1.6 5.6zm-495.2-4.8 26.6 86.5c.7 2.1 2.2 3.6 4.3 4.6 2.2 1 4.6 1.4 7.2 1.4 2.7 0 5.1-.5 7.3-1.4 2.2-1 3.6-2.5 4.3-4.6l26.4-86.5c.2-.7.3-1.2.3-1.4 0-1.1-.4-2.1-1.1-3-.7-.9-1.7-1.7-2.8-2.3-1.1-.7-2.3-1.2-3.6-1.6-1.3-.4-2.6-.5-3.8-.5-1.6 0-2.9.3-3.9.8-1.1.5-1.8 1.5-2.1 2.8l-20.9 74.6-21-74.6c-.4-1.3-1.1-2.2-2.1-2.8-1.1-.6-2.4-.8-3.9-.8-1.2 0-2.5.2-3.8.5-1.3.4-2.5.9-3.6 1.5s-2 1.4-2.8 2.3c-.7.9-1.1 1.9-1.1 3-.2.3-.1.7.1 1.5zm86.9-3.3c0-1.5.5-2.8 1.6-3.9s2.5-1.7 4.2-1.7h27.2c4.5 0 8.7.5 12.7 1.4 3.9 1 7.4 2.5 10.4 4.7s5.3 5.1 7 8.8c1.7 3.7 2.5 8.3 2.5 13.8 0 7.9-1.7 14.1-5.2 18.5-3.4 4.4-7.7 7.5-12.9 9l18 33.4c.3.4.5.8.5 1.2.1.4.1.8.1 1 0 1.1-.3 2.2-1 3.4-.7 1.1-1.6 2.2-2.6 3-1.1.9-2.2 1.6-3.6 2.1-1.3.6-2.6.8-3.9.8-1.3 0-2.5-.4-3.5-1.1-1.1-.7-1.9-1.8-2.7-3.2l-19.5-38h-11.6v35.9c0 1.8-.9 3.2-2.8 4.2-1.8 1-3.9 1.4-6.2 1.4-2.2 0-4.2-.5-6.1-1.4-1.9-1-2.8-2.4-2.8-4.2v-89.1h.2zm17.9 10.2V507h15.1c4.5 0 8.1-1.1 10.7-3.2 2.7-2.2 4-5.9 4-11.3s-1.3-9.2-4-11.4c-2.7-2.2-6.2-3.3-10.7-3.3h-15.1v-.1z"
fill="#fff"
/>
<path d="M246.1 418.9h531.8c8.4 0 16 3.4 21.5 8.9s8.9 13.1 8.9 21.5v125.4c0 8.4-3.4 16-8.9 21.5-4.8 4.8-11.1 8-18.1 8.7v46.3c0 10.9-8.8 19-19.5 15.1-3.8-1.4-7.9-4.6-11.9-9.9L709.6 605H246.1c-8.4 0-16-3.4-21.5-8.9s-8.9-13.1-8.9-21.5V449.3c0-8.4 3.4-16 8.9-21.5s13.1-8.9 21.5-8.9zm523.8 174.8h8c5.2 0 10-2.1 13.5-5.6 3.5-3.5 5.6-8.2 5.6-13.5V449.3c0-5.2-2.1-10-5.6-13.5-3.5-3.5-8.2-5.6-13.5-5.6H246.1c-5.2 0-10 2.1-13.5 5.6-3.5 3.5-5.6 8.2-5.6 13.5v125.4c0 5.2 2.1 10 5.6 13.5 3.5 3.5 8.2 5.6 13.5 5.6h469.4c15.8 19.8 31.1 40 46.9 59.8 2.5 3.3 7.7 3.9 7.6-2.5v-57.4h-.1zm-132.3-67.1h23.9l-12-42.2-11.9 42.2zm110.8-74.2H460.6c-10.8 0-19.6 8.8-19.6 19.6v79.7c0 10.8 8.8 19.6 19.6 19.6h287.8c10.8 0 19.6-8.8 19.6-19.6V472c0-10.7-8.8-19.6-19.6-19.6zm-270.3 91.4c2.5 2.6 6.2 3.9 10.9 3.9 3.1 0 5.6-.5 7.4-1.5 1.8-1 3.2-2.2 4.1-3.7.9-1.5 1.5-3.1 1.9-4.7.3-1.7.5-3.3.6-4.7.2-2.1 1.1-3.6 2.8-4.4 1.7-.8 3.7-1.2 6.1-1.2 3.1 0 5.4.6 6.9 1.8 1.5 1.2 2.2 3.5 2.2 7 0 4.1-.8 7.9-2.4 11.3-1.6 3.4-3.9 6.3-6.8 8.6s-6.4 4.1-10.5 5.4c-4 1.3-8.4 1.9-13.2 1.9-4.3 0-8.4-.6-12.2-1.7-3.9-1.1-7.2-3-10.1-5.4-2.9-2.5-5.2-5.7-6.8-9.7-1.7-4-2.5-8.9-2.5-14.7v-38.4c0-5.8.8-10.7 2.5-14.7s4-7.2 6.9-9.7c2.9-2.5 6.3-4.3 10.1-5.4 3.9-1.1 7.9-1.7 12.2-1.7 4.8 0 9.2.6 13.2 1.9 4 1.2 7.5 3 10.4 5.2 2.9 2.2 5.1 5 6.7 8.3 1.6 3.3 2.4 6.9 2.4 10.8 0 3.6-.7 5.9-2.2 7.1-1.5 1.1-3.7 1.7-6.7 1.7-2.6 0-4.7-.4-6.3-1.2-1.7-.8-2.5-2.3-2.6-4.4-.1-1.1-.3-2.4-.6-3.9s-.9-3-1.9-4.5c-1-1.5-2.4-2.7-4.2-3.7-1.8-1-4.4-1.5-7.7-1.5-4.7 0-8.3 1.3-10.7 3.9-2.5 2.6-3.7 6.6-3.7 12v38.4c0 5.1 1.3 9.1 3.8 11.6zm122.7 13.1c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-39.5h-31v39.5c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-89.4c0-1.9.9-3.3 2.8-4.2 1.8-.9 3.9-1.3 6.2-1.3 2.2 0 4.2.4 6.1 1.3 1.9.9 2.8 2.3 2.8 4.2v35.9h31v-35.9c0-1.9.9-3.3 2.8-4.2 1.8-.9 3.9-1.3 6.2-1.3 2.2 0 4.2.4 6.1 1.3 1.9.9 2.8 2.3 2.8 4.2v89.4zm86 1.2c-.7.9-1.7 1.7-2.8 2.3-1.1.7-2.3 1.2-3.6 1.6-1.3.4-2.6.6-3.8.6-1.6 0-2.9-.3-3.9-.8-1.1-.6-1.8-1.5-2.1-2.8l-5.2-18.3h-31.5l-5.2 18.3c-.4 1.3-1.1 2.2-2.1 2.8-1.1.5-2.4.8-3.9.8-1.2 0-2.5-.2-3.8-.6-1.3-.4-2.5-.9-3.6-1.5s-2-1.4-2.8-2.3c-.7-.9-1.1-1.9-1.1-3 0-.2.1-.6.3-1.4l26.6-86.5c.6-2.1 2.1-3.6 4.3-4.6 2.2-1 4.6-1.4 7.2-1.4 2.7 0 5.1.5 7.3 1.4 2.2 1 3.6 2.5 4.3 4.6l26.6 86.5c.2.7.3 1.2.3 1.4-.4 1-.7 2-1.5 2.9zm65-82.5c-1 1.7-2.4 2.5-4.2 2.5h-20.1v78.8c0 1.8-.9 3.2-2.8 4.2s-3.9 1.4-6.1 1.4c-2.3 0-4.4-.5-6.2-1.4-1.8-1-2.8-2.4-2.8-4.2v-78.8h-20.2c-1.8 0-3.2-.8-4.2-2.4-1-1.6-1.4-3.5-1.4-5.7 0-1.9.5-3.7 1.4-5.4.9-1.7 2.3-2.5 4.3-2.5h58.2c1.9 0 3.3.8 4.3 2.5.9 1.7 1.4 3.5 1.4 5.4-.2 2.1-.7 3.9-1.6 5.6zm-495.2-4.8 26.6 86.5c.7 2.1 2.2 3.6 4.3 4.6 2.2 1 4.6 1.4 7.2 1.4 2.7 0 5.1-.5 7.3-1.4 2.2-1 3.6-2.5 4.3-4.6l26.4-86.5c.2-.7.3-1.2.3-1.4 0-1.1-.4-2.1-1.1-3-.7-.9-1.7-1.7-2.8-2.3-1.1-.7-2.3-1.2-3.6-1.6-1.3-.4-2.6-.5-3.8-.5-1.6 0-2.9.3-3.9.8-1.1.5-1.8 1.5-2.1 2.8l-20.9 74.6-21-74.6c-.4-1.3-1.1-2.2-2.1-2.8-1.1-.6-2.4-.8-3.9-.8-1.2 0-2.5.2-3.8.5-1.3.4-2.5.9-3.6 1.5s-2 1.4-2.8 2.3c-.7.9-1.1 1.9-1.1 3-.2.3-.1.7.1 1.5zm86.9-3.3c0-1.5.5-2.8 1.6-3.9s2.5-1.7 4.2-1.7h27.2c4.5 0 8.7.5 12.7 1.4 3.9 1 7.4 2.5 10.4 4.7s5.3 5.1 7 8.8c1.7 3.7 2.5 8.3 2.5 13.8 0 7.9-1.7 14.1-5.2 18.5-3.4 4.4-7.7 7.5-12.9 9l18 33.4c.3.4.5.8.5 1.2.1.4.1.8.1 1 0 1.1-.3 2.2-1 3.4-.7 1.1-1.6 2.2-2.6 3-1.1.9-2.2 1.6-3.6 2.1-1.3.6-2.6.8-3.9.8-1.3 0-2.5-.4-3.5-1.1-1.1-.7-1.9-1.8-2.7-3.2l-19.5-38h-11.6v35.9c0 1.8-.9 3.2-2.8 4.2-1.8 1-3.9 1.4-6.2 1.4-2.2 0-4.2-.5-6.1-1.4-1.9-1-2.8-2.4-2.8-4.2v-89.1h.2zm17.9 10.2V507h15.1c4.5 0 8.1-1.1 10.7-3.2 2.7-2.2 4-5.9 4-11.3s-1.3-9.2-4-11.4c-2.7-2.2-6.2-3.3-10.7-3.3h-15.1v-.1z" />
</svg>
);
}
25 changes: 24 additions & 1 deletion gui/src/components/settings/pages/GeneralSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { WrenchIcon } from '../../commons/icon/WrenchIcons';
import { LangSelector } from '../../commons/LangSelector';
import { NumberSelector } from '../../commons/NumberSelector';
import { Radio } from '../../commons/Radio';
import { ThemeSelector } from '../../commons/ThemeSelector';
import { Typography } from '../../commons/Typography';
import { SettingsPageLayout } from '../SettingsPageLayout';

Expand Down Expand Up @@ -77,6 +78,7 @@ interface SettingsForm {
watchNewDevices: boolean;
feedbackSound: boolean;
feedbackSoundVolume: number;
theme: string;
};
}

Expand Down Expand Up @@ -123,6 +125,7 @@ const defaultValues = {
watchNewDevices: true,
feedbackSound: true,
feedbackSoundVolume: 0.5,
theme: 'slime',
},
};

Expand Down Expand Up @@ -207,6 +210,7 @@ export function GeneralSettings() {
watchNewDevices: values.interface.watchNewDevices,
feedbackSound: values.interface.feedbackSound,
feedbackSoundVolume: values.interface.feedbackSoundVolume,
theme: values.interface.theme,
});
};

Expand All @@ -226,6 +230,7 @@ export function GeneralSettings() {
watchNewDevices: config?.watchNewDevices,
feedbackSound: config?.feedbackSound,
feedbackSoundVolume: config?.feedbackSoundVolume,
theme: config?.theme,
},
};

Expand Down Expand Up @@ -905,7 +910,25 @@ export function GeneralSettings() {
step={0.1}
/>
</div>

<div className="pb-4">
<Typography bold>
{l10n.getString('settings-general-interface-theme')}
</Typography>
<div className="flex md:flex-row flex-col gap-3 pt-2">
<ThemeSelector
control={control}
name="interface.theme"
value={'slime'}
colors="!bg-slime"
></ThemeSelector>
<ThemeSelector
control={control}
name="interface.theme"
value={'trans'}
colors="!bg-trans-flag"
></ThemeSelector>
</div>
</div>
<Typography bold>
{l10n.getString('settings-general-interface-lang')}
</Typography>
Expand Down
Loading

0 comments on commit 0ad3b9f

Please sign in to comment.