Applies a dark theme, based on a global class #243

Feb 3, 2017 · 2017-02-03T06:26:05Z

~~I need a little help here, but I did most of the the leg work from a styling perspective.~~

~~According to https://bugs.chromium.org/p/chromium/issues/detail?id=608869, there should now be possible to get the value of the chrome devtool theme via chrome.devtools.panels.themeName.~~

~~I'm not familiar enough with chrome devtool development to know how to do it correctly, so hopefully this is an easy one for someone that knows what they're doing.~~

~~Implementation of the dark theme is done by adding a dark class to the root #app element. See change to line 4 at src/devtools/App.vue.~~

Edit: When installed in chrome devtools, now detects the theme automatically. Note: the dark theme doesn't work when running npm run dev. You will have to add the dark class manually to test that I guess.

Also, any feedback would be appreciated.

OEvgeny, posva, crswll, bradlis7, sqal, sunabozu, and anteriovieira reacted with thumbs up emoji andreiglingeanu reacted with hooray emoji

Feb 3, 2017 · 2017-02-03T06:30:45Z

This is an implementation of #79 and #84

Feb 3, 2017 · 2017-02-03T13:19:16Z

Cool! Just make sure it's synced with the devtools colour

Feb 3, 2017 · 2017-02-03T14:38:21Z

Yup I used all of the same background and border colors that the dark theme already uses.

Feb 3, 2017 · 2017-02-03T15:03:28Z

I meant that the theme should be dark only when the devtools are in dark mode too. But you're right to do so, thanks for pointing that out 👍

Feb 3, 2017 · 2017-02-03T15:40:19Z

@posva Right, which is why this is marked as a [WIP]. I mentioned in the description that I needed some help finishing that part up. I don't know anything really about extension development. It seems that we can determine which theme devtools is currently using through the chrome.devtools.panels.themeName property, but chrome.devtools is undefined within the scope of App.vue when running npm run dev ( which makes sense ).

I'll dig into it a little more, but in the meantime if anyone has a recommendation on the best way to implement the switch from light to dark, let me know. I just don't have a lot of bandwidth at the moment.

posva reacted with thumbs up emoji

Feb 3, 2017 · 2017-02-03T16:32:36Z

Ok It wasn't as complicated as I made it out to be in my head. This should be ready to go.

posva and OEvgeny reacted with heart emoji

Feb 4, 2017 · 2017-02-04T12:08:21Z

Thanks a lot for looking into this.
I need to test this locally and will come back to you asap

jhoff reacted with thumbs up emoji

crswll · 2017-02-10T16:23:01Z

Sweet. I was just about to start working on this. Looks good.

Feb 11, 2017 · 2017-02-11T17:44:51Z

Sorry for the delay, testing now. I'll let you know 🙂

Feb 11, 2017 · 2017-02-11T17:53:45Z

ping @yyx990803

crswll · 2017-02-11T18:11:42Z

My only objection, not that it matters, is this is very hard to read. I'd personally find it frustrating if I used the dark theme regularly (only reason I don't is because of the vue-devtools).

yyx990803 · 2017-02-11T18:25:02Z

Nice work - as @crswll mentioned, I think we should give the text in the state inspection panel more contrast (especially the purple and the gray base text).

Feb 11, 2017 · 2017-02-11T18:26:07Z

Maybe using a cyan instead of the purple and orange instead of red or something similar to

yyx990803 · 2017-02-11T18:42:20Z

Yeah, emulating the color scheme of the native devtool would be great.

Feb 14, 2017 · 2017-02-14T03:18:38Z

I'll get this updated in the next day or so as soon as I get back from vacation

OEvgeny and yyx990803 reacted with thumbs up emoji

Feb 14, 2017 · 2017-02-14T19:13:51Z

How's this look? ( all colors pulled from the dev tools elements tab )

crswll and anteriovieira reacted with thumbs up emoji crswll, OEvgeny, and andreiglingeanu reacted with heart emoji

Feb 14, 2017 · 2017-02-14T19:23:07Z

Looks good!
Where, in the elements tab did you find those colors?

Feb 14, 2017 · 2017-02-14T19:28:52Z

Mostly from the properties viewer for HTML elements:

posva, anteriovieira, andreiglingeanu, and JasinYip reacted with thumbs up emoji posva reacted with heart emoji

andreiglingeanu · 2017-02-15T09:02:31Z

Very nice looking!

yyx990803 · 2017-02-15T18:15:30Z

src/devtools/App.vue

@@ -60,7 +60,8 @@ export default {
  computed: mapState({
    message: state => state.message,
    tab: state => state.tab,
-    newEventCount: state => state.events.newEventCount
+    newEventCount: state => state.events.newEventCount,
+    isDark: () => chrome.devtools && chrome.devtools.panels.themeName === 'dark'


A few small things:

The devtools code itself doesn't assume it's always running in Chrome. We need to check typeof chrome !== 'undefined' first.

isDark doesn't really need to be a computed property. It's initialized only once and shouldn't be in mapState either. Let's move it to data() instead.

Should be good to merge after fixing these. Great work!

Hows that look?

yyx990803 · 2017-02-15T23:29:48Z

Thank you @jhoff , great work! 👍

ackzell · 2017-09-12T23:36:44Z

Hello,

I just found out a way to integrate vue-devtools into an NW.js dev project. This makes it awesome to have a Vue dev env targeted for nw!

What I found though, is that the dark theme is not being applied to the NW dev tools once I change the theme. I noticed that it has a different menu for changing themes on the settings pane.

NW (0.24.4):

Chrome (60.0.3112.113 (Official Build) (64-bit) ):

I think something on this check isn't being matched in the case of the chrome object in NW:
https://github.com/vuejs/vue-devtools/blob/master/src/devtools/App.vue#L57

I forced it to be true and rebuilt the extension for my use case, that made it appear dark.

I acknowledge I don't know enough about NW.js yet nor much about how closely it is a "Chrome" window. Much less about creating extensions! Also know that it is a bit of a stretch to ask for a fix on such a thing, I just thought it would be worth sharing my findings.

Cheers!

Sep 13, 2017 · 2017-09-13T10:48:06Z

@ackzell If anyone finds out how to fix it, we'll welcome a PR 👍

Applies a dark theme, based on a global class

5d440e8

WIP: Applies a dark theme, based on a global class [WIP] Applies a dark theme, based on a global class Feb 3, 2017

Auto-detect theme from devtools

5d0a151

[WIP] Applies a dark theme, based on a global class Applies a dark theme, based on a global class Feb 3, 2017

isDark doesn't use state param

300a4ba

Feb 11, 2017

View reviewed changes

Updated colors for visibility

cb00bcb

yyx990803 requested changes Feb 15, 2017

View reviewed changes

Remove isDark from computed properties

605c2dc

yyx990803 approved these changes Feb 15, 2017

View reviewed changes

yyx990803 merged commit 537c524 into vuejs:master Feb 15, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Applies a dark theme, based on a global class #243

Applies a dark theme, based on a global class #243

Feb 3, 2017 •

edited

Loading

Feb 3, 2017

Feb 3, 2017

Feb 3, 2017

Feb 3, 2017

Feb 3, 2017

Feb 3, 2017

Feb 4, 2017

crswll commented Feb 10, 2017

Feb 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

Feb 11, 2017

crswll commented Feb 11, 2017

yyx990803 commented Feb 11, 2017

Feb 11, 2017

yyx990803 commented Feb 11, 2017

Feb 14, 2017

Feb 14, 2017 •

edited

Loading

Feb 14, 2017

Feb 14, 2017

andreiglingeanu commented Feb 15, 2017

yyx990803 Feb 15, 2017 •

edited

Loading

Feb 15, 2017

yyx990803 commented Feb 15, 2017

ackzell commented Sep 12, 2017

Sep 13, 2017

Applies a dark theme, based on a global class #243

Applies a dark theme, based on a global class #243

Conversation

Feb 3, 2017 • edited Loading

crswll commented Feb 10, 2017

There was a problem hiding this comment. Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Hide comment Looks good! Sorry, something went wrong. All reactions

Choose a reason for hiding this comment

crswll commented Feb 11, 2017

yyx990803 commented Feb 11, 2017

yyx990803 commented Feb 11, 2017

Feb 14, 2017 • edited Loading

andreiglingeanu commented Feb 15, 2017

yyx990803 Feb 15, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yyx990803 commented Feb 15, 2017

ackzell commented Sep 12, 2017

Feb 3, 2017 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

Feb 14, 2017 •

edited

Loading

yyx990803 Feb 15, 2017 •

edited

Loading