Is there any simple way with markdown if I put a hexadecimal, I put the color?
For example if I put:
background color: #B68A65, just by placing the HEX next to it, I put the color?
background color: 🟨 #B68A65.
(something similar to what we normally see in our CSS)
Related
The links within the body change color once you hover and click on the link. Is there a way to have the color fix within the body of the mkdocs. I've been using some mkdocs documentation as an example, but so far I have this
css: `
body {
font-family: ${theme.typography.fontFamily};
--md-text-color: ${theme.palette.text.primary};
--md-text-link-color: #8CD7F7;
--md-code-fg-color: ${theme.palette.text.primary};
--md-code-bg-color: ${theme.palette.background.paper};
}
I would like the links to be the same when the user hovers and clicks on it. Whats the correct syntax for when the link is pressed or hovered over.
I've tried adding
.md-nav__link:hover { color: #8CD7F7; }
.md-nav__link--active { color: #8CD7F7; }
within the body, but that's not helping. I wonder if there's different syntax thats supposed to followed when inside the body
In my project I use, for example, two colors.
I created a folder in root called "stylesheets", where I created the extra.css file. That's what's inside of this file:
:root {
--md-primary-fg-color: #5f64a0;
--md-accent-fg-color: #5f64a0;
}
The first primary color is responsible for the upper bar (please, correct if I am using a wrong term) with the search to change the color.
The second accent color changes the color of the link if you hover. It won't change the color when the link is clicked.
If you keep the primary and accent colors the same, you will have the same color for links if you hover and the upper bar. If you comment the primary color, the upper bar will be purple by default and the links will be the accent color.
Also, if you specify primary and accent colors, you will get the same color when the link is clicked.
Don't forget to configure your mkdocs.yml:
extra_css:
- stylesheets/extra.css
theme:
palette:
primary: stylesheets/extra.css
name: material
logo: 'images/logo.png'
For example, I have the CSS code where I use the white colour a lot.
:root {
--color-white: #fff;
}
My question is whether it worths to declare colours like 'black' and 'white' as variables or I shall use default white and black CSS colour names? Which way is more efficient?
I doubt if efficiency is the driving force behind the use of CSS variables in the way suggested.
There is no need, and indeed it could cause confusion, to rename existing CSS colors.
CSS variables though make it easier to change things. For example, if you are trying out a theme with text in black on white and if there are several places in your CSS where you need to set color or background-color you could define --col: black and --bg: white and then use var(--col) etc in the relevant places in the style sheet.
If you then want to change them, all you have to do is redefine --col and --bg.
When I create a CSS provider with gtk_css_provider_new, and load it with gtk_css_provider_load_from_data, giving it "textview { color: red; font: 30px serif; }" as the data, and apply it to a gtk_text_view by using gtk_style_context_add_provider, the result is that it changes the font size to 30, but leaves the text color as black. What do I have to do the change the text color?
That it changes the font size shows that the CSS is actually working. That it doesn't change the color shows that it's only partly working. Is there something special that has to be done to change text color? Something different than what changes the font size?
If I use gdk_rgba_to_string to show the rgba, it shows it as "rgb(255,0,0)" which shows that the style context actually has the color red. So the only issue is why the red isn't used as the actual text color when the 30px serif is used as the actual font.
To change the color of the text you have to select the text part of the TextView in CSS... it would be something like this
textview text {
color : #4fc3f7;
}
This would change the text color to blue.You could always use the Gtk inspector to identify the css nodes associated with the window(Ctrl + Shift + I or D ) if you want to modify more..
Another way to do this is to use (gtk_text_buffer_create_tag https://developer.gnome.org/gtk3/stable/GtkTextView.html) and add the text using (gtk_text_buffer_insert_with_tags_by_name)
I'm using R Markdown in RStudio and prefer to write code using a black background. My tables are formatted nicely in the output html document using kable. However, I've noticed that I can't read the output from kable because the text color is black:
But if I use pander, it knows to use white text...
But oh man that is ugly in my report:
How can I either get kable to use white text inside RStudio, or get pander to produce prettier tables in my report?
You could use
kable(head(iris), format = "html", table.attr = "style = \"color: white;\"")
in order to have the notebook previews use a white font color. If you want the final output to be formatted another way, just use some CSS at the beginning of your Rmarkdown:
<style>
table {
background-color: white !important;
color: black !important;
}
</style>
The !important rule overrides any other styles.
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.