Implement handling for theming

babel.config.js

@@ -10,16 +10,5 @@ module.exports = {
     ],
     '@babel/preset-typescript',
     '@babel/preset-react'
-  ],
-  plugins: [
-    [
-      'import',
-      {
-        libraryName: 'antd',
-        libraryDirectory: 'lib',
-        style: true
-      },
-      'import-antd'
-    ]
   ]
 };

package.json

@@ -75,7 +75,6 @@
     "@typescript-eslint/parser": "^5.26.0",
     "babel-jest": "^28.1.0",
     "babel-loader": "^8.2.5",
-    "babel-plugin-import": "^1.13.5",
     "buffer": "^6.0.3",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",

src/App.less

@@ -1,4 +1,3 @@
-@import '~ol/ol.css';
 @import './variables.less';
 
 .App,
@@ -7,20 +6,21 @@
   padding: 0;
   height: 100%;
   width: 100%;
-}
 
-.ol-control button {
-  background-color: @primary-color;
-  &:focus,
-  &:hover {
-    background-color: @primary-color;
+  .ol-control button {
+    background-color: var(--primaryColor);
+    &:focus,
+    &:hover {
+      background-color: var(--primaryColor);
+    }
   }
-}
 
-.ol-attribution.ol-uncollapsible {
-  bottom: @footerHeight;
-}
+  .ol-attribution.ol-uncollapsible {
+    bottom: @footerHeight;
+  }
 
-.ol-attribution {
-  bottom: calc(@footerHeight + 0.5em);
+  .ol-attribution {
+    bottom: calc(@footerHeight + 0.5em);
+    right: 1em;
+  }
 }

src/App.tsx

@@ -7,9 +7,16 @@ import ToolMenu from './components/ToolMenu';
 
 import './App.less';
 
-export const App: React.FC = (): JSX.Element => {
+export interface AppProps extends React.ComponentProps<'div'> { };
+
+export const App: React.FC<AppProps> = ({
+  ...restProps
+}): JSX.Element => {
   return (
-    <div className="App">
+    <div
+      className="App"
+      {...restProps}
+    >
       <Header />
       <BasicMapComponent />
       <ToolMenu />

src/components/Footer/index.less

@@ -9,7 +9,7 @@
   margin-bottom: 0;
   z-index: 2;
 
-  background-color: fade(lighten(@primary-color, 25%), 90%);
+  background-color: var(--primaryColor);;
   display: flex;
   padding: 0 .5rem;
   box-shadow: @componentShadow;
@@ -18,7 +18,7 @@
   .item-container {
     display: flex;
     align-items: center;
-    color: darken(@primary-color, 40%);
+    color: var(--complementaryColor);
 
     &.left-items {
       justify-content: flex-start;
@@ -38,8 +38,8 @@
           &-inner {
             border-width: 1px;
             border-style: solid;
-            border-color: darken(@primary-color, 40%);
-            color: darken(@primary-color, 40%);
+            border-color: var(--primaryColor);
+            color: var(--complementaryColor);
             border-top: none;
             text-align: center;
             margin: 1px;
@@ -69,7 +69,7 @@
 
       >button {
         padding: 0 10px;
-        color: darken(@primary-color, 40%);
+        color: var(--complementaryColor);
 
         >span {
           text-decoration: underline;

src/components/Header/index.less

@@ -9,13 +9,14 @@
   margin-bottom: 0;
   z-index: 2;
 
-  background-color: fade(lighten(@primary-color, 25%), 90%);
+  background-color: var(--primaryColor);
   display: flex;
   padding: 0 .5rem;
   box-shadow: @componentShadow;
   font-size: .95em;
 
   .title {
+    color: var(--complementaryColor);
     text-align: center;
     font-size: 1.1rem;
     font-weight: bold;

src/components/Header/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import LogoImg from '../../../resources/public/loading.png';
 import {
   useAppSelector
 } from '../../hooks/useAppSelector';
@@ -15,6 +14,7 @@ export const Header: React.FC<HeaderProps> = ({
   ...restProps
 }): JSX.Element => {
   const title = useAppSelector((state) => state.title);
+  const logoPath = useAppSelector((state) => state.logoPath);
 
   return (
     <div
@@ -26,7 +26,7 @@ export const Header: React.FC<HeaderProps> = ({
       >
         <img
           className="logo"
-          src={LogoImg}
+          src={logoPath}
         />
         <div
           className="title"

src/components/ToolMenu/LayerTree/index.less

@@ -1,6 +1,5 @@
 .tool-menu .ant-menu .tree {
   .layertree {
-    min-width: 25vw;
 
     .ant-tree {
       .ant-tree-treenode:first-of-type {
@@ -11,8 +10,6 @@
         padding-bottom: 5px;
       }
 
-      // .checkbox-style();
-
       .ant-tree-node-selected,
       .ant-tree-node-content-wrapper:hover {
         background-color: transparent;
@@ -39,18 +36,6 @@
             padding-left: 5px;
           }
 
-          .ant-slider-track {
-            // background-color: rgb(var(--tetriaryColorR) var(--tetriaryColorG) var(--tetriaryColorB) / 80%);
-          }
-
-          .ant-slider-handle {
-            // border-color: var(--tertiaryColor);
-
-            &:focus {
-              // box-shadow: 0 0 0 5px rgb(var(--tetriaryColorR) var(--tetriaryColorG) var(--tetriaryColorB) / 10%)
-            }
-          }
-
           .layer-transparency {
             display: flex;
           }

src/components/ToolMenu/index.less

@@ -10,29 +10,15 @@
   max-width: 600px;
 
   .ant-menu {
-    // background-color: @primary-color;
-    // color: var(--secondaryColor);
 
     &.ant-menu-inline-collapsed {
       width: 40px;
     }
 
-    li:not(.ant-menu-item-only-child), li {
-      // border-bottom: solid 1px var(--secondaryColor);
-    }
-
     li:last-child>span {
       width: 100%;
     }
 
-    .ant-menu-submenu-arrow {
-      // color: var(--secondaryColor);
-    }
-
-    .ant-menu-submenu-selected {
-      // color: var(--secondaryColor);
-    }
-
     .ant-menu-sub.ant-menu-inline > .ant-menu-item {
       height: auto;
       width: 100%;
@@ -56,39 +42,19 @@
 
       .ant-menu-submenu-title {
         margin: 0;
-
-        &:hover {
-          // color: var(--secondaryColor);
-
-          .ant-menu-submenu-arrow {
-            // color: var(--secondaryColor);
-          }
-        }
-      }
-
-      .ant-menu-submenu-title:hover,
-      &.ant-menu-item-active {
-        // background-color: var(--tertiaryColor);
-        // color: var(--secondaryColor);
       }
 
       &.ant-menu-item-selected,
       &.ant-menu-submenu-open {
-        // background-color: var(--primaryColor);
-        // color: var(--tertiaryColor);
 
         >.ant-menu-submenu-title {
-          // border-bottom: solid 2px var(--tertiaryColor);
           font-weight: bolder;
         }
 
         &::after {
           display: none;
         }
 
-        .ant-menu-submenu-arrow {
-          // color: var(--tertiaryColor);
-        }
       }
     }
   }
@@ -98,7 +64,6 @@
 .ant-menu-submenu-popup {
   button,
   button.react-geo-togglebutton {
-    // .button-style();
     border: none !important;
     border-radius: 0;
   }

src/index.less

@@ -1,3 +1,5 @@
+@import '~antd/dist/antd.variable.min.css';
+@import '~ol/ol.css';
 @import '~normalize.css/normalize.css';
 
 body {