feat(web): 💄🚧 apply dark theme

ref #466

web/config-overrides.js

@@ -1,9 +1,21 @@
-const { override, fixBabelImports } = require("customize-cra");
+const { getThemeVariables } = require("antd/dist/theme");
+const { override, fixBabelImports, addLessLoader } = require("customize-cra");
 
 module.exports = override(
   fixBabelImports("import", {
     libraryName: "antd",
     libraryDirectory: "es",
-    style: "css",
+    style: true,
+  }),
+  addLessLoader({
+    lessOptions: {
+      javascriptEnabled: true,
+      modifyVars: {
+        ...getThemeVariables({
+          dark: true,
+          // compact: true,
+        }),
+      },
+    },
   })
 );

web/package.json

@@ -50,6 +50,8 @@
   "devDependencies": {
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.1",
     "prettier": "^2.1.2"
   }
 }

web/src/App.tsx

@@ -22,19 +22,14 @@ const { Header, Content, Footer } = Layout;
 
 export const App: React.FC = () => (
   <Router>
-    <Layout
-      style={{
-        background: "#fff",
-      }}
-    >
-      <Header style={{ background: "#fff" }}>
+    <Layout>
+      <Header>
         <Logo />
         <Menu mode="horizontal" style={{ lineHeight: "64px" }} />
       </Header>
       <Content>
         <div
           style={{
-            background: "#fff",
             paddingLeft: 12,
             paddingTop: 12,
             paddingRight: 12,
@@ -51,7 +46,6 @@ export const App: React.FC = () => (
         style={{
           textAlign: "center",
           padding: "6px 50px",
-          background: "#fff",
           lineHeight: "28px",
         }}
       >
@@ -73,7 +67,6 @@ const Logo = () => (
       src={`${process.env.PUBLIC_URL}/logo_filterlists.png`}
       alt="FilterLists logo"
       height="44px"
-      style={{ background: "#fff" }}
     />
   </Link>
 );