Customize Sublime Text 3 bracket highlighter colors - css

I'm using the Brackethighlighter plugin for ST3 and am looking for the setting that controls the outline colors used when matches are found. The white is a bit much and distracts me when I can't read the wrapped lines very well. It's worse when the wrap is closer together or the tags are very long (very common in Angular).
For example:
Not that bad here, but my question is, is it possible to change the white outline to either a darker non-black background color? Or, at least, change the white to a more subdued hue?

Was able to finally figure it out with some User space preference updates and overrides:
https://gist.github.com/notbrain/058b263f145a1a0216c5
Add this to a new USER bh_core.sublime-settings:
{
"bracket_styles": {
"default": {
"icon": "dot",
// BH1's original default color for reference
// "color": "entity.name.class",
"color": "brackethighlighter.default",
"style": "highlight"
}
}
}
And add this to whatever theme you're using (or modify as you see fit). This overrides the default, but you can also just override individual styles.
<!--appended to default to work with bh_core.sublime-settings brackethighlighter.default style-->
<dict>
<key>name</key>
<string>Bracket Tag</string>
<key>scope</key>
<string>brackethighlighter.default</string>
<key>settings</key>
<dict>
<key>background</key>
<string>#351501</string>
<key>foreground</key>
<string>#D4F20D</string>
</dict>
</dict>

I not a web developer, but I use sublime text to code, and I wrote a small highlighter plugin for myself, the color and style of highlight is decided by scope and flags in "add_regions(key, [regions], , , )" which is a API from Sublime text.
I check the plugin you mentioned, if I found it correctly Brackethighlighter, it mentions that it has properties for setting color and style, you can check that out. In my experience, scope "comment" is usually a bit darker than the pure white one~
Hope it helps.

Related

Color change, primary hover

I'm a beginner and a great desire to learn. But despite my best efforts there are things that I cannot solve.
Through the element inspector I understood that this color is the primary hover, set by default with this code: #eeac00
I want to change this color with a different code, that is: #000000
How can I do it elementor also provides me with a CSS editing section.
In case there was a need.
enter image description here
enter image description here
Try this CSS:
.add_to_cart_button:hover{background-color:#000000!important;}
If you want to change this color for all your website you can do it in multiple ways :
Make a child theme of your Wordpress theme. Then change the color as you want. (Editor -> Appareance)
:root{
--primary_hover: #000000;
}
You can try to add this code into your Custom CSS from Elementor. Maybe, will it work.
Maybe not the best way if you do update of your theme but if not you can directly change it in your theme settings.

How to change backgrond-color of any website page through url?

I am facing a problem related to css.My question is that I want to change background-color to black of any website page through url. I want this for study better to protect my eyes meanwhile I have eye problem. So what code to apply in the url to show the page black meanwhile we use this css rule like body {
background-color:#00000;} to output .I have attached two images for it to clear more better.Hope will get response as soon as possible.Thank you too much!
I think the best solution for you to it to take some of the recommendations above, and turn it into a bookmarket! That way, you can always click the button in your address bar and it will
1) Load jQuery if necessary
2) Change the background-color of <html> and <body> elements to black.
Here's a link to the JSFiddle. Drag the link to your bookmarks bar and watch the magic happen:
http://jsfiddle.net/lasha/GjQGZ/
No need for all the extra steps! :)
I would suggest you use some kind of glare reduction/warmer color software, like F.lux.
I use it and even with white backgrounds, my eyes don't get tired as much.
For SO site, where Jquery is used, you can type this in the console:
$('body').css('background-color', '#000');
And also you can change the text color to white:
$('body').css('color', '#fff');
If no Jquery is loaded, you can selet the body tag with document.getElementByTagName
you can't do it through a URL. However, since you're using firefox:
Alternatively, look in to a plugin like greasemonkey (or similar) and inject custom CSS styles on to the page you're viewing. Something like:
// ==UserScript==
// #name Readability Helper
// #description makes font more readable for custom viewing.
// #namespace CSS
// #include *
// #version 1.0
// ==/UserScript==
(function(w){
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "* {color:#fff !important;background-color:#fff !important";
w.document.body.appendChild(css);
})(unsafeWindow);
Brad already gave a good answer.
Alternatively you could use the Firefox add-on Color That Site!
The purpose of this Add-on is to let you easily change the colors of any web site you want. These color edits can be permanently saved and be im-/exported for sharing.
This can be done by applying some javascript to the site. After site is loaded, you can write in the address bar something like this:
javascript:document.body.style.backgroundColor = "#000";
Make sure to include 'javascript:' prefix part (if you copy/pasted it might happen that browser excluded it for security reasons).
This will work only locally, of-course!
UPDATE: If it happen for some reason this doesn't work in chrome, try to do it like this:
javascript:document.body.style.backgroundColor = "#000"; alert()
I didnt figure why or how but it works!
You cannot do such things with a URL (unless the server specified in the URL has special functionality for this).
You can use a user style sheet or browser add-on to impose your CSS rules. The ways to do such things depend on browser.
When using a user style sheet, you mostly need the !important specifier, since by default page (author) style sheet rules override use style sheet rules. Example:
body { background: black !important;
color: white !important; }
Note that this also overrides any background image that pages might set for body. And setting color whenever you set background is a good idea—you don’t want to see black on black, or even dark gray on black.
But it’s really more complicated. Any element can have a background (and content color) of its own. For example, if a page has <body><div id=content>...</div></body> and it sets background on that div, then you settings for body won’t have much effect.
At the extreme, you could replace body by * in the rule above, to make everything white on black, except those ingredients that are not under CSS control (like contents of images and possibly some form fields).

Visual Studio Standard Style as CSS

I'm searching for the correct style to configure CopySourceAsHtml to change my Selenitic style to default Visual Studio style when I copy and paste it to e.g. an e-mail. Does anybody know what CSS style(s) I need to use to set it up correctly?
When I copy & paste source code an e-mail I get a dark background. If I set it to white it will show all text in light colours which are hard to read. So I need to change the complete style.
How does your plugin expect the CSS to look like? If you open the theme I referred to in the comments above in a text editor you'll see a lot of lines like this:
<Item Name="outlining.collapsehintadornment" Foreground="0x00E8DDD7" Background="0x00FAF7F6" BoldFont="No"/>
Now since I don't know how exactly your plugin is expecting the CSS I will go ahead and give an example of what this might look like in CSS:
.outlining-collapsehintadornment
{
color: #D7DDE8;
background-color: #F6F7FA;
}
Or:
<Item Name="String" Foreground="0x001515A3" Background="0x02000000" BoldFont="No"/>
Becomes
.String
{
color: #A31515;
background-color: #000000;
}
How did I get this?
Visual Studio settings file save color codes as "code hex" values. And they use BGR instead of RGB. This means that you can convert this VS color hexes very simple to HTML color hexes. And since HTML uses RGB don't forget to invert the code. So for example:
0x00E8DDD7. Replace the 0x00 (sometimes this may be 0x02) with a #. And then swap the first 2 and the last 2 characters (BGR to RGB). So you get #E8DDD7 = #D7DDE8. And of course "Foreground" is text-color and "Background" is background-color...If your plugin supports it you might even consider to write font-size: bold if you see BoldFont="Yes" in your XML.
Summarized: Open the VSSettings file I referred to in my comment above in a texteditor. Then convert everything to CSS. Write a simple program to do this, or do it by hand, whatever you prefer. Just remember that this is just an example of what it might look like. I don't know what "CopySourceAsHtml" is expecting your CSS to look like.

Wordpress template font color change

I am using Wordpress template Simple market and the default text colour is green but I want to change it to black. Even the widgets I install go green. Is there a way to change the whole color rather than changing it in css one by one?
You can put some CSS in your theme's style.css file to override its green text-color with black text-color, for example:
body {
color: black;
}
if the above not work, try something like:
body {
color: black !important;
}
This is just a quick patch but not a final solution. When your have better understanding in the theme you mentioned, you can use some tools like Firebug to locate the actual CSS codes and to search and replace them in style.css file which they belong to. That will be better.
Go to Style.css
replace green color(you will find it using colorpix) to black(i.e #000000) using find and replace feature in any stylesheet editor.
Simple enough and no other way.

SASS: Get value of existing background string and add to it?

I'd like to additively build backgrounds in SASS/Compass, ignorant of the existing background string. I am able to accomplish by writing to a global var, but it seems sloppy.
Pseudo:
=mixin-add-icon
// add a background icon
=mixin-add-gradient-from-color($color: blue !default)
// add a background gradient
=mixin-add-texture-bg
// add a bg texture
a
background: blue
+mixin-add-texture-bg
// this should take the existing bg and add texture to it
&.selected
+mixin-add-gradient-from-color()
+mixin-add-icon
// these two should take the existing bgs strings from <a> and add to them
Am I missing something obvious? Thanks in advance.
There isn't currently a way to access an object's properties via Sass, but Sass is an open project so you can always go and ask the developpers if such a feature would be possible on their Github repo.

Resources