Front: Change logo color using theme (#596)

front/packages/ui/src/navbar/icon.tsx

@@ -19,6 +19,7 @@
  */
 
 import Svg, { type SvgProps, Path } from "react-native-svg";
+import { useYoshiki } from "yoshiki";
 
 /* export const KyooLogo = (props: SvgProps) => ( */
 /* 	<Svg viewBox="0 0 128 128" {...props}> */
@@ -39,7 +40,10 @@ import Svg, { type SvgProps, Path } from "react-native-svg";
 export const KyooLongLogo = ({
 	height = 24,
 	...props
-}: Omit<SvgProps, "width" | "height"> & { height?: number }) => (
+}: Omit<SvgProps, "width" | "height"> & { height?: number }) => {
+	const { theme } = useYoshiki();
+	const textColor = theme.contrast;
+	return (
 		<Svg viewBox="49.954 131.833 318.13 108.676" height={height} width={height * 2.9272} {...props}>
 			<Path
 				d="m164.844 186.759-114.89-53.76v107.51l114.89-53.75Z"
@@ -54,23 +58,24 @@ export const KyooLongLogo = ({
 			/>
 			<Path
 				d="m213.414 212.784-18.219-23.932v23.932h-13.202V158.59h13.202v23.777l18.064-23.777h15.518l-20.999 26.556 21.771 27.638Z"
-			fill="#121327"
+				fill={textColor}
 				strokeWidth={0}
 			/>
 			<Path
 				d="m271.063 158.59-18.759 36.284v17.91h-13.202v-17.91l-18.759-36.284h14.977l10.499 22.696 10.422-22.696Z"
-			fill="#121327"
+				fill={textColor}
 				strokeWidth={0}
 			/>
 			<Path
 				d="M290.814 213.324q-7.642 0-14.011-3.551-6.369-3.551-10.114-9.92-3.744-6.369-3.744-14.321 0-7.951 3.744-14.282 3.745-6.33 10.114-9.881 6.369-3.551 14.011-3.551 7.643 0 14.012 3.551 6.369 3.551 10.036 9.881 3.667 6.331 3.667 14.282 0 7.952-3.705 14.321-3.706 6.369-10.036 9.92-6.331 3.551-13.974 3.551Zm0-12.043q6.485 0 10.384-4.323 3.898-4.323 3.898-11.426 0-7.179-3.898-11.464-3.899-4.284-10.384-4.284-6.562 0-10.46 4.246-3.899 4.246-3.899 11.502 0 7.18 3.899 11.465 3.898 4.284 10.46 4.284Z"
-			fill="#121327"
+				fill={textColor}
 				strokeWidth={0}
 			/>
 			<Path
 				d="M340.285 213.324q-7.643 0-14.012-3.551-6.369-3.551-10.113-9.92-3.744-6.369-3.744-14.321 0-7.951 3.744-14.282 3.744-6.33 10.113-9.881t14.012-3.551q7.643 0 14.012 3.551 6.369 3.551 10.036 9.881Q368 177.581 368 185.532q0 7.952-3.706 14.321-3.705 6.369-10.036 9.92-6.33 3.551-13.973 3.551Zm0-12.043q6.485 0 10.383-4.323 3.899-4.323 3.899-11.426 0-7.179-3.899-11.464-3.898-4.284-10.383-4.284-6.562 0-10.461 4.246-3.898 4.246-3.898 11.502 0 7.18 3.898 11.465 3.899 4.284 10.461 4.284Z"
-			fill="#121327"
+				fill={textColor}
 				strokeWidth={0}
 			/>
 		</Svg>
 	);
+};