release: v2.6.1

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.6.1 (26 Nov 2022)
+
+* fix: dark mode scrollbar style
+* fix: unable to load timing plugin
+
 ## 2.6.0 (25 Nov 2022)
 
 * feat(console): select and copy

build/webpack.analyser.js

@@ -1,5 +1,5 @@
-const BundleAnalyzerPlugin =
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  .BundleAnalyzerPlugin
 
 exports = require('./webpack.prod')
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "browserslist": [

src/DevTools/DevTools.js

@@ -16,6 +16,7 @@ import {
   extend,
 } from '../lib/util'
 import evalCss from '../lib/evalCss'
+import { isDarkTheme } from '../lib/themes'
 import LunaNotification from 'luna-notification'
 
 export default class DevTools extends Emitter {
@@ -156,7 +157,7 @@ export default class DevTools extends Emitter {
 
     this._setTransparency(cfg.get('transparency'))
     this._setDisplaySize(cfg.get('displaySize'))
-    evalCss.setTheme(cfg.get('theme'))
+    this._setTheme(cfg.get('theme'))
 
     cfg.on('change', (key, val) => {
       switch (key) {
@@ -165,7 +166,7 @@ export default class DevTools extends Emitter {
         case 'displaySize':
           return this._setDisplaySize(val)
         case 'theme':
-          return evalCss.setTheme(val)
+          return this._setTheme(val)
       }
     })
 
@@ -193,6 +194,16 @@ export default class DevTools extends Emitter {
     this._navBar.destroy()
     this._$el.remove()
   }
+  _setTheme(theme) {
+    const { $container } = this
+
+    if (isDarkTheme(theme)) {
+      $container.addClass('eruda-dark')
+    } else {
+      $container.rmClass('eruda-dark')
+    }
+    evalCss.setTheme(theme)
+  }
   _setTransparency(opacity) {
     if (!isNum(opacity)) return
 

src/lib/themes.js

@@ -1,4 +1,5 @@
 import { extend, isArr } from './util'
+import contain from 'licia/contain'
 
 const keyMap = [
   'background',
@@ -70,6 +71,24 @@ function createLightTheme(theme) {
   )
 }
 
+const darkThemes = [
+  'Dark',
+  'Material Oceanic',
+  'Material Darker',
+  'Material Palenight',
+  'Material Deep Ocean',
+  'Monokai Pro',
+  'Dracula',
+  'Arc Dark',
+  'Atom One Dark',
+  'Solarized Dark',
+  'Night Owl',
+]
+
+export function isDarkTheme(theme) {
+  return contain(darkThemes, theme)
+}
+
 export default {
   Light: createLightTheme({
     darkerBackground: '#f3f3f3',

src/style/style.scss

@@ -3,6 +3,9 @@
 @import 'luna';
 
 .container {
+  &.dark {
+    color-scheme: dark;
+  }
   pointer-events: none;
   position: fixed;
   left: 0;