Snep theme (#1659)

Author: loucass003

gui/src/components/commons/icon/SimevrIcon.tsx

@@ -1,4 +1,51 @@
+import { useConfig } from '@/hooks/config';
+
 export function SlimeVRIcon({ drag }: { drag?: boolean }) {
+  const { config } = useConfig();
+  if (config?.theme == 'snep') {
+    return (
+      <svg
+        width="49"
+        height="29"
+        viewBox="-4 -2 49 33"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        data-tauri-drag-region={drag}
+      >
+        <path
+          d="m 1.6647024,15.257308 4.84329,-5.8061114 5.1394996,4.7526114"
+          stroke="#FFCCE5"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+        <path
+          d="m 22.099692,14.390108 5.7806,-4.8728814 4.2323,5.5751814"
+          stroke="#FFCCE5"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+        <path
+          d="m 9.7241618,27.517333 c 2.9071362,-0.836166 5.2501762,-1.583484 7.0857782,-3.854543 1.787374,2.222439 3.963276,3.063619 7.087706,3.839132"
+          stroke="#FFCCE5"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+        <path
+          d="m 19.337465,19.962745 c -1.861871,0.437141 -3.433485,0.530797 -5.209565,0.06165 1.286223,0.173275 2.222982,0.778091 2.686704,1.605299 0.327959,-0.839305 1.382466,-1.47415 2.522861,-1.666949 z"
+          stroke="#FFCCE5"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="m 35.942918,2.6356084 c 6.330566,-1.5164535 11.583704,-1.69795947 15.609729,0.9503118 2.180495,1.4343036 1.678869,4.6673575 0.754839,5.9005803 -2.596688,3.4655715 -9.485458,7.3237605 -5.116612,11.0623905 -4.998324,0.352073 -3.13787,5.686673 1.260384,6.928864"
+          stroke="#FFCCE5"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  }
   return (
     <svg
       width="49"

gui/src/components/commons/icon/SlimeVRIcon.tsx

@@ -1,4 +1,39 @@
+import { useConfig } from '@/hooks/config';
+
 export function SlimeVRIcon({ width = 28 }: { width?: number }) {
+  const { config } = useConfig();
+  if (config?.theme == 'snep') {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fillRule="evenodd"
+        strokeMiterlimit="10"
+        clipRule="evenodd"
+        width={width}
+        viewBox="0 0 380 380"
+      >
+        <g fill="none" stroke="#fff">
+          <path strokeWidth="13.62" d="m 58.065408,191.74 37,-39 39,36" />
+          <path strokeWidth="13.62" d="m 194.06861,187.74 38,-35 36,38" />
+          <path
+            strokeLinecap="square"
+            strokeWidth="17"
+            d="m 264.21323,100.54097 c 36.55564,-13.927358 80.48248,-20.252638 96.44182,-0.16058 15.95933,20.09207 -5.55378,62.57663 -18.85775,71.31398 -13.30397,8.73734 -24.9251,23.65102 11.38415,55.001 -41.88653,1.00415 -20.70613,38.05812 4.23915,51.07844"
+          />
+          <path
+            strokeLinecap="round"
+            strokeWidth="17"
+            d="m 178.71549,220.85825 c -11.18717,2.62658 -20.63024,3.18933 -31.30189,0.37013 7.7283,1.04116 13.35686,4.67519 16.14313,9.6455 1.97058,-5.04296 8.30663,-8.85748 15.15876,-10.01593 z"
+          />
+          <path
+            strokeLinecap="square"
+            strokeWidth="17"
+            d="m 114.0349,266.90992 c 14.41809,-4.43279 38.26495,-10.17404 49.29422,-23.81979 10.73948,13.35362 31.14902,18.81171 48.74742,23.621"
+          />
+        </g>
+      </svg>
+    );
+  }
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

gui/src/components/settings/pages/InterfaceSettings.tsx

@@ -464,6 +464,12 @@ export function InterfaceSettings() {
                   value={'asexual'}
                   colors="!bg-asexual-flag"
                 />
+                <ThemeSelector
+                  control={control}
+                  name="appearance.theme"
+                  value={'snep'}
+                  colors="!bg-snep"
+                />
               </div>
             </div>
 

gui/src/index.scss

@@ -317,6 +317,32 @@ body {
   --default-color: 255, 255, 255;
 }
 
+:root[data-theme='snep'] {
+  --background-10: 255, 255, 255;
+  --background-20: 240, 222, 236;
+  --background-30: 210, 198, 203;
+  --background-40: 155, 140, 147;
+  --background-50: 97, 77, 86;
+  --background-60: 72, 54, 62;
+  --background-70: 55, 40, 47;
+  --background-80: 38, 27, 32;
+  --background-90: 0, 0, 0;
+
+  --accent-background-10: 255, 204, 229;
+  --accent-background-20: 234, 115, 176;
+  --accent-background-30: 184, 70, 127;
+  --accent-background-40: 143, 54, 98;
+  --accent-background-50: 91, 27, 58;
+
+  --success: 139, 223, 35;
+  --warning: 255, 187, 62;
+  --critical: 223, 54, 84;
+  --special: 230, 0, 230;
+  --window-icon-stroke: 234, 134, 185;
+
+  --default-color: 255, 255, 255;
+}
+
 #root {
   height: 100%;
 }

gui/tailwind.config.ts

@@ -158,6 +158,11 @@ const colors = {
     300: '#FFFFFF',
     400: '#800080',
   },
+  snep: {
+    100: '#261B20',
+    200: '#5B1B3A',
+    300: '#FFCCE5',
+  },
 };
 
 const config = {
@@ -289,6 +294,7 @@ const config = {
         light: `linear-gradient(135deg, ${colors['light-accent'][100]} 50%, ${colors['light-background'][700]} 50% 100%)`,
         'trans-flag': `linear-gradient(135deg, ${colors['trans-blue'][800]} 40%, ${colors['trans-blue'][700]} 40% 70%, ${colors['trans-blue'][600]} 70% 100%)`,
         'asexual-flag': `linear-gradient(135deg, ${colors['asexual'][100]} 30%, ${colors['asexual'][200]} 30% 50%, ${colors['asexual'][300]} 50% 70%, ${colors['asexual'][400]} 70% 100%)`,
+        'snep': `linear-gradient(135deg, ${colors['snep'][100]} 40%, ${colors['snep'][200]} 40% 70%, ${colors['snep'][300]} 70% 100%)`,
       },
       animation: {
         'spin-ccw': 'spin-ccw 1s linear infinite',