feat(ui): add command to compile LESS themes

.rescriptsrc.js

@@ -1,37 +1,3 @@
-const darkThemeVars = require('antd/dist/dark-theme');
-
-const getLessLoader = (test, withModules) => {
-  return {
-    test,
-    use: [
-      { loader: 'style-loader' },
-      {
-        loader: 'css-loader',
-        options: !withModules
-          ? undefined
-          : {
-              sourceMap: true,
-              modules: true,
-              localIdentName: '[local]___[hash:base64:5]',
-            },
-      },
-      {
-        loader: 'less-loader',
-        options: {
-          javascriptEnabled: true,
-          modifyVars: {
-            hack: `true;@import "${require.resolve(
-              'antd/lib/style/color/colorPalette.less',
-            )}";`,
-            ...darkThemeVars,
-            '@primary-color': '#d46b08',
-          },
-        },
-      },
-    ],
-  };
-};
-
 module.exports = [
   config => {
     // set target on webpack config to support electron
@@ -45,15 +11,6 @@ module.exports = [
     {
       presets: ['react-app'],
       plugins: [
-        // add babel-plugin-import for antd
-        [
-          'import',
-          {
-            libraryName: 'antd',
-            libraryDirectory: 'es',
-            style: true,
-          },
-        ],
         // babel optimizations for emotion styles
         [
           'emotion',
@@ -70,15 +27,6 @@ module.exports = [
       ],
     },
   ],
-  // add less-loader for antd
-  config => {
-    const rule = config.module.rules.find(rule => rule.oneOf);
-
-    rule.oneOf.unshift(getLessLoader(/\.less$/, false));
-    rule.oneOf.unshift(getLessLoader(/\.module\.less$/, true));
-
-    return config;
-  },
   config => {
     // helper function to troubleshoot webpack config issues
     RegExp.prototype.toJSON = RegExp.prototype.toString;

package.json

@@ -34,6 +34,9 @@
     "test:cafe": "cross-env NODE_ENV=production testcafe electron:./ ./e2e/**/*.e2e.ts",
     "test:e2e": "yarn build && yarn test:cafe",
     "test:e2e:live": "yarn test:e2e -L",
+    "theme": "yarn theme:light && yarn theme:dark",
+    "theme:light": "lessc --include-path=node_modules --js ./src/theme/light.less ./public/themes/light.css",
+    "theme:dark": "lessc --include-path=node_modules --js ./src/theme/dark.less ./public/themes/dark.css",
     "tsc": "tsc --noEmit"
   },
   "dependencies": {

public/index.html

@@ -10,6 +10,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link id="theme" rel="stylesheet" type="text/css" href="%PUBLIC_URL%/themes/light.css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/theme/README.md

@@ -0,0 +1,5 @@
+# Polar Themes
+
+Polar currently supports two themes, `light` and `dark`, based primarily on the two themes available in [antd](https://next.ant.design/docs/react/customize-theme). The only reason to change the files in this folder is if you wish to customize the global styles provided by antd.
+
+If you update one of these files, be sure to run `yarn theme` to update the CSS files that the app actually uses. The reason for using css files is to simplify swapping the styles during runtime. Since the antd stylesheets are in LESS format, they first need to be compiled into CSS before they can be used in Electron. Compiling the LESS files at runtime would be an unnecessary performance burden on the user as they toggle between the themes.

src/theme/dark.less

@@ -0,0 +1,3 @@
+@import 'antd/dist/antd.dark.less';
+
+@primary-color: #d46b08;

src/theme/index.js

@@ -1,40 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { blue, red, gold } = require('@ant-design/colors');
-
-module.exports = {
-  '@body-background': '#000C17',
-  '@component-background': '#08121C',
-  '@layout-header-background': '#001529',
-  '@layout-sider-background': '#001529',
-  '@text-color': '#D9D9D9',
-  '@text-color-secondary': '#D9D9D9',
-  '@heading-color': 'fade(#D9D9D9,85%)',
-  '@layout-body-background': '#000C17',
-  '@pro-header-box-shadow': '0 1px 4px 0 rgba(0,21,41,0.12)',
-  '@btn-default-bg': '#13222E',
-  '@btn-primary-bg': '#052F61',
-  '@border-color-split': '#172C41',
-  '@input-bg': '#08121C',
-  '@border-color-base': 'rgba(255, 255, 255, 0.25)',
-  '@btn-default-border': '#13222E',
-
-  '@table-header-bg': '#0A1A2B',
-  '@table-row-hover-bg': '#0F2239',
-  '@table-selected-row-bg': '#0F2239',
-
-  '@tag-default-bg': '#13222E',
-  '@alert-info-bg-color': '#102134',
-  '@highlight-color': red[7],
-  '@warning-color': gold[9],
-  '@card-actions-background': '#08121C',
-  '@primary-color': '#FF9500',
-  '@item-hover-bg': `fade(${blue[5]}, 20%)`,
-  '@item-active-bg': `fade(${blue[5]}, 40%)`,
-  '@checkbox-check-color': '#13222E',
-  '@disabled-color': '#404C56',
-  '@input-disabled-bg': '#404C56',
-
-  '@background-color-light': '#001529',
-
-  '@popover-bg': '#08121C',
-};

src/theme/light.less

@@ -0,0 +1,3 @@
+@import 'antd/dist/antd.less';
+
+@primary-color: #fa8c16;