Dark theme

[plakhin]

It would be nice to have dark theme support

[itsgoingd]

Hey, I was already looking into this some time ago, though it was not possible at that time, since there was no way to know which theme is used. Since then a new API was added that makes this possible, so you can look forward to this feature in a future release.

[plakhin]

Thanks for response, sounds great!

[KKSzymanowski]

I'm also looking forward to this feature.

For theme detection you can probably use something similar to what Vue Devtools are using. If the dark theme is detected, you can add a dark class to eg. the body.

It will probably be quite cumbersome to apply all these changes in plain CSS, so I'd suggest moving to SCSS. You could define a mixin:

@mixin dark() {
  body.dark & {
    @content;
  }
}

and include it wherever you need:

.data-grid-requests .selected td {
  background: #3879D9 !important;
  color: white;

  @include dark {
    background: $some-other-color !important;
  }
}

I gave it a go, but I'm not familiar with the plugin structure nor with AngularJS, so I gave up. You would probably do this much quicker. If you'd happen to need any assistance, I'd be happy to help.

For a quicker start, I'll tell you what I have achieved so far:

• In the root directory added package.json with following contents:

  {
  "scripts": {
  "build": "node-sass assets/scss/panel.scss \"Clockwork Chrome/assets/stylesheets/panel.css\"",
  "watch": "node-sass --watch assets/scss/panel.scss \"Clockwork Chrome/assets/stylesheets/panel.css\""
  },
  "devDependencies": {
  "node-sass": "^4.5.3"
  }
  }

• Created the assets/scss directory with the main panel.scss file. I just copied the current panel.css there.

• You can run the single compilation with npm build(or yarn build if you use yarn) and the watcher with npm watch.

• In panel.js I added the code to apply the dark class to the body if the dark theme is selected:

  
  $scope.initChrome = function()
  {
  key('⌘+k, ctrl+l', function() {
      $scope.$apply(function() {
          $scope.clear();
      });
  });

• if(typeof chrome.devtools !== 'undefined' && chrome.devtools.panels.themeName === 'dark') {

• $('body').addClass('dark');

• }

  // ...

• Then I started using the previously mentioned mixin to apply the dark theme, but haven't went far. This is all I achieved:

[itsgoingd]

Hey, thanks for the extensive comment, this is pretty much what I'm planning to do.

I wasn't sure about using SCSS at first, since adding a build step makes things more complicated, but I guess the benefits (especially for this feature) are worth it. Actually I didn't know node-sass has a watch support ootb, this makes it event simpler.

I'm finishing up on a styles and markup cleanup and the dark theme is next on the list, so this should be done very soon.

[KKSzymanowski]

Out of pure curiosity, what is your workflow with developing Chrome Extensions? After 10 minutes I found constantly hitting F12, F12 to refresh the devtools quite tiring.

[itsgoingd]

Haha, nothing special. I like to do a lot of the UI design/prototyping directly in the browser via dev tools. Usually I'll throw up a quick markup in my text editor, maybe some basic styles, tweak it in the dev tools over and over and copy the changes back to the stylesheet.

Chrome allows you to open dev tools for a dev tools window via chrome://inspect, which is also the only sane way to debug javascript part of the extension (used to be much more complicated few years back).

Clockwork is also just a normal web app that you can run in the browser and easily hack to load some sample data, I like to use the php cli server (php -S localhost:8000). This way you can use any web app development flow you like.

This will be used in the next server-side Clockwork version where a full Clockwork app will be available at http://your.app/__clockwork. I already have this implemented in a local branch so I've been using this a lot recently when developing features for the app.

[KKSzymanowski]

Chrome allows you to open dev tools for a dev tools window via chrome://inspect

I didn't know that. This sounds very useful.

[itsgoingd]

Implemented in https://github.com/itsgoingd/clockwork-chrome/pull/25, includes a few screenshots.

Some of the colors might need to be tweaked a bit more, let me know what you think!

[KKSzymanowski]

Is the new version with dark theme released? I updated and reinstalled the extension and I still get the classic theme.

[itsgoingd]

Hey, not released yet, sorry.

I'm wrapping up a new major release, which is taking a way longer than I'd like, but it should be ready soon-ish.

[KKSzymanowski]

All right, thanks

[itsgoingd]

Released now. 🚀