Change Atom's "git diff" package theme to Github theme - atom-editor

The default theme for Atom's Git Diff package is,
It shows the changes in dark green, deleted lines in dark red and has a black background.
Is there a way to show the difference as shown in the Github console as show in the image below.
I tried adding the code below to the styles.less file but that does not highlight the modified text and does not modify the colour in the unstaged changes but modifies the colour while working on the file.(please refer to image below the code)
atom-text-editor .gutter .line-number {
&[class*="git"] {
padding-left: 0 !important;
border-left: none !important;
color: #ffffff;
opacity: 1;
}
&.git-line-added {
background-color: rgba(168, 255, 96, 0.6);
}
&.git-line-modified {
background-color: rgba(233, 192, 98, 0.6);
}
&.git-line-removed {
background-color: rgba(204, 102, 102, 0.6);
}}

Related

Where are the built-in Markdown CSS files in Visual Studio Code?

Visual Studio Code has a built-in Markdown previewer. A theme can be selected in the preview window by right-clicking and choosing Preview Theme and selecting from various CSS options such as github-light.css, none.css, etc.
I would like to use some of these CSS files as a starting point for my own Markdown preview CSS. Where are these CSS files located and how may one access them?
On my Windows machine, it looks like the CSS file that controls the styling is in C:\Program Files\Microsoft VS Code\resources\app\extensions\markdown-language-features\media. The file is called markdown.css. Sure enough, when I change some of the values around, I see the preview window (after closing and reopening it, or switching tabs) update with the specified changes.
Within this file are multiple "Theming" classes, which I suspect are what get referenced when you switch themes, rather than having multiple .css files per theme:
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark td {
border-color: rgba(255, 255, 255, 0.18);
}

How to change side menu background color in ionic 4?

I want to change the side menu background color, I tried a few things but not working.
ion-menu{
ion-content{
background-color: transparent !important;
}
.inner-scroll {
--background: var(--ion-menu-background);
}
}
Does anyone know how I can change background color in ionic 4?.
Try this
.inner-scroll {
background: green;
}
.inner-scroll .item-native{
background: green;
}
In cases where there are gradients and shades of colors, you can try this. This is particularly useful if you want the entire side-menu to have a gradient, without any borders, separating the toolbar, content and items.
// In variable.scss file you can create your Ionic css variables
:root
{
--custom-menu: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(246, 133, 133, 1) 16.3%,
rgba(172, 131, 241, 1) 90%
);
}
// In the app.component.scss file you would need to reference the variable that you created
ion-menu {
--ion-background-color: var(--custom-menu);
ion-toolbar {
--background: transparent;
}
ion-list {
background: transparent;
}
ion-item {
color: rgb(255, 255, 255);
--background: transparent;
}
ion-content {
--background: transparent;
}
}
// In the appcomponent.html file, ensure that you specify the no-border directive
<ion-header no-border>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
This is the output

how to add opacity to scss variable?

I am wondering if it is possible to add the opacity element to a sass variable? I am working on a project where I need to create different shades of a color and use them in custom typography file. My problem is when I create a color variable in rdga and implement it into my work the variable changes the code to a CSS opacity element which is written under a color element then this gets ran through the browser and throws and error. Is there a certain way to implement opacity in a variable so you don't get this problem?
Any help would be great, thanks
here are my variables:
$white-text-dh: rgba(255, 255, 255, 0.5);
$white-text-d: rgba(255, 255, 255, 0.12);
here is the typography ex:
.c-title{
font-size:20px;
color: $white-text-d;
font-family: Roboto-Light;
}
here is the html
<span class="c-title">hello</span>
this is what reads in the developer tools with an error going through the color. the color element can not read opacity
.c-title {
font-size: 20px;
color: #ffffff opacity 0.7%;
font-family: Roboto-Light;
}
I tested this and it works for me:
SCSS
$white: #fff;
$white-text-dh: rgba($white, .5);
.c-title {
color: $white-text-dh;
}
HTML
<h1 class="c-title">Test</h1>

How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?

I want to change the color of bootstrap textbox from the default blue. tried:
.input-small,
.input-medium {
border-color: #E56717;
}
Not of much help. Also tried ":focus"
I presume you're speaking about the blue glow on focus? Try this:
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8);
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
outline: 0 none;
}
If you are using bootstrap 3 with LESS, you can set the variable #input-border-focus. This variable can be found in variables.less.
To whom visited this page and didn't find a solution, what I did is replacing -webkit-focus-ring-color with desired color and it works just fine!
change box-shadow color
input[type]:focus{ box-shadow: none; }

Twitter bootstrap hex to rgba?

Let a color variable used in sheet.less.
color is in HEX format #f57e20.
I want to use that color but add an alpha channel to it.
I want to end up with rgba(245, 126, 32, 0.5)
Does Bootstrap or less have anything to do this?
There are a some built in functions in less.js and mixins from Bootstrap that you could use:
This is a less.js function:
// using a variable
#color: #f57e20;
.test {
background: fade(#color, 50%); // return #color with 50% transparency
}
// or without the color variable
.test2 {
background: fade(#f57e20, 50%); // return #color with 50% transparency
}
These both result in:
.test {
background: rgba(245, 126, 32, 0.5);
}
.test2 {
background: rgba(245, 126, 32, 0.5);
}
Or use a Bootstrap mixin:
.test3 {
#translucent > .background(#f57e20, 0.5); // use HSLA mixin
}
Which results in:
.test3 {
background-color: rgba(244, 123, 31, 0.5);
}
I'll include the (fixed) code for the translucent mixins here for archiving purposes, since (last I checked) it is no longer included as of Bootstrap 3.0.0:
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(#color: #white, #alpha: 1) {
background-color: fade(#color, #alpha);
}
.border(#color: #white, #alpha: 1) {
border-color: fade(#color, #alpha);
.background-clip(padding-box);
}
}
You may want to try:
background: rgba(red(#color), green(#color), blue(#color), #alpha);
I had to do something similar when writing a quick mixin which used box-shadow.

Resources