fix(sass): move from node-sass to dart-sass (node-sass is not

recommended to use with webpack sass-loader)

update partials/variables.scss to improve dark/light theme from css
media-queries and data-theme selector. Globally imported with
sass-loader.

package.json

@@ -374,7 +374,6 @@
     "mini-css-extract-plugin": "^2.7.6",
     "ncp": "^2.0.0",
     "node-loader": "^2.0.0",
-    "node-sass": "^9.0.0",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
@@ -384,6 +383,7 @@
     "react-svg-loader": "^3.0.3",
     "remote-redux-devtools": "^0.5.16",
     "rimraf": "^5.0.5",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "stylelint": "^15.11.0",
@@ -407,7 +407,7 @@
   },
   "overrides": {
     "typed-scss-modules": {
-      "node-sass": "$node-sass"
+      "node-sass": "^9.0.0"
     }
   }
 }

src/renderer/assets/styles/global.css

@@ -1,8 +1,3 @@
-/*
-=-=-= global.css => './partials/variables.css'
-*/
-@import url('./partials/variables.scss');
-
 /*
 =-=-= global.css => './partials/mixins.css'
 */

src/renderer/assets/styles/global.scss

@@ -0,0 +1,3 @@
+.__LOAD_FILE_SELECTOR_NOT_USED_JUST_TO_TRIGGER_WEBPACK_SCSS_FILE__ {
+    display: none;
+}

src/renderer/assets/styles/global.scss.d.ts

@@ -0,0 +1 @@
+export declare const __LOAD_FILE_SELECTOR_NOT_USED_JUST_TO_TRIGGER_WEBPACK_SCSS_FILE__: string;

src/renderer/assets/styles/partials/variables.scss

@@ -1,39 +1,80 @@
 /*
 =-=-= partials/variables.css
+=-=-= globally imported by sass-loader with : { additionalData: `@import "./src/renderer/assets/styles/partials/variables.scss";` }
 */
+
+@use "sass:map";
+
+$color-palette: (
+  light: (
+    --color-primary: #4d4d4d,
+    --color-secondary: #fff,
+    --color-tertiary: #67a3e0,
+    --color-disabled: #040303,
+    --color-light-grey: #f1f1f1,
+    --color-medium-grey: #e5e5e5,
+    --color-accent: rgb(0, 188, 212),
+    --color-accent-contrast: #fff,
+    --reader-fontColor: #000,
+    --color-button-primary: rgba(16, 83, 200, 1),
+    --color-button-secondary: rgba(16, 83, 200, 0.05),
+    --color-bg-tab: rgba(246, 246, 246, 0.84),
+    --setting-btn-primary: #3a00e5,
+    --setting-btn-secondary: #f7f5ff,
+  ),
+  dark: (
+    --color-primary: #fff,
+    --color-secondary: #4d4d4d,
+    --color-tertiary: #67a3e0,
+    --color-disabled: #b7b7b7,
+    --color-light-grey: #f1f1f1,
+    --color-medium-grey: #e5e5e5,
+    --color-accent: rgb(0, 188, 212),
+    --color-accent-contrast: #fff,
+    --reader-fontColor: #fff,
+    --color-button-primary: rgba(16, 83, 200, 1),
+    --color-button-secondary: rgba(16, 83, 200, 0.05),
+    --color-bg-tab: rgba(16, 18, 22, 0.6),
+    --setting-btn-primary: #fff,
+    --setting-btn-secondary: var(--color-secondary),
+  ),
+);
+
+@function color($color, $value) {
+  @return map-get(map-get($color-palette, $color), $value);
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     /* Colors */
-    --color-primary: #4d4d4d;
-    --color-secondary: #fff;
-    --color-tertiary: #67a3e0;
-    --color-disabled: #b7b7b7;
-    --color-light-grey: #f1f1f1;
-    --color-medium-grey: #e5e5e5;
-    --color-accent: rgb(0, 188, 212);
-    --color-accent-contrast: #fff;
-    --reader-fontColor: #000;
-    --color-button-primary: rgba(16, 83, 200, 1);
-    --color-button-secondary: rgba(16, 83, 200, 0.05);
+    @each $key, $value in map-get($color-palette, light) {
+      #{$key}: color(light, #{$key});
+    }
   }
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     /* Colors */
-    --color-primary: #fff;
-    --color-secondary: #4d4d4d;
-    --color-tertiary: #67a3e0;
-    --color-disabled: #b7b7b7;
-    --color-light-grey: #f1f1f1;
-    --color-medium-grey: #e5e5e5;
-    --color-accent: rgb(0, 188, 212);
-    --color-accent-contrast: #fff;
-    --reader-fontColor: #fff;
-    --color-button-primary: rgba(16, 83, 200, 1);
-    --color-button-secondary: rgba(16, 83, 200, 0.05);
+    @each $key, $value in map-get($color-palette, dark) {
+      #{$key}: color(dark, #{$key});
+    }
+  }
+}
+
+[data-theme="light"] {
+
+  /* Colors */
+  @each $key, $value in map-get($color-palette, light) {
+    #{$key}: color(light, #{$key});
+  }
+}
 
+[data-theme="dark"] {
 
+  /* Colors */
+  @each $key, $value in map-get($color-palette, dark) {
+    #{$key}: color(dark, #{$key});
   }
 }
 

src/renderer/library/components/App.tsx

@@ -23,7 +23,6 @@ import { apiAction } from "readium-desktop/renderer/library/apiAction";
 import DialogManager from "readium-desktop/renderer/library/components/dialog/DialogManager";
 import PageManager from "readium-desktop/renderer/library/components/PageManager";
 import { diLibraryGet } from "readium-desktop/renderer/library/di";
-
 import DownloadsPanel from "./DownloadsPanel";
 import LoaderMainLoad from "./LoaderMainLoad";
 import { toastActions } from "readium-desktop/common/redux/actions";
@@ -32,6 +31,9 @@ import { ToastType } from "readium-desktop/common/models/toast";
 import { acceptedExtensionArray } from "readium-desktop/common/extension";
 import Nunito from "readium-desktop/renderer/assets/fonts/nunito.ttf";
 
+import * as globalScssStyle from "readium-desktop/renderer/assets/styles/global.scss";
+globalScssStyle.__LOAD_FILE_SELECTOR_NOT_USED_JUST_TO_TRIGGER_WEBPACK_SCSS_FILE__;
+
 export default class App extends React.Component<{}, undefined> {
 
     constructor(props: {}) {

webpack.config.renderer-library.js

@@ -208,7 +208,15 @@ const scssLoaderConfig = [
             esModule: false,
         },
     },
-    "sass-loader",
+    {
+        loader: "sass-loader",
+        options: {
+            // Prefer `dart-sass`
+            implementation: require("sass"),
+            additionalData: `@import "./src/renderer/assets/styles/partials/variables.scss";`,
+            warnRuleAsWarning: true,
+        },
+    },
 ];
 
 let config = Object.assign(