Stable is fine.

Theme stylesheets will change from time to time. It will be up to the theme author to update their stylesheets to reflect any changes that leverage new variables.

A fallback stylesheet will be used to default a variable if the author hasn't updated their stylesheet yet.

https://github.com/necolas/idiomatic-css
http://editorconfig.org/

Create a front-end in devtools to load different themes.

Hi,

Really love this repo, very useful. I would like to be able to change font-family (e.g. to Source Code Pro) and font-size. Could this be implemented?

Cheers, Andrew

With this code:

// Animations
//************************************************************************/
// Disable if experiencing jankiness. Toggles animations for: certain
// sidebar panels | current selection on elements panel | child-highlighter
.show-animations( true );

// Child Highlighter
//************************************************************************/
// Highlights the children of the selected node.
.show-child-highlighter( true );

I'm thinking these might be better situated in the theme files. For example if someone creates a new theme and set both these to false, then someone else wants to view the theme, but leaves these as true, then the theme author may not have tested them and they may break.

Make sense?

Include information on how to get working locally, make changes and see them in the dev tools.

Hi, how would I modify the styles to keep original text color for

     .CodeMirror .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight)

?

Currently it is set to highlight all the text in black.

They changed the selector from a class to an id.

Did they update the dev tools selector?

Cannot show variable in the popup pannel when mouseover a param.

In the img below , the url is a string which evaluates "http://g8up.cn".

Was it my setting error ?

Hi, I am getting the following error when I try to change the theme in config.less while running grunt watch:

>> File "less\config.less" changed.

Running "less:generate" (less) task
>> NameError: variable @gradient-top is undefined in themes\s10wen-monokai.less on line 179, column 42:
>> 178 // Forms
>> 179 @form-button-background: linear-gradient(@gradient-top,@gradient-bottom);
>> 180 @form-button-border    : lighten(@global-background, 10%);
Warning: Error compiling less/build-stable.less Use --force to continue.

Aborted due to warnings.
Completed in 0.530s at Wed Nov 12 2014 13:14:12 GMT+0000 (GMT Standard Time) - Waiting...

Please can you advise me on how to fix this. Many thanks

Functions that should be optional per theme

• Animations
• Child highlighting of dom elements

Canary has a new feature that highlights dom changes in the elements panel.

I can override the .dom-update-highlight selector by prefixing it with either ::shadow or /deep/. But I can't figure out a way to override the animation.

It leverages these styles injected into the shadow root:

@-webkit-keyframes dom-update-highlight-animation {
    from {
        background-color: rgb(158, 54, 153);
        color: white;
    }
    80% {
        background-color: rgb(245, 219, 244);
        color: inherit;
    }
    to {
        background-color: inherit;
    }
}

.dom-update-highlight {
    -webkit-animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);
    border-radius: 2px;
}

It is possible to 'inject' keyframes into shadow dom without using js?

Stable: 40.0.2214.94:

Canary: 42.0.2295.0:

e.g. animations = true / false

Which code theme is?

When everything is tidied up, create a CHANGELOG.md file and start tagging 🎱

I'm following the instructions carefully but I get this error in my grunt watch

note: it's a fresh git pull from the repo, nothing's changed except the path to custom.css in my filesystem (which is the same as in the explanation)

The error:

Running "less:stable" (less) task

NameError: variable @sources-text is undefined in less/stable/_panel-sources.less on line 8, column 9:
7 text-shadow: 0 1px 0 @global-textshadow !important;
8 color: @sources-text !important;
9 }
Warning: Error compiling less/stable/build.less Use --force to continue.

Not sure if this issue began on this exact version, but the toolbar styling as well as the styles toolbar styling seems to no longer take effect.

I reloaded with a few different themes and got the same result, so it does not appear to be theme specific.

Here's a screengrab:

Great plugin, thanks!

Links should generally default to the same color to optimize for visual scanning. Will probably create a global-link var.

Including how to get up and running, how to contribute and how to make your own theme.

Related #21

Since stable moved alot of the views into shadow dom, canary.css content should fold back into their respective stylesheets.

Probably a good opportunity for cleaning up legacy selectors as well. This is gonna be a pain in the ass.

Suggestions on how to go about it are welcome.

Using the current defaults; @theme : "zero-dark-matrix"; .show-animations( true ); .show-child-highlighter( true ); @import "../themes/@{theme}";

I'm getting:

>> ParseError: Unrecognised input in less/_mixins.less on line 49, column 13:
>> 48 .adjust(@selector, @color, @percent, @invert: false) when (@invert = false) and (@theme-type = dark), (@invert = true) and (@theme-type = light) {
>> 49   @{selector}: lighten(@color, @percent) !important; /*lighten*/
>> 50 }

Update paths to images such as chrome-devtools://devtools/bundled/Images/paneAddButtons.png to base64 incase these are removed from core

Can you change style for search boxes?