From 16dbf9378b1b8e6cb7aa831f69347d61b897beaa Mon Sep 17 00:00:00 2001
From: Gustav <Guarzo.Eve@gmail.com>
Date: Tue, 7 Jan 2025 16:05:07 -0500
Subject: [PATCH] feat: add theme selection and pathfinder theme

---
 assets/css/app.css                            |   2 +
 assets/js/hooks/Mapper/MapRoot.tsx            |   2 +-
 .../Mapper/components/map/Map.module.scss     |   2 +-
 assets/js/hooks/Mapper/components/map/Map.tsx |  10 +-
 .../ContextMenuConnection.module.scss         |  10 +-
 .../SolarSystemEdge.module.scss               |  12 +-
 .../SolarSystemNode.module.scss               | 114 ++---
 .../SolarSystemNode/SolarSystemNode.tsx       |  59 ++-
 .../UnsplashedSignature.module.scss           |   2 +-
 .../components/map/hooks/useBackgroundVars.ts |  42 ++
 .../map/styles/eve-common-variables.scss      | 180 ++++---
 .../components/map/styles/eve-common.scss     | 465 +++++++-----------
 .../Mapper/components/map/styles/index.scss   |   2 +
 .../components/map/styles/neon-theme.scss     | 135 ++---
 .../components/map/styles/neon-variables.scss |   7 -
 .../map/styles/pathfinder-theme.scss          | 197 ++++++++
 .../mapRootContent/MapRootContent.tsx         |  44 +-
 .../components/MapSettings/MapSettings.tsx    |  86 +++-
 .../components/mapWrapper/MapWrapper.tsx      |   2 +
 .../mapRootProvider/MapRootProvider.tsx       |   5 +-
 lib/wanderer_app_web/router.ex                |   3 +-
 21 files changed, 816 insertions(+), 565 deletions(-)
 create mode 100644 assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts
 create mode 100644 assets/js/hooks/Mapper/components/map/styles/index.scss
 delete mode 100644 assets/js/hooks/Mapper/components/map/styles/neon-variables.scss
 create mode 100644 assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss

diff --git a/assets/css/app.css b/assets/css/app.css
index 979a28b7..be18e0e1 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -3,6 +3,8 @@
 @import 'primereact/resources/themes/arya-blue/theme.css' layer(primereact);
 /*@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css' layer(primereact);*/
 
+@import '../js/hooks/Mapper/components/map/styles/index.scss';
+
 @layer tailwind-base {
   @tailwind base;
 }
diff --git a/assets/js/hooks/Mapper/MapRoot.tsx b/assets/js/hooks/Mapper/MapRoot.tsx
index 509b3717..3b249c12 100644
--- a/assets/js/hooks/Mapper/MapRoot.tsx
+++ b/assets/js/hooks/Mapper/MapRoot.tsx
@@ -7,7 +7,7 @@ import { ErrorInfo, useCallback, useEffect, useRef } from 'react';
 import { useMapperHandlers } from './useMapperHandlers';
 
 import './common-styles/main.scss';
-import { MapRootProvider } from '@/hooks/Mapper/mapRootProvider';
+import { MapRootProvider, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { MapRootContent } from '@/hooks/Mapper/components/mapRootContent/MapRootContent.tsx';
 
 const ErrorFallback = () => {
diff --git a/assets/js/hooks/Mapper/components/map/Map.module.scss b/assets/js/hooks/Mapper/components/map/Map.module.scss
index acd46898..c0ce4e3e 100644
--- a/assets/js/hooks/Mapper/components/map/Map.module.scss
+++ b/assets/js/hooks/Mapper/components/map/Map.module.scss
@@ -4,5 +4,5 @@
 }
 
 .BackgroundAlternateColor {
-
+  background-color: var(--rf-soft-bg-color, #2f2f2f);
 }
diff --git a/assets/js/hooks/Mapper/components/map/Map.tsx b/assets/js/hooks/Mapper/components/map/Map.tsx
index 9e007176..97eefe6e 100644
--- a/assets/js/hooks/Mapper/components/map/Map.tsx
+++ b/assets/js/hooks/Mapper/components/map/Map.tsx
@@ -16,8 +16,6 @@ import ReactFlow, {
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
-import './styles/neon-theme.scss';
-import './styles/eve-common.scss';
 import { MapProvider, useMapState } from './MapProvider';
 import { useNodesState, useEdgesState, useMapHandlers, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
@@ -35,6 +33,7 @@ import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types'
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import clsx from 'clsx';
+import { useBackgroundVars } from './hooks/useBackgroundVars';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -101,6 +100,7 @@ interface MapCompProps {
   isThickConnections?: boolean;
   isShowBackgroundPattern?: boolean;
   isSoftBackground?: boolean;
+  theme?: string;
 }
 
 const MapComp = ({
@@ -117,6 +117,7 @@ const MapComp = ({
   isThickConnections,
   isShowBackgroundPattern,
   isSoftBackground,
+  theme,
   onAddSystem,
 }: MapCompProps) => {
   const { getNode, getNodes } = useReactFlow();
@@ -128,6 +129,7 @@ const MapComp = ({
   const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
+  const { variant, gap, size, color } = useBackgroundVars(theme);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -229,7 +231,7 @@ const MapComp = ({
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { ['bg-neutral-900']: isSoftBackground })}>
+      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -276,7 +278,7 @@ const MapComp = ({
           selectionMode={SelectionMode.Partial}
         >
           {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
-          {isShowBackgroundPattern && <Background />}
+          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
         </ReactFlow>
         {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>
           Test // DON NOT REMOVE
diff --git a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss
index 724ca431..b20e130e 100644
--- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss
@@ -1,15 +1,17 @@
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+
 .ConnectionTimeEOL {
-  background-image: linear-gradient(207deg, transparent, #7452c3e3);
+  background-image: linear-gradient(207deg, transparent, var(--conn-time-eol));
 }
 
 .ConnectionFrigate {
-  background-image: linear-gradient(207deg, transparent, #325d88);
+  background-image: linear-gradient(207deg, transparent, var(--conn-frigate));
 }
 
 .ConnectionSave {
-  background-image: linear-gradient(207deg, transparent, rgba(155, 102, 45, 0.85));
+  background-image: linear-gradient(207deg, transparent, var(--conn-save));
 }
 
 .SelectedItem {
-  background-color: rgba(98, 98, 98, 0.33);
+  background-color: var(--selected-item-bg);
 }
diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss
index 7e3d287e..8fb9044e 100644
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss
@@ -1,14 +1,13 @@
-@import "@/hooks/Mapper/components/map/styles/neon-variables";
+@import "@/hooks/Mapper/components/map/styles/eve-common-variables";
 
 .react-flow__edge.selected {
   .EdgePathBack {
-    stroke: $pastel-yellow;
+    stroke: var(--pastel-yellow);
   }
 }
 
 .EdgePathFront {
   fill: none;
-
   stroke: #2c3844;
   stroke-width: 2px;
 
@@ -56,7 +55,6 @@
 
 .EdgePathBack {
   fill: none;
-
   stroke: #80a5c5;
   stroke-width: 3px;
 
@@ -84,7 +82,6 @@
   &.Gate {
     stroke: #9aff40;
   }
-
 }
 
 .ClickPath {
@@ -93,7 +90,7 @@
   stroke-width: 8px;
 }
 
-.LinkLabel{
+.LinkLabel {
   font-size: 9px;
   line-height: 10px;
   padding: 2px 4px;
@@ -113,7 +110,7 @@
 .Handle {
   min-width: initial;
   min-height: initial;
-  border: 1px solid #5a7d9a;
+  border: 1px solid var(--pastel-blue);
   width: 5px;
   height: 5px;
   z-index: 1001;
@@ -127,4 +124,3 @@
     }
   }
 }
-
diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.module.scss b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.module.scss
index 51e99b71..26ccfd85 100644
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.module.scss
@@ -1,30 +1,54 @@
 @import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020; // Dark background for tooltips
-
 .RootCustomNode {
   display: flex;
   width: 130px;
   height: 34px;
-
   flex-direction: column;
   padding: 2px 6px;
   font-size: 10px;
-
-  background-color: $tooltip-bg;
-  box-shadow: 0 0 5px rgba($dark-bg, 0.5);
-  border: 1px solid darken($pastel-blue, 10%);
+  background-color: var(--tooltip-bg);
+  box-shadow: 0 0 5px rgba(45, 45, 45, 0.5);
+  border: 1px solid var(--pastel-blue-darken10);
   border-radius: 5px;
   position: relative;
   z-index: 1;
   overflow: hidden;
 
+  .lockIcon {
+    font-size: 0.45rem;
+    font-weight: bold;
+  }
+  .mapMarkerIcon {
+    font-size: 0.45rem;
+    font-weight: bold;
+  }
+  .localCounterIcon {
+    font-size: 0.50rem;
+  }
+
+  .textShadowThin {
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
+  }
+
+  .tagSkyFontMedium {
+    color: #38bdf8; /* same as Tailwind text-sky-400 */
+    font-weight: 500; /* same as font-medium */
+  }
+
+  .hasUserCharacters {
+    /* used to replace text-amber-300 */
+    color: #fbbf24;
+  }
+
+  .systemNameOverflow {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: sans-serif;
+  }
+
   &.Mataria,
   &.Amarria,
   &.Gallente,
@@ -81,55 +105,55 @@ $tooltip-bg: #202020; // Dark background for tooltips
   }
 
   &.selected {
-    border-color: $pastel-pink;
+    border-color: var(--pastel-pink);
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
   .tooltip {
-    background-color: $tooltip-bg;
-    color: $text-color;
+    background-color: var(--tooltip-bg);
+    color: var(--text-color);
     padding: 5px 10px;
     border-radius: 3px;
-    border: 1px solid $pastel-pink;
+    border: 1px solid var(--pastel-pink);
   }
 
   &.eve-system-status-home {
-    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
-    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
+    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly), transparent);
 
     &.selected {
-      border-color: $eve-solar-system-status-color-home;
+      border-color: var(--eve-solar-system-status-color-home);
     }
   }
 
   &.eve-system-status-friendly {
-    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
-    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
+    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly-dark30), transparent);
 
     &.selected {
-      border-color: darken($eve-solar-system-status-color-friendly, 5%);
+      border-color: var(--eve-solar-system-status-color-friendly-dark5);
     }
   }
 
   &.eve-system-status-lookingFor {
-    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
+    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
     background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
 
     &.selected {
-      border-color: $pastel-pink;
+      border-color: var(--pastel-pink);
     }
   }
 
   &.eve-system-status-warning {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-warning, transparent);
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-warning), transparent);
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-dangerous), transparent);
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-target), transparent);
   }
 }
 
@@ -154,8 +178,6 @@ $tooltip-bg: #202020; // Dark background for tooltips
     padding-left: 3px;
     padding-right: 3px;
 
-    //background-color: #833ca4;
-
     &:not(:first-child) {
       box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
     }
@@ -174,7 +196,6 @@ $tooltip-bg: #202020; // Dark background for tooltips
       height: 8px;
       font-size: 8px;
     }
-
     & > .text {
       margin-top: 1px;
       font-size: 9px;
@@ -209,9 +230,7 @@ $tooltip-bg: #202020; // Dark background for tooltips
     padding-left: 3px;
     padding-right: 3px;
     display: block;
-
     background-color: #833ca4;
-
     &:not(:first-child) {
       box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
     }
@@ -244,11 +263,9 @@ $tooltip-bg: #202020; // Dark background for tooltips
     font-size: 11px;
     font-weight: bold;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-
     color: #ffb01d;
   }
 
-  /* Firefox kostyl */
   @-moz-document url-prefix() {
     .classSystemName {
       font-family: inherit !important;
@@ -257,7 +274,6 @@ $tooltip-bg: #202020; // Dark background for tooltips
   }
 
   .classSystemName {
-    //font-weight: bold;
   }
 
   .solarSystemName {
@@ -272,20 +288,7 @@ $tooltip-bg: #202020; // Dark background for tooltips
 
   .localCounter {
     display: flex;
-    //align-items: center;
     gap: 2px;
-
-    & > i {
-      position: relative;
-      top: 1px;
-    }
-
-    & > span {
-      font-size: 9px;
-      line-height: 9px;
-      font-weight: 500;
-      //margin-top: 1px;
-    }
   }
 }
 
@@ -306,8 +309,6 @@ $tooltip-bg: #202020; // Dark background for tooltips
   & > * {
     line-height: 10px;
   }
-
-  /* Firefox kostyl */
   @-moz-document url-prefix() {
     position: relative;
     top: -1px;
@@ -326,26 +327,22 @@ $tooltip-bg: #202020; // Dark background for tooltips
 .Handle {
   min-width: initial;
   min-height: initial;
-  border: 1px solid $pastel-blue;
+  border: 1px solid var(--pastel-blue);
   width: 5px;
   height: 5px;
 
   &.selected {
-    border-color: $pastel-pink;
+    border-color: var(--pastel-pink);
   }
-
   &.HandleTop {
     top: -2px;
   }
-
   &.HandleRight {
     right: -2px;
   }
-
   &.HandleBottom {
     bottom: -2px;
   }
-
   &.HandleLeft {
     left: -2px;
   }
@@ -357,15 +354,12 @@ $tooltip-bg: #202020; // Dark background for tooltips
     &.HandleTop {
       top: -3px;
     }
-
     &.HandleRight {
       right: -3px;
     }
-
     &.HandleBottom {
       bottom: -3px;
     }
-
     &.HandleLeft {
       left: -3px;
     }
diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.tsx b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.tsx
index 9786348a..7cebe358 100644
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.tsx
@@ -98,8 +98,9 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
   const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
 
   const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
-    // eslint-disable-next-line
+    return characters
+      .filter(c => c.location?.solar_system_id === solar_system_id)
+      .filter(c => c.online);
   }, [characters, presentCharacters, solar_system_id]);
 
   const isWormhole = isWormholeSpace(system_class);
@@ -117,7 +118,6 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
     if (!systemKills) {
       return null;
     }
-
     return systemKills;
   }, [kills, solar_system_id]);
 
@@ -165,7 +165,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
         <div className={classes.Bookmarks}>
           {labelCustom !== '' && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
+              <span className={clsx(classes.textShadowThin)}>{labelCustom}</span>
             </div>
           )}
 
@@ -193,23 +193,33 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
       )}
 
       <div
-        className={clsx(classes.RootCustomNode, regionClass, classes[STATUS_CLASSES[status]], {
-          [classes.selected]: selected,
-        })}
+        className={clsx(
+          classes.RootCustomNode,
+          regionClass,
+          classes[STATUS_CLASSES[status]],
+          { [classes.selected]: selected },
+        )}
       >
         {visible && (
           <>
             <div className={classes.HeadRow}>
-              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
+              <div
+                className={clsx(
+                  classes.classTitle,
+                  classTitleColor,
+                  classes.textShadowThin,
+                )}
+              >
                 {class_title ?? '-'}
               </div>
               {tag != null && tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{tag}</div>
+                <div className={clsx(classes.TagTitle, classes.tagSkyFontMedium)}>{tag}</div>
               )}
               <div
                 className={clsx(
                   classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
+                  classes.textShadowThin,
+                  classes.systemNameOverflow
                 )}
               >
                 {systemName}
@@ -224,23 +234,24 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
               )}
 
               {effect_name !== null && isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[effect_name])}></div>
+                <div
+                  className={clsx(
+                    classes.effect,
+                    EFFECT_BACKGROUND_STYLES[effect_name],
+                  )}
+                ></div>
               )}
             </div>
 
             <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
               {customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
+                <div className={clsx(classes.customName)}>
                   {customName}
                 </div>
               )}
 
               {!isWormhole && !customName && (
-                <div
-                  className={clsx(
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
+                <div className={clsx(classes.regionName)}>
                   {region_name}
                 </div>
               )}
@@ -249,15 +260,19 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
 
               <div className="flex items-center justify-end">
                 <div className="flex gap-1 items-center">
-                  {locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>}
-
+                  {locked && <i className={clsx(PrimeIcons.LOCK, classes.lockIcon)} />}
                   {hubs.includes(solar_system_id.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>
+                    <i className={clsx(PrimeIcons.MAP_MARKER, classes.mapMarkerIcon)} />
                   )}
 
                   {charactersInSystem.length > 0 && (
-                    <div className={clsx(classes.localCounter, { ['text-amber-300']: hasUserCharacters })}>
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }}></i>
+                    <div
+                      className={clsx(
+                        classes.localCounter,
+                        {  [classes.hasUserCharacters]: hasUserCharacters },
+                      )}
+                    >
+                      <i className={clsx('pi pi-users', classes.localCounterIcon)} />
                       <span className="font-sans">{charactersInSystem.length}</span>
                     </div>
                   )}
diff --git a/assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.module.scss b/assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.module.scss
index 3534c1f7..22f6420b 100644
--- a/assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.module.scss
@@ -9,7 +9,7 @@
     width: 13px;
     height: 4px;
     border-radius: 4px;
-    color: #ffffff;
+    color: var(--text-color);
     font-size: 8px;
     text-align: center;
     font-weight: bolder;
diff --git a/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts b/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts
new file mode 100644
index 00000000..b532463a
--- /dev/null
+++ b/assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { BackgroundVariant } from 'reactflow';
+
+
+export function useBackgroundVars(themeName?: string) {
+  const [variant, setVariant] = useState<BackgroundVariant>(BackgroundVariant.Dots);
+  const [gap, setGap] = useState<number>(16);
+  const [size, setSize] = useState<number>(1);
+  const [color, setColor] = useState('#81818b')
+
+  useEffect(() => { 
+    let themeEl = document.querySelector('.pathfinder-theme, .neon-theme');
+    if (!themeEl) {
+      themeEl = document.documentElement;
+    }
+
+    const style = getComputedStyle(themeEl as HTMLElement);
+
+    const rawVariant = style.getPropertyValue('--rf-bg-variant').replace(/['"]/g, '').trim().toLowerCase();
+    let finalVariant: BackgroundVariant = BackgroundVariant.Dots;
+    if (rawVariant === 'lines') {
+      finalVariant = BackgroundVariant.Lines;
+    } else if (rawVariant === 'cross') {
+      finalVariant = BackgroundVariant.Cross;
+    }
+
+    const cssVarGap = style.getPropertyValue('--rf-bg-gap');
+    const cssVarSize = style.getPropertyValue('--rf-bg-size');
+    const cssColor = style.getPropertyValue('--rf-bg-color');
+
+    const gapNum = parseInt(cssVarGap, 10) || 16;
+    const sizeNum = parseInt(cssVarSize, 10) || 1;
+
+    setVariant(finalVariant);
+    setGap(gapNum);
+    setSize(sizeNum);
+    setColor(cssColor);
+
+  }, [themeName]); 
+
+  return { variant, gap, size, color };
+}
diff --git a/assets/js/hooks/Mapper/components/map/styles/eve-common-variables.scss b/assets/js/hooks/Mapper/components/map/styles/eve-common-variables.scss
index 5a08eb70..7634f892 100644
--- a/assets/js/hooks/Mapper/components/map/styles/eve-common-variables.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/eve-common-variables.scss
@@ -1,78 +1,114 @@
-$eve-link-color-default: #333;
-$eve-link-color-top-mass-0: #333;
-$eve-link-color-top-mass-1: #5a4520;
-$eve-link-color-top-mass-2: #672c2c;
-$eve-link-color-middle-mass-0: #333;
-$eve-link-color-middle-mass-1: #333;
-$eve-link-color-middle-mass-2: #333;
-$eve-link-color-middle-time-0: #5c5c5c;
-$eve-link-color-middle-time-1: #ff00cd;
-$eve-link-color-middle-time-1-border: #99f3ff;
+:root {
+    --pastel-blue: #5a7d9a;
+    --pastel-pink: #d291bc;
+    --pastel-green: #88b04b;
+    --pastel-yellow: #ffdd59;
+    --dark-bg: #2d2d2d;
+    --text-color: #ffffff;
+    --tooltip-bg: #202020;
 
-$eve-link-color-top-mass-1-time-1: #796300;
-$eve-link-color-top-mass-2-time-1: #8c1717;
-$eve-link-color-temp: orange;
+    --pastel-blue-darken10: #4f6b86;
+    --pastel-blue-lighten10: #6da3af;
+    --pastel-pink-darken10: #bb7ca9;
+    --pastel-pink-lighten10: #e0a6cb;
 
-$eve-effect-pulsar: #40aef5;
-$eve-effect-magnetar: #f058f8;
-$eve-effect-wolfRayet: #ef7843;
-$eve-effect-blackHole: #1b1b1b;
-$eve-effect-cataclysmicVariable: #ffea90;
-$eve-effect-redGiant: #fd3c3c;
-$eve-effect-dazhLiminalityLocus: #ff6464;
-$eve-effect-imperialStellarObservatory: #6991ce;
-$eve-effect-stateStellarObservatory: #6991ce;
-$eve-effect-republicStellarObservatory: #6991ce;
-$eve-effect-federalStellarObservatory: #6991ce;
+    --pastel-green-darken10: #79a244;
+    --pastel-green-lighten10: #99cf52;
 
-$eve-wh-type-color-high: #5dffd2;
-$eve-wh-type-color-low: #f79400;
-$eve-wh-type-color-null: #fc3c3c;
-$eve-wh-type-color-c1: #69bfce;
-$eve-wh-type-color-c2: #6991ce;
-$eve-wh-type-color-c3: #a8cb70;
-$eve-wh-type-color-c4: #e39c68;
-$eve-wh-type-color-c5: #de8686;
-$eve-wh-type-color-c6: #e76363;
-$eve-wh-type-color-c13: #988cb5;
-$eve-wh-type-color-drifter: #ff44f6;
-$eve-wh-type-color-thera: #ffffff;
-$eve-wh-type-color-zarzakh: #212121;
+    --pastel-yellow-darken10: #e6c44f;
+    --pastel-yellow-lighten10: #ffe874;
 
-$eve-security-color-10: #2c74df;
-$eve-security-color-09: #3998e8;
-$eve-security-color-08: #4dcbf5;
-$eve-security-color-07: #60d8a2;
-$eve-security-color-06: #71e454;
-$eve-security-color-05: #f2fc81;
-$eve-security-color-04: #d96c07;
-$eve-security-color-03: #cb440f;
-$eve-security-color-02: #b91117;
-$eve-security-color-01: #732020;
-$eve-security-color-00: #8b3263;
-$eve-security-color-m-01: #8b3263;
-$eve-security-color-m-02: #8b3263;
-$eve-security-color-m-03: #8b3263;
-$eve-security-color-m-04: #8b3263;
-$eve-security-color-m-05: #8b3263;
-$eve-security-color-m-06: #8b3263;
-$eve-security-color-m-07: #8b3263;
-$eve-security-color-m-08: #8b3263;
-$eve-security-color-m-09: #8b3263;
-$eve-security-color-m-10: #8b3263;
+    /* Eve Link Colors */
+    --eve-link-color-default: #333;
+    --eve-link-color-top-mass-0: #333;
+    --eve-link-color-top-mass-1: #5a4520;
+    --eve-link-color-top-mass-2: #672c2c;
+    --eve-link-color-middle-mass-0: #333;
+    --eve-link-color-middle-mass-1: #333;
+    --eve-link-color-middle-mass-2: #333;
+    --eve-link-color-middle-time-0: #5c5c5c;
+    --eve-link-color-middle-time-1: #ff00cd;
+    --eve-link-color-middle-time-1-border: #99f3ff;
+    --eve-link-color-top-mass-1-time-1: #796300;
+    --eve-link-color-top-mass-2-time-1: #8c1717;
+    --eve-link-color-temp: orange;
 
-$eve-solar-system-status-unknown: transparent;
-$eve-solar-system-status-friendly: #3bbd3952;
-$eve-solar-system-status-warning: #906518a6;
-$eve-solar-system-status-target: #b439ff6b;
-$eve-solar-system-status-dangerous: #d54040;
-$eve-solar-system-status-lookingFor: rgba(67, 176, 253, 0.48);
-$eve-solar-system-status-home: rgb(197, 253, 67);
+    /* Wormhole Effects */
+    --eve-effect-pulsar: #40aef5;
+    --eve-effect-magnetar: #f058f8;
+    --eve-effect-wolfRayet: #ef7843;
+    --eve-effect-blackHole: #1b1b1b;
+    --eve-effect-cataclysmicVariable: #ffea90;
+    --eve-effect-redGiant: #fd3c3c;
+    --eve-effect-dazhLiminalityLocus: #ff6464;
+    --eve-effect-imperialStellarObservatory: #6991ce;
+    --eve-effect-stateStellarObservatory: #6991ce;
+    --eve-effect-republicStellarObservatory: #6991ce;
+    --eve-effect-federalStellarObservatory: #6991ce;
 
-$eve-solar-system-status-color-unknown: transparent;
-$eve-solar-system-status-color-friendly: #3bbd39;
-$eve-solar-system-status-color-warning: #ffb93b;
-$eve-solar-system-status-color-target: #b439ff;
-$eve-solar-system-status-color-dangerous: #d54040;
-$eve-solar-system-status-color-lookingFor: #43c2fd;
-$eve-solar-system-status-color-home: rgb(197, 253, 67);
+    /* WH Types */
+    --eve-wh-type-color-high: #5dffd2;
+    --eve-wh-type-color-low: #f79400;
+    --eve-wh-type-color-null: #fc3c3c;
+    --eve-wh-type-color-c1: #69bfce;
+    --eve-wh-type-color-c2: #6991ce;
+    --eve-wh-type-color-c3: #a8cb70;
+    --eve-wh-type-color-c4: #e39c68;
+    --eve-wh-type-color-c5: #de8686;
+    --eve-wh-type-color-c6: #e76363;
+    --eve-wh-type-color-c13: #988cb5;
+    --eve-wh-type-color-drifter: #ff44f6;
+    --eve-wh-type-color-thera: #ffffff;
+    --eve-wh-type-color-zarzakh: #212121;
+
+    /* Security Colors */
+    --eve-security-color-10: #2c74df;
+    --eve-security-color-09: #3998e8;
+    --eve-security-color-08: #4dcbf5;
+    --eve-security-color-07: #60d8a2;
+    --eve-security-color-06: #71e454;
+    --eve-security-color-05: #f2fc81;
+    --eve-security-color-04: #d96c07;
+    --eve-security-color-03: #cb440f;
+    --eve-security-color-02: #b91117;
+    --eve-security-color-01: #732020;
+    --eve-security-color-00: #8b3263;
+    --eve-security-color-m-01: #8b3263;
+    --eve-security-color-m-02: #8b3263;
+    --eve-security-color-m-03: #8b3263;
+    --eve-security-color-m-04: #8b3263;
+    --eve-security-color-m-05: #8b3263;
+    --eve-security-color-m-06: #8b3263;
+    --eve-security-color-m-07: #8b3263;
+    --eve-security-color-m-08: #8b3263;
+    --eve-security-color-m-09: #8b3263;
+    --eve-security-color-m-10: #8b3263;
+
+    /* Solar System Status */
+    --eve-solar-system-status-unknown: transparent;
+    --eve-solar-system-status-friendly: #3bbd3952;
+    --eve-solar-system-status-warning: #906518a6;
+    --eve-solar-system-status-target: #b439ff6b;
+    --eve-solar-system-status-dangerous: #d54040;
+    --eve-solar-system-status-lookingFor: rgba(67, 176, 253, 0.48);
+    --eve-solar-system-status-home: rgb(197, 253, 67);
+
+    --eve-solar-system-status-color-unknown: transparent;
+    --eve-solar-system-status-color-friendly: #3bbd39;
+    --eve-solar-system-status-color-warning: #ffb93b;
+    --eve-solar-system-status-color-target: #b439ff;
+    --eve-solar-system-status-color-dangerous: #d54040;
+    --eve-solar-system-status-color-lookingFor: #43c2fd;
+    --eve-solar-system-status-color-home: rgb(197, 253, 67);
+
+    --eve-solar-system-status-color-friendly-dark20: #2d9b2e;
+    --eve-solar-system-status-friendly-dark30: #28892a;
+    --eve-solar-system-status-color-friendly-dark5: #38b538;
+    --eve-solar-system-status-color-lookingFor-dark15: #32aadf;
+
+    /* Context Menu */
+    --conn-time-eol: #7452c3e3;
+    --conn-frigate: #325d88;
+    --conn-save: rgba(155, 102, 45, 0.85);
+    --selected-item-bg: rgba(98, 98, 98, 0.33);
+  }
diff --git a/assets/js/hooks/Mapper/components/map/styles/eve-common.scss b/assets/js/hooks/Mapper/components/map/styles/eve-common.scss
index e9a39f46..73495d0c 100644
--- a/assets/js/hooks/Mapper/components/map/styles/eve-common.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/eve-common.scss
@@ -1,535 +1,448 @@
-@import "eve-common-variables";
+@import './eve-common-variables';
+
 
 .eve-wh-effect-color-pulsar {
-  fill: $eve-effect-pulsar;
-  background-color: $eve-effect-pulsar;
+  fill: var(--eve-effect-pulsar);
+  background-color: var(--eve-effect-pulsar);
 }
 
 .eve-wh-effect-color-magnetar {
-  fill: $eve-effect-magnetar;
-  background-color: $eve-effect-magnetar;
+  fill: var(--eve-effect-magnetar);
+  background-color: var(--eve-effect-magnetar);
 }
 
 .eve-wh-effect-color-wolfRayet {
-  fill: $eve-effect-wolfRayet;
-  background-color: $eve-effect-wolfRayet;
+  fill: var(--eve-effect-wolfRayet);
+  background-color: var(--eve-effect-wolfRayet);
 }
 
 .eve-wh-effect-color-blackHole {
-  fill: $eve-effect-blackHole;
-  background-color: $eve-effect-blackHole;
-  box-shadow: 0 0 8px rgba(255 255 255 / 33);
+  fill: var(--eve-effect-blackHole);
+  background-color: var(--eve-effect-blackHole);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.33);
 }
 
 .eve-wh-effect-color-cataclysmicVariable {
-  fill: $eve-effect-cataclysmicVariable;
-  background-color: $eve-effect-cataclysmicVariable;
+  fill: var(--eve-effect-cataclysmicVariable);
+  background-color: var(--eve-effect-cataclysmicVariable);
 }
 
 .eve-wh-effect-color-redGiant {
-  fill: $eve-effect-redGiant;
-  background-color: $eve-effect-redGiant;
+  fill: var(--eve-effect-redGiant);
+  background-color: var(--eve-effect-redGiant);
 }
 
 .text-eve-wh-effect-color-pulsar {
-  color: $eve-effect-pulsar;
+  color: var(--eve-effect-pulsar);
 }
-
 .text-eve-wh-effect-color-magnetar {
-  color: $eve-effect-magnetar;
+  color: var(--eve-effect-magnetar);
 }
-
 .text-eve-wh-effect-color-wolfRayet {
-  color: $eve-effect-wolfRayet;
+  color: var(--eve-effect-wolfRayet);
 }
-
 .text-eve-wh-effect-color-blackHole {
   color: #fff;
 }
-
 .text-eve-wh-effect-color-cataclysmicVariable {
-  color: $eve-effect-cataclysmicVariable;
+  color: var(--eve-effect-cataclysmicVariable);
 }
-
 .text-eve-wh-effect-color-redGiant {
-  color: $eve-effect-redGiant;
+  color: var(--eve-effect-redGiant);
 }
-
 .text-eve-wh-effect-color-dazhLiminalityLocus {
-  color: $eve-effect-dazhLiminalityLocus;
+  color: var(--eve-effect-dazhLiminalityLocus);
 }
-
 .text-eve-wh-effect-color-imperialStellarObservatory {
-  color: $eve-effect-imperialStellarObservatory;
+  color: var(--eve-effect-imperialStellarObservatory);
 }
-
 .text-eve-wh-effect-color-stateStellarObservatory {
-  color: $eve-effect-stateStellarObservatory;
+  color: var(--eve-effect-stateStellarObservatory);
 }
-
 .text-eve-wh-effect-color-republicStellarObservatory {
-  color: $eve-effect-republicStellarObservatory;
+  color: var(--eve-effect-republicStellarObservatory);
 }
-
 .text-eve-wh-effect-color-federalStellarObservatory {
-  color: $eve-effect-federalStellarObservatory;
+  color: var(--eve-effect-federalStellarObservatory);
 }
 
+/* Security color classes */
 .eve-security-color-10 {
-  color: $eve-security-color-10 !important;
-  fill: $eve-security-color-10;
+  color: var(--eve-security-color-10) !important;
+  fill: var(--eve-security-color-10);
 }
-
 .eve-security-color-09 {
-  color: $eve-security-color-09 !important;
-  fill: $eve-security-color-09;
+  color: var(--eve-security-color-09) !important;
+  fill: var(--eve-security-color-09);
 }
-
 .eve-security-color-08 {
-  color: $eve-security-color-08 !important;
-  fill: $eve-security-color-08;
+  color: var(--eve-security-color-08) !important;
+  fill: var(--eve-security-color-08);
 }
-
 .eve-security-color-07 {
-  color: $eve-security-color-07 !important;
-  fill: $eve-security-color-07;
+  color: var(--eve-security-color-07) !important;
+  fill: var(--eve-security-color-07);
 }
-
 .eve-security-color-06 {
-  color: $eve-security-color-06 !important;
-  fill: $eve-security-color-06;
+  color: var(--eve-security-color-06) !important;
+  fill: var(--eve-security-color-06);
 }
-
 .eve-security-color-05 {
-  color: $eve-security-color-05 !important;
-  fill: $eve-security-color-05;
+  color: var(--eve-security-color-05) !important;
+  fill: var(--eve-security-color-05);
 }
-
 .eve-security-color-04 {
-  color: $eve-security-color-04 !important;
-  fill: $eve-security-color-04;
+  color: var(--eve-security-color-04) !important;
+  fill: var(--eve-security-color-04);
 }
-
 .eve-security-color-03 {
-  color: $eve-security-color-03 !important;
-  fill: $eve-security-color-03;
+  color: var(--eve-security-color-03) !important;
+  fill: var(--eve-security-color-03);
 }
-
 .eve-security-color-02 {
-  color: $eve-security-color-02 !important;
-  fill: $eve-security-color-02;
+  color: var(--eve-security-color-02) !important;
+  fill: var(--eve-security-color-02);
 }
-
 .eve-security-color-01 {
-  color: $eve-security-color-01 !important;
-  fill: $eve-security-color-01;
+  color: var(--eve-security-color-01) !important;
+  fill: var(--eve-security-color-01);
 }
-
 .eve-security-color-00 {
-  color: $eve-security-color-00 !important;
-  fill: $eve-security-color-00;
+  color: var(--eve-security-color-00) !important;
+  fill: var(--eve-security-color-00);
 }
-
 .eve-security-color-m-01 {
-  color: $eve-security-color-m-01 !important;
-  fill: $eve-security-color-m-01;
+  color: var(--eve-security-color-m-01) !important;
+  fill: var(--eve-security-color-m-01);
 }
-
 .eve-security-color-m-02 {
-  color: $eve-security-color-m-02 !important;
-  fill: $eve-security-color-m-02;
+  color: var(--eve-security-color-m-02) !important;
+  fill: var(--eve-security-color-m-02);
 }
-
 .eve-security-color-m-03 {
-  color: $eve-security-color-m-03 !important;
-  fill: $eve-security-color-m-03;
+  color: var(--eve-security-color-m-03) !important;
+  fill: var(--eve-security-color-m-03);
 }
-
 .eve-security-color-m-04 {
-  color: $eve-security-color-m-04 !important;
-  fill: $eve-security-color-m-04;
+  color: var(--eve-security-color-m-04) !important;
+  fill: var(--eve-security-color-m-04);
 }
-
 .eve-security-color-m-05 {
-  color: $eve-security-color-m-05 !important;
-  fill: $eve-security-color-m-05;
+  color: var(--eve-security-color-m-05) !important;
+  fill: var(--eve-security-color-m-05);
 }
-
 .eve-security-color-m-06 {
-  color: $eve-security-color-m-06 !important;
-  fill: $eve-security-color-m-06;
+  color: var(--eve-security-color-m-06) !important;
+  fill: var(--eve-security-color-m-06);
 }
-
 .eve-security-color-m-07 {
-  color: $eve-security-color-m-07 !important;
-  fill: $eve-security-color-m-07;
+  color: var(--eve-security-color-m-07) !important;
+  fill: var(--eve-security-color-m-07);
 }
-
 .eve-security-color-m-08 {
-  color: $eve-security-color-m-08 !important;
-  fill: $eve-security-color-m-08;
+  color: var(--eve-security-color-m-08) !important;
+  fill: var(--eve-security-color-m-08);
 }
-
 .eve-security-color-m-09 {
-  color: $eve-security-color-m-09 !important;
-  fill: $eve-security-color-m-09;
+  color: var(--eve-security-color-m-09) !important;
+  fill: var(--eve-security-color-m-09);
 }
-
 .eve-security-color-m-10 {
-  color: $eve-security-color-m-10 !important;
-  fill: $eve-security-color-m-10;
+  color: var(--eve-security-color-m-10) !important;
+  fill: var(--eve-security-color-m-10);
 }
 
+/* Security backgrounds */
 .eve-security-background-10 {
-  background-color: $eve-security-color-10;
-  fill: $eve-security-color-10;
+  background-color: var(--eve-security-color-10);
+  fill: var(--eve-security-color-10);
 }
-
 .eve-security-background-09 {
-  background-color: $eve-security-color-09;
-  fill: $eve-security-color-09;
+  background-color: var(--eve-security-color-09);
+  fill: var(--eve-security-color-09);
 }
-
 .eve-security-background-08 {
-  background-color: $eve-security-color-08;
-  fill: $eve-security-color-08;
+  background-color: var(--eve-security-color-08);
+  fill: var(--eve-security-color-08);
 }
-
 .eve-security-background-07 {
-  background-color: $eve-security-color-07;
-  fill: $eve-security-color-07;
+  background-color: var(--eve-security-color-07);
+  fill: var(--eve-security-color-07);
 }
-
 .eve-security-background-06 {
-  background-color: $eve-security-color-06;
-  fill: $eve-security-color-06;
+  background-color: var(--eve-security-color-06);
+  fill: var(--eve-security-color-06);
 }
-
 .eve-security-background-05 {
-  background-color: $eve-security-color-05;
-  fill: $eve-security-color-05;
+  background-color: var(--eve-security-color-05);
+  fill: var(--eve-security-color-05);
 }
-
 .eve-security-background-04 {
-  background-color: $eve-security-color-04;
-  fill: $eve-security-color-04;
+  background-color: var(--eve-security-color-04);
+  fill: var(--eve-security-color-04);
 }
-
 .eve-security-background-03 {
-  background-color: $eve-security-color-03;
-  fill: $eve-security-color-03;
+  background-color: var(--eve-security-color-03);
+  fill: var(--eve-security-color-03);
 }
-
 .eve-security-background-02 {
-  background-color: $eve-security-color-02;
-  fill: $eve-security-color-02;
+  background-color: var(--eve-security-color-02);
+  fill: var(--eve-security-color-02);
 }
-
 .eve-security-background-01 {
-  background-color: $eve-security-color-01;
-  fill: $eve-security-color-01;
+  background-color: var(--eve-security-color-01);
+  fill: var(--eve-security-color-01);
 }
-
 .eve-security-background-00 {
-  background-color: $eve-security-color-00;
-  fill: $eve-security-color-00;
+  background-color: var(--eve-security-color-00);
+  fill: var(--eve-security-color-00);
 }
-
 .eve-security-background-m-01 {
-  background-color: $eve-security-color-m-01;
-  fill: $eve-security-color-m-01;
+  background-color: var(--eve-security-color-m-01);
+  fill: var(--eve-security-color-m-01);
 }
-
 .eve-security-background-m-02 {
-  background-color: $eve-security-color-m-02;
-  fill: $eve-security-color-m-02;
+  background-color: var(--eve-security-color-m-02);
+  fill: var(--eve-security-color-m-02);
 }
-
 .eve-security-background-m-03 {
-  background-color: $eve-security-color-m-03;
-  fill: $eve-security-color-m-03;
+  background-color: var(--eve-security-color-m-03);
+  fill: var(--eve-security-color-m-03);
 }
-
 .eve-security-background-m-04 {
-  background-color: $eve-security-color-m-04;
-  fill: $eve-security-color-m-04;
+  background-color: var(--eve-security-color-m-04);
+  fill: var(--eve-security-color-m-04);
 }
-
 .eve-security-background-m-05 {
-  background-color: $eve-security-color-m-05;
-  fill: $eve-security-color-m-05;
+  background-color: var(--eve-security-color-m-05);
+  fill: var(--eve-security-color-m-05);
 }
-
 .eve-security-background-m-06 {
-  background-color: $eve-security-color-m-06;
-  fill: $eve-security-color-m-06;
+  background-color: var(--eve-security-color-m-06);
+  fill: var(--eve-security-color-m-06);
 }
-
 .eve-security-background-m-07 {
-  background-color: $eve-security-color-m-07;
-  fill: $eve-security-color-m-07;
+  background-color: var(--eve-security-color-m-07);
+  fill: var(--eve-security-color-m-07);
 }
-
 .eve-security-background-m-08 {
-  background-color: $eve-security-color-m-08;
-  fill: $eve-security-color-m-08;
+  background-color: var(--eve-security-color-m-08);
+  fill: var(--eve-security-color-m-08);
 }
-
 .eve-security-background-m-09 {
-  background-color: $eve-security-color-m-09;
-  fill: $eve-security-color-m-09;
+  background-color: var(--eve-security-color-m-09);
+  fill: var(--eve-security-color-m-09);
 }
-
 .eve-security-background-m-10 {
-  background-color: $eve-security-color-m-10;
-  fill: $eve-security-color-m-10;
+  background-color: var(--eve-security-color-m-10);
+  fill: var(--eve-security-color-m-10);
 }
 
+/* WH Type color classes */
 .eve-wh-type-color-high {
-  color: $eve-wh-type-color-high;
-  fill: $eve-wh-type-color-high;
+  color: var(--eve-wh-type-color-high) !important;
+  fill: var(--eve-wh-type-color-high);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-low {
-  color: $eve-wh-type-color-low;
-  fill: $eve-wh-type-color-low;
+  color: var(--eve-wh-type-color-low) !important;
+  fill: var(--eve-wh-type-color-low);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-null {
-  color: $eve-wh-type-color-null;
-  fill: $eve-wh-type-color-null;
+  color: var(--eve-wh-type-color-null) !important;
+  fill: var(--eve-wh-type-color-null);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c1 {
-  color: $eve-wh-type-color-c1 !important;
-  fill: $eve-wh-type-color-c1;
+  color: var(--eve-wh-type-color-c1) !important;
+  fill: var(--eve-wh-type-color-c1);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c2 {
-  color: $eve-wh-type-color-c2 !important;
-  fill: $eve-wh-type-color-c2;
+  color: var(--eve-wh-type-color-c2) !important;
+  fill: var(--eve-wh-type-color-c2);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c3 {
-  color: $eve-wh-type-color-c3 !important;
-  fill: $eve-wh-type-color-c3;
+  color: var(--eve-wh-type-color-c3) !important;
+  fill: var(--eve-wh-type-color-c3);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c4 {
-  color: $eve-wh-type-color-c4 !important;
-  fill: $eve-wh-type-color-c4;
+  color: var(--eve-wh-type-color-c4) !important;
+  fill: var(--eve-wh-type-color-c4);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c5 {
-  color: $eve-wh-type-color-c5 !important;
-  fill: $eve-wh-type-color-c5;
+  color: var(--eve-wh-type-color-c5) !important;
+  fill: var(--eve-wh-type-color-c5);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c6 {
-  color: $eve-wh-type-color-c6 !important;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6) !important;
+  fill: var(--eve-wh-type-color-c6);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c13 {
-  color: $eve-wh-type-color-c13 !important;
-  fill: $eve-wh-type-color-c13;
+  color: var(--eve-wh-type-color-c13) !important;
+  fill: var(--eve-wh-type-color-c13);
 }
-
 .eve-wh-type-color-drifter {
-  color: $eve-wh-type-color-drifter !important;
-  fill: $eve-wh-type-color-drifter;
+  color: var(--eve-wh-type-color-drifter) !important;
+  fill: var(--eve-wh-type-color-drifter);
 }
-
 .eve-wh-type-color-thera {
-  color: $eve-wh-type-color-thera !important;
-  fill: $eve-wh-type-color-thera;
+  color: var(--eve-wh-type-color-thera) !important;
+  fill: var(--eve-wh-type-color-thera);
 }
 
+/* WH Type backgrounds */
 .eve-wh-type-background-high {
-  background-color: $eve-wh-type-color-high;
+  background-color: var(--eve-wh-type-color-high);
 }
-
 .eve-wh-type-background-low {
-  background-color: $eve-wh-type-color-low;
+  background-color: var(--eve-wh-type-color-low);
 }
-
 .eve-wh-type-background-null {
-  background-color: $eve-wh-type-color-null;
+  background-color: var(--eve-wh-type-color-null);
 }
-
 .eve-wh-type-background-c1 {
-  background-color: $eve-wh-type-color-c1;
+  background-color: var(--eve-wh-type-color-c1);
 }
-
 .eve-wh-type-background-c2 {
-  background-color: $eve-wh-type-color-c2;
+  background-color: var(--eve-wh-type-color-c2);
 }
-
 .eve-wh-type-background-c3 {
-  background-color: $eve-wh-type-color-c3;
+  background-color: var(--eve-wh-type-color-c3);
 }
-
 .eve-wh-type-background-c4 {
-  background-color: $eve-wh-type-color-c4;
+  background-color: var(--eve-wh-type-color-c4);
 }
-
 .eve-wh-type-background-c5 {
-  background-color: $eve-wh-type-color-c5;
+  background-color: var(--eve-wh-type-color-c5);
 }
-
 .eve-wh-type-background-c6 {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-wh-type-background-c13 {
-  background-color: $eve-wh-type-color-c13;
+  background-color: var(--eve-wh-type-color-c13);
 }
-
 .eve-wh-type-background-drifter {
-  background-color: $eve-wh-type-color-drifter;
+  background-color: var(--eve-wh-type-color-drifter);
 }
-
 .eve-wh-type-background-thera {
-  background-color: $eve-wh-type-color-thera;
+  background-color: var(--eve-wh-type-color-thera);
 }
-
 .eve-wh-type-background-zarzakh {
-  background-color: $eve-wh-type-color-zarzakh;
+  background-color: var(--eve-wh-type-color-zarzakh);
 }
 
+/* Kind color classes */
 .eve-kind-color-high {
-  color: $eve-wh-type-color-high;
-  fill: $eve-wh-type-color-high;
+  color: var(--eve-wh-type-color-high);
+  fill: var(--eve-wh-type-color-high);
 }
-
 .eve-kind-color-low {
-  color: $eve-wh-type-color-low;
-  fill: $eve-wh-type-color-low;
+  color: var(--eve-wh-type-color-low);
+  fill: var(--eve-wh-type-color-low);
   font-weight: bold;
 }
-
 .eve-kind-color-null {
-  color: $eve-wh-type-color-null;
-  fill: $eve-wh-type-color-null;
+  color: var(--eve-wh-type-color-null);
+  fill: var(--eve-wh-type-color-null);
 }
-
 .eve-kind-color-wh {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-thera {
-  color: $eve-wh-type-color-thera;
-  fill: $eve-wh-type-color-thera;
+  color: var(--eve-wh-type-color-thera);
+  fill: var(--eve-wh-type-color-thera);
 }
-
 .eve-kind-color-abyss {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-penalty {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-pochven {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-zarzakh {
-  color: $eve-wh-type-color-zarzakh;
-  fill: $eve-wh-type-color-zarzakh;
+  color: var(--eve-wh-type-color-zarzakh);
+  fill: var(--eve-wh-type-color-zarzakh);
 }
 
+/* Kind backgrounds */
 .eve-kind-background-high {
-  background-color: $eve-wh-type-color-high;
+  background-color: var(--eve-wh-type-color-high);
 }
-
 .eve-kind-background-low {
-  background-color: $eve-wh-type-color-low;
+  background-color: var(--eve-wh-type-color-low);
 }
-
 .eve-kind-background-null {
-  background-color: $eve-wh-type-color-null;
+  background-color: var(--eve-wh-type-color-null);
 }
-
 .eve-kind-background-wh {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-thera {
-  background-color: $eve-wh-type-color-thera;
+  background-color: var(--eve-wh-type-color-thera);
 }
-
 .eve-kind-background-abyss {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-penalty {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-pochven {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-zarzakh {
-  background-color: $eve-wh-type-color-zarzakh;
+  background-color: var(--eve-wh-type-color-zarzakh);
 }
 
+/* System status color classes */
 .eve-system-status-color-clear {
-  color: $eve-solar-system-status-color-unknown;
+  color: var(--eve-solar-system-status-color-unknown);
 }
-
 .eve-system-status-color-home {
-  color: $eve-solar-system-status-color-home;
+  color: var(--eve-solar-system-status-color-home);
 }
-
 .eve-system-status-color-friendly {
-  color: $eve-solar-system-status-color-friendly;
+  color: var(--eve-solar-system-status-color-friendly);
 }
-
 .eve-system-status-color-lookingFor {
-  color: $eve-solar-system-status-color-lookingFor;
+  color: var(--eve-solar-system-status-color-lookingFor);
 }
-
 .eve-system-status-color-warning {
-  color: $eve-solar-system-status-color-warning;
+  color: var(--eve-solar-system-status-color-warning);
 }
-
 .eve-system-status-color-target {
-  color: $eve-solar-system-status-color-target;
+  color: var(--eve-solar-system-status-color-target);
 }
-
 .eve-system-status-color-dangerous {
-  color: $eve-solar-system-status-color-dangerous;
+  color: var(--eve-solar-system-status-color-dangerous);
 }
 
+/* Shapes */
 .wd-route-system-shape-triangle {
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
 }
-
 .wd-route-system-shape-circle {
   border-radius: 40%;
 }
 
+/* Some additional background classes */
 .wd-marker-bookmark-color-shattered {
   background-color: #833ca4;
   margin-top: 1px;
 }
 
-
 .wd-marker-bookmark-color-custom {
   background-color: #282828;
   border: 1px solid #4c4c4c;
diff --git a/assets/js/hooks/Mapper/components/map/styles/index.scss b/assets/js/hooks/Mapper/components/map/styles/index.scss
new file mode 100644
index 00000000..60e435f6
--- /dev/null
+++ b/assets/js/hooks/Mapper/components/map/styles/index.scss
@@ -0,0 +1,2 @@
+@import './neon-theme.scss'; 
+@import './pathfinder-theme.scss'; 
\ No newline at end of file
diff --git a/assets/js/hooks/Mapper/components/map/styles/neon-theme.scss b/assets/js/hooks/Mapper/components/map/styles/neon-theme.scss
index 72a045d5..e6492e62 100644
--- a/assets/js/hooks/Mapper/components/map/styles/neon-theme.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/neon-theme.scss
@@ -1,74 +1,85 @@
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020;
 
-.react-flow {
-  // background-color: $dark-bg;
-  color: $text-color;
+   @import './eve-common-variables';
+   @import './eve-common';
 
-  &__node {
-    //cursor: auto;
-  }
+   .neon-theme {
+     --pastel-blue: #5a7d9a;
+     --pastel-pink: #d291bc;
+     --pastel-green: #88b04b;
+     --pastel-yellow: #ffdd59;
+     --dark-bg: #2d2d2d;
+     --text-color: #ffffff;
+     --tooltip-bg: #202020;
 
-  &__pane {
-    cursor: auto;
-  }
-  //&__edge {
-  //  stroke: $pastel-pink;
-  //  stroke-width: 2px;
-  //
-  //  &.selected {
-  //    stroke: $pastel-yellow;
-  //  }
-  //}
+     --rf-bg-variant: "dots";  /* or lines, if you prefer */
+     --rf-bg-gap: 16;          /* some default gap */
 
-  &__handle {
-    //background-color: $pastel-green;
-    //box-shadow: 0 0 5px rgba($pastel-green, 0.5);
-  }
+     .react-flow {
+       color: var(--text-color);
 
-  &__minimap {
-    background-color: rgba(66, 66, 66, 1);
-    opacity: 0.7;
-    //backdrop-filter: blur(5px);
-    border: 1px solid #2f2f2f;
-    border-radius: 4px;
-    overflow: hidden;
-  }
+       &__node {
+         /* cursor: auto; */
+       }
 
-  &__minimap-mask {
-    fill: rgba(28, 28, 28, 0.75);
-  }
+       &__pane {
+         cursor: auto;
+       }
 
-  &__controls {
-    filter: brightness(1.5);
-  }
+       /*
+       &__edge {
+         stroke: var(--pastel-pink);
+         stroke-width: 2px;
 
-  &__minimap-node {
-    fill: #ffb03a;
-  }
-}
+         &.selected {
+           stroke: var(--pastel-yellow);
+         }
+       }
+       */
 
-.context-menu-active {
-  background-color: rgba(131, 131, 131, 0.33);
-}
+       &__handle {
+         /* background-color: var(--pastel-green);
+            box-shadow: 0 0 5px rgba(88, 176, 75, 0.5); // or define an RGB var
+         */
+       }
 
-.p-dialog {
-  .p-dialog-header {
-    height: 40px;
-    padding: 1rem;
-    padding-right: 10px !important;
-  }
+       &__minimap {
+         background-color: rgba(66, 66, 66, 1);
+         opacity: 0.7;
+         border: 1px solid #2f2f2f;
+         border-radius: 4px;
+         overflow: hidden;
+       }
 
-  .p-dialog-title {
-    font-size: 1rem !important;
-  }
+       &__minimap-mask {
+         fill: rgba(28, 28, 28, 0.75);
+       }
 
-  .p-dialog-header-icons {
-    align-self: initial !important;
-  }
-}
+       &__controls {
+         filter: brightness(1.5);
+       }
+
+       &__minimap-node {
+         fill: #ffb03a;
+       }
+     }
+
+     .context-menu-active {
+       background-color: rgba(131, 131, 131, 0.33);
+     }
+
+     .p-dialog {
+       .p-dialog-header {
+         height: 40px;
+         padding: 1rem;
+         padding-right: 10px !important;
+       }
+
+       .p-dialog-title {
+         font-size: 1rem !important;
+       }
+
+       .p-dialog-header-icons {
+         align-self: initial !important;
+       }
+     }
+   }
diff --git a/assets/js/hooks/Mapper/components/map/styles/neon-variables.scss b/assets/js/hooks/Mapper/components/map/styles/neon-variables.scss
deleted file mode 100644
index ce6f3e39..00000000
--- a/assets/js/hooks/Mapper/components/map/styles/neon-variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020;
diff --git a/assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss b/assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss
new file mode 100644
index 00000000..9e9f7bea
--- /dev/null
+++ b/assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss
@@ -0,0 +1,197 @@
+
+@import './eve-common-variables';
+@import './eve-common';
+
+.pathfinder-theme {
+
+  --rf-bg-variant: "lines";
+  --rf-bg-gap: 32;
+  --rf-bg-color: #353535;
+  --rf-soft-bg-color: #282829;
+
+  --pf-text-color: #adadad;
+  --pf-dark-bg: #2d2d2d;
+  --pf-tooltip-bg: #202020;
+  --rf-bg-variant: "lines";
+  --rf-bg-gap: 32;
+  --rf-bg-size: 1;
+  --rf-bg-color: #313131;
+  --eve-effect-pulsar: #428bca;
+  --eve-effect-magnetar: #e06fdf;
+  --eve-effect-wolfRayet: #e28a0d;
+  --eve-effect-blackHole: #000000;
+  --eve-effect-cataclysmicVariable: #ffffbb;
+  --eve-effect-redGiant: #d9534f;
+
+  --eve-wh-type-color-high: #5cb85c;
+  --eve-wh-type-color-low: #e28a0d;
+  --eve-wh-type-color-null: #d9534f;
+  --eve-wh-type-color-c1: #428bca;
+  --eve-wh-type-color-c2: #428bca;
+  --eve-wh-type-color-c3: #e28a0d;
+  --eve-wh-type-color-c4: #e28a0d;
+  --eve-wh-type-color-c5: #d9534f;
+  --eve-wh-type-color-c6: #d9534f;
+  --eve-wh-type-color-c13: #7986cb;
+  --eve-wh-type-color-drifter: #44aa82;
+
+  .MapRoot {
+    background-color: var(--rf-bg-color);
+
+    &.isSoftBackground {
+      background-color: var(--rf-soft-bg-color);
+    }
+    &.soft-bg {
+      --rf-bg-color: var(--rf-soft-bg-color);
+    }
+  }
+
+  .RootCustomNode {
+    background-color: #313335 !important; /* or var(--pf-dark-bg)  */
+    font-weight: 600;
+    line-height: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: var(--pf-text-color);
+
+  }
+
+  .HeadRow {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 11px;
+    line-height: 14px;
+    font-weight: 500;
+    position: relative;
+    top: 1px;
+
+    .classTitle {
+      font-size: 11px;
+      font-weight: bold;
+      text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
+    }
+
+    @-moz-document url-prefix() {
+      .classSystemName {
+        font-family: inherit !important;
+        font-weight: bold;
+        mix-blend-mode: screen;
+      }
+    }
+
+    .classSystemName {
+      font-family: inherit !important;
+      font-weight: bold;
+      color: var(--pf-text-color); 
+      mix-blend-mode: screen;
+      text-shadow: rgba(0, 0, 0, 0.4) 1px 1px;
+    }
+
+    .textEllipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .fontSans {
+      font-family: sans-serif;
+    }
+  }
+
+  .BottomRow {
+    .localCounter {
+      display: flex;
+      gap: 2px;
+
+      & > i {
+        position: relative;
+        top: 1px;
+      }
+      & > span {
+        font-size: 9px;
+        line-height: 9px;
+        font-weight: 700;
+        mix-blend-mode: screen;
+        color: #5cb85c; /* or var(--eve-wh-type-color-high) */
+      }
+    }
+
+    .customName {
+      font-family: inherit !important;
+      font-weight: bold;
+      color: var(--pf-text-color);
+      mix-blend-mode: screen;
+      text-shadow: rgba(0, 0, 0, 0.4) 1px 1px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      flex-shrink: 1;
+    }
+
+    .tagTitle {
+      font-size: 9px;
+      font-family: inherit !important;
+      font-weight: bold;
+      color: #fbbf24 !important;
+      mix-blend-mode: screen;
+    }
+  }
+
+  .Handlers {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .Handle {
+    min-width: initial;
+    min-height: initial;
+    border: 1px solid var(--pastel-blue, #5a7d9a);
+    width: 5px;
+    height: 5px;
+
+    &.selected {
+      border-color: var(--pastel-pink, #d291bc);
+    }
+
+    &.HandleTop {
+      top: -2px;
+    }
+    &.HandleRight {
+      right: -2px;
+    }
+    &.HandleBottom {
+      bottom: -2px;
+    }
+    &.HandleLeft {
+      left: -2px;
+    }
+
+    &.Tick {
+      width: 7px;
+      height: 7px;
+
+      &.HandleTop {
+        top: -3px;
+      }
+      &.HandleRight {
+        right: -3px;
+      }
+      &.HandleBottom {
+        bottom: -3px;
+      }
+      &.HandleLeft {
+        left: -3px;
+      }
+    }
+  }
+
+  .react-flow {
+    color: var(--pf-text-color);
+  }
+
+}
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx b/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
index e2b70ff7..ef3318cf 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
@@ -16,6 +16,8 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   const { interfaceSettings } = useMapRootState();
   const { isShowMenu } = interfaceSettings;
 
+  const themeClass = `${interfaceSettings.theme ?? 'neon'}-theme`;
+
   const [showOnTheMap, setShowOnTheMap] = useState(false);
   const [showMapSettings, setShowMapSettings] = useState(false);
   const mapInterface = <MapInterface />;
@@ -26,27 +28,29 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   useSkipContextMenu();
 
   return (
-    <Layout map={<MapWrapper />}>
-      {!isShowMenu ? (
-        <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
-          <div className="absolute top-0 left-0 w-[calc(100%-3.5rem)] h-full pointer-events-none">
-            <Topbar />
+    <div className={themeClass}>
+      <Layout map={<MapWrapper />}>
+        {!isShowMenu ? (
+          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
+            <div className="absolute top-0 left-0 w-[calc(100%-3.5rem)] h-full pointer-events-none">
+              <Topbar />
+              {mapInterface}
+            </div>
+            <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
+              <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+            </div>
+          </div>
+        ) : (
+          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
+            <Topbar>
+              <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+            </Topbar>
             {mapInterface}
           </div>
-          <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
-            <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
-          </div>
-        </div>
-      ) : (
-        <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
-          <Topbar>
-            <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
-          </Topbar>
-          {mapInterface}
-        </div>
-      )}
-      <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
-      <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
-    </Layout>
+        )}
+        <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
+        <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
+      </Layout>
+    </div>
   );
 };
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
index 0fcc623f..4e2fb680 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
@@ -3,8 +3,13 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useMemo, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from './components';
-import { InterfaceStoredSettings, InterfaceStoredSettingsProps, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import {
+  InterfaceStoredSettingsProps,
+  useMapRootState,
+  InterfaceStoredSettings,
+} from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
+import { Dropdown } from 'primereact/dropdown';
 
 export enum UserSettingsRemoteProps {
   link_signature_on_splash = 'link_signature_on_splash',
@@ -67,24 +72,33 @@ const UI_CHECKBOXES_PROPS: CheckboxesList = [
   { prop: InterfaceStoredSettingsProps.isSoftBackground, label: 'Enable soft background' },
 ];
 
+const THEME_OPTIONS = [
+  { label: 'Default', value: 'neon' },
+  { label: 'Pathfinder', value: 'pathfinder' },
+];
+
 export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
+
   const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
-  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({ ...DEFAULT_REMOTE_SETTINGS });
+
+  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({
+    ...DEFAULT_REMOTE_SETTINGS,
+  });
 
   const mergedSettings = useMemo(() => {
     return {
-      ...interfaceSettings,
       ...userRemoteSettings,
+      ...interfaceSettings,
     };
   }, [userRemoteSettings, interfaceSettings]);
 
+
   const handleShow = async () => {
     const { user_settings } = await outCommand({
       type: OutCommand.getUserSettings,
       data: null,
     });
-
     setUserRemoteSettings({
       ...user_settings,
     });
@@ -92,18 +106,15 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
 
   const handleChangeChecked = useCallback(
     (prop: keyof UserSettings) => async (checked: boolean) => {
-      // @ts-ignore
-      if (UserSettingsRemoteList.includes(prop)) {
+      if (UserSettingsRemoteList.includes(prop as any)) {
         const newRemoteSettings = {
           ...userRemoteSettings,
           [prop]: checked,
         };
-
         await outCommand({
           type: OutCommand.updateUserSettings,
           data: newRemoteSettings,
         });
-
         setUserRemoteSettings(newRemoteSettings);
         return;
       }
@@ -113,22 +124,31 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
         [prop]: checked,
       });
     },
-    [interfaceSettings, outCommand, setInterfaceSettings, userRemoteSettings],
+    [userRemoteSettings, interfaceSettings, outCommand, setInterfaceSettings],
   );
 
   const renderCheckboxesList = (list: CheckboxesList) => {
-    return list.map(x => {
-      return (
-        <PrettySwitchbox
-          key={x.prop}
-          label={x.label}
-          checked={mergedSettings[x.prop]}
-          setChecked={handleChangeChecked(x.prop)}
-        />
-      );
-    });
+    return list.map((x) => (
+      <PrettySwitchbox
+        key={x.prop}
+        label={x.label}
+        checked={mergedSettings[x.prop]}
+        setChecked={handleChangeChecked(x.prop)}
+      />
+    ));
   };
 
+
+  const handleChangeTheme = useCallback(
+    (newThemeValue: string) => {
+      setInterfaceSettings({
+        ...interfaceSettings,
+        theme: newThemeValue,
+      });
+    },
+    [interfaceSettings, setInterfaceSettings]
+  );
+
   return (
     <Dialog
       header="Map user settings"
@@ -137,10 +157,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
       style={{ width: '550px' }}
       onShow={handleShow}
       onHide={() => {
-        if (!show) {
-          return;
-        }
-
+        if (!show) return;
         setActiveIndex(0);
         onHide();
       }}
@@ -150,26 +167,45 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
           <div className={styles.verticalTabsContainer}>
             <TabView
               activeIndex={activeIndex}
-              onTabChange={e => setActiveIndex(e.index)}
+              onTabChange={(e) => setActiveIndex(e.index)}
               className={styles.verticalTabView}
             >
               <TabPanel header="Common" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">{renderCheckboxesList(COMMON_CHECKBOXES_PROPS)}</div>
+                <div className="w-full h-full flex flex-col gap-1">
+                  {renderCheckboxesList(COMMON_CHECKBOXES_PROPS)}
+                </div>
               </TabPanel>
+
               <TabPanel header="Systems" headerClassName={styles.verticalTabHeader}>
                 <div className="w-full h-full flex flex-col gap-1">
                   {renderCheckboxesList(SYSTEMS_CHECKBOXES_PROPS)}
                 </div>
               </TabPanel>
+
               <TabPanel header="Connections" headerClassName={styles.verticalTabHeader}>
                 {renderCheckboxesList(CONNECTIONS_CHECKBOXES_PROPS)}
               </TabPanel>
+
               <TabPanel header="Signatures" headerClassName={styles.verticalTabHeader}>
                 {renderCheckboxesList(SIGNATURES_CHECKBOXES_PROPS)}
               </TabPanel>
+
               <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
                 {renderCheckboxesList(UI_CHECKBOXES_PROPS)}
               </TabPanel>
+
+              <TabPanel header="Theme" headerClassName={styles.verticalTabHeader}>
+                <div className="flex items-center gap-2 mt-2">
+                  <label className="text-sm">Select Theme:</label>
+                  <Dropdown
+                    className="text-sm"
+                    value={interfaceSettings.theme || 'neon'} // default to "neon"
+                    options={THEME_OPTIONS}
+                    onChange={(e) => handleChangeTheme(e.value)}
+                    placeholder="Select a theme"
+                  />
+                </div>
+              </TabPanel>
             </TabView>
           </div>
         </div>
diff --git a/assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx b/assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx
index 7867fa30..f4916d6a 100644
--- a/assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx
+++ b/assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx
@@ -40,6 +40,7 @@ export const MapWrapper = () => {
       isThickConnections,
       isShowBackgroundPattern,
       isSoftBackground,
+      theme,
     },
   } = useMapRootState();
   const { deleteSystems } = useDeleteSystems();
@@ -166,6 +167,7 @@ export const MapWrapper = () => {
         isThickConnections={isThickConnections}
         isShowBackgroundPattern={isShowBackgroundPattern}
         isSoftBackground={isSoftBackground}
+        theme={theme}
         onAddSystem={onAddSystem}
       />
 
diff --git a/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx b/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx
index 00a47cd7..45f1ee3c 100644
--- a/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx
+++ b/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx
@@ -37,6 +37,7 @@ export enum InterfaceStoredSettingsProps {
   isShowUnsplashedSignatures = 'isShowUnsplashedSignatures',
   isShowBackgroundPattern = 'isShowBackgroundPattern',
   isSoftBackground = 'isSoftBackground',
+  theme = 'theme',
 }
 
 export type InterfaceStoredSettings = {
@@ -47,6 +48,7 @@ export type InterfaceStoredSettings = {
   isShowUnsplashedSignatures: boolean;
   isShowBackgroundPattern: boolean;
   isSoftBackground: boolean;
+  theme: string;
 };
 
 export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
@@ -57,7 +59,8 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
   isShowUnsplashedSignatures: false,
   isShowBackgroundPattern: true,
   isSoftBackground: false,
-};
+  theme: 'neon',
+}
 
 export interface MapRootContextProps {
   update: ContextStoreDataUpdate<MapRootData>;
diff --git a/lib/wanderer_app_web/router.ex b/lib/wanderer_app_web/router.ex
index ceea37d0..be41992b 100644
--- a/lib/wanderer_app_web/router.ex
+++ b/lib/wanderer_app_web/router.ex
@@ -21,9 +21,10 @@ defmodule WandererAppWeb.Router do
   @frame_src if(@code_reloading, do: ~w('self'), else: ~w())
   @style_src ~w('self' 'unsafe-inline' https://fonts.googleapis.com)
   @img_src ~w('self' data: https://images.evetech.net https://web.ccpgamescdn.com https://images.ctfassets.net https://w.appzi.io)
-  @font_src ~w('self' data: https://web.ccpgamescdn.com https://w.appzi.io)
+  @font_src ~w('self' https://fonts.gstatic.com data: https://web.ccpgamescdn.com https://w.appzi.io )
   @script_src ~w('self' )
 
+
   pipeline :admin_bauth do
     plug :admin_basic_auth
   end