change theme colors finally

assets/_variables.scss

@@ -1 +1,37 @@
 /* You can override SASS variables here. */
+// Themes
+@mixin theme-light {
+  --gray-100: #f1eff1;
+  --gray-200: #cec8ca;
+  --gray-500: #a39a9c;
+
+  --color-link: #e0435e;
+  --color-visited-link: #e94661;
+
+  --body-background: #eceff4;
+  --body-font-color: #33303E;
+
+  --icon-filter: none;
+
+  --hint-color-info: #6bf;
+  --hint-color-warning: #fd6;
+  --hint-color-danger: #f66;
+}
+
+@mixin theme-dark {
+  --gray-100: rgba(255, 255, 255, 0.1);
+  --gray-200: rgba(255, 255, 255, 0.2);
+  --gray-500: rgba(255, 255, 255, 0.5);
+
+  --color-link: #FF5975;
+  --color-visited-link: #F8758B;
+
+  --body-background: #2C2C3B;
+  --body-font-color: #fefefe;
+
+  --icon-filter: brightness(0) invert(1);
+
+  --hint-color-info: #6bf;
+  --hint-color-warning: #fd6;
+  --hint-color-danger: #f66;
+}

config.toml

@@ -19,7 +19,7 @@ enableGitInfo = false
 [params]
   # (Optional, default light) Sets color theme: light, dark or auto.
   # Theme 'auto' switches between dark and light modes based on browser/os preferences
-  BookTheme = 'dark'
+  BookTheme = 'auto'
 
   # (Optional, default true) Controls table of contents visibility on right side of pages.
   # Start and end levels can be controlled with markup.tableOfContents setting.