I've been trying to create multiple custom properties to use in my CSS files, after searching I discovered they should be prefixed with a double-dash and usually go inside of :root, like so:
:root {
--server-primary: #c38c00;
--server-secondary: #9d7100;
}
However doing this immediately gives me an error: javafx.css.CssParser parse WARNING: CSS Error parsing file:/[redacted]/ColorPalette.css: Expected RBRACE at [3,4].
I've tried finicking with this in every way I can imagine, but the only solution I have found is abandoning the use of these double-dash variables in place of the following:
.root {
-server-primary: #c38c00;
-server-secondary: #9d7100;
}
The reason I want to use the first one with double-dashes is to be able to reference these using var(--variable-name-here), which has the added benefit of actually displaying the color in my IDE, whereas just calling -variable-name-here does not show which color was used:
Using supported JavaFX CSS constructs
I don't think the : in var notation is supported for JavaFX CSS (I don't even know what it is, to be honest).
See the JavaFX CSS reference:
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html.
The likely equivalent for JavaFX is:
named colors, looked up colors and color functions
Named Colors <named-color>
CSS supports a bunch of named constant colors. Named colors can be
specified with just their unquoted name for example:
.button {
-fx-background-color: red;
}
Looked-up Colors <looked-up-color>
With looked-up colors you can refer to any other color property that
is set on the current node or any of its parents. This is a very
powerful feature, as it allows a generic palette of colors to be
specified on the scene then used thoughout the application. If you
want to change one of those palette colors you can do so at any level
in the scene tree and it will affect that node and all its decendents.
Looked-up colors are not looked up until they are applied, so they are
live and react to any style changes that might occur, such as
replacing a palette color at runtime with the "style" property on a
node.
In the following example, all background color of all buttons uses the
looked up color "ABC".
.root { abc: #f00 }
.button { -fx-background-color: abc }
Color Functions <color-function>
JavaFX supports some color computation functions. These compute new
colors from input colors at the time the color style is applied. This
enables a color theme to be specified using a single base color and to
have variant colors computed from that base color. There are two color
functions: derive() and ladder().
<derive> | <ladder>
Derive
derive( <color> , <number>% )
The derive function takes a color and computes a brighter or darker
version of that color. The second parameter is the brightness offset,
representing how much brighter or darker the derived color should be.
Positive percentages indicate brighter colors and negative percentages
indicate darker colors. A value of -100% means completely black, 0%
means no change in brightness, and 100% means completely white.
Ladder
ladder(<color> , <color-stop> [, <color-stop>]+)
The ladder function interpolates between colors. The effect is as if a
gradient is created using the stops provided, and then the brightness
of the provided <color> is used to index a color value within that
gradient. At 0% brightness, the color at the 0.0 end of the gradient
is used; at 100% brightness, the color at the 1.0 end of the gradient
is used; and at 50% brightness, the color at 0.5, the midway point of
the gradient, is used. Note that no gradient is actually rendered.
This is merely an interpolation function that results in a single
color.
I suggest you use these supported and documented features of JavaFX instead.
There are many examples of their use in the modena.css file which can be found inside your JavaFX installation packages (in Idea search for the file modena.css in your project libraries).
On IDE support (specifically IntelliJ Idea)
With regard specifically to the support for displaying colors parsed from CSS in an IDE, it will of course vary by IDE.
For IntelliJ Idea, which I think you are using, I think support varies depending on the version used. I think the free community edition may have limited or no support for CSS parsing and color display for CSS files. The paid (called Ultimate) version does provide support for CSS parsing and color display for CSS files.
As of 2022.1 Ultimate Edition, for JavaFX CSS, it will accurately display direct assignments of named colors as well as RGB and HSB-defined colors and some of the JavaFX color derivation functions.
It will NOT display colors that are assigned via JavaFX looked-up colors or some of the JavaFX color derivation functions. It will display stops in gradients as long as they are not looked up, but won't display the gradients themselves. Enhancement requests for the IDE could be raised for the IDE to add color display support for the looked up and derived colors and additional support for displaying gradients.
Related
$color-button: var(--color-9);
&:hover, &:focus {
background-color: darken($color-button, 10%);
}
Error: argument $color of darken($color, $amount) must be a color
Without Bootstrap
By the time your code reaches the user’s browser it is CSS. At the time SASS is processing your code it doesn’t know what color the variable you passed it will have so it can’t process it to darken it.
To do this sort of thing live during run time you could use some JavaScript to work out the darkened color or, if there is a known set of colors which may have to be darkened, build in their dark equivalents.
This SO question and answer may be helpful How to create color shades using CSS variables similar to darken() of SASS?. Basically if you are going to do the processing yourself, working in hsl makes life easier.
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.
It's a basic question but I want to know when defining main colors for an application, should the color classes be named by their color:
pumpkin-orange, topaz, sky-blue,gray-color
Or by their meaning/function :
main-color, main-color-hover,secondary-color,link-color,disabled-color...
Select the names by meaning.
Colors could change, bud the meaning stays.
It would be nice if the community could agree on common names.
That way, you could use third-party code and their design would already be harmonised.
Here is an attempt:
https://github.com/nuxodin/css-variables-name-conventions
You should avoid naming css classes by color. Use a functional name instead. I will advise you to have a look to BEM naming convention . I think it is a good start to have a structured approach of css.
The best way to handle colors, especially in large, complex projects, is to use both, branding names and functional names, and combine them so that maintaining the project color palette becomes super easy.
Name all the colors you get from the design with their "color" names (red-bright, red-light, red-pale). This is independent from your project HTML, it is related only to the color palette that the designer chose as the current theme
Name each place in your project where any color is used with its functional name (link-color, banner-color, banner-border, banner-bg, footer-bg).
These names are independent from the visual design.
Only ever use functional names within the CSS code that is applied to HTML elements. The only exception is if you're using CSS custom properties (--var(name)) color names are stated once on the :root so functional names can use them.
Connect the functional names to the appropriate color name as per the visual design. Keep the color palette themes and the connection between functional and branding colors in the same file (for example _colors.scss).
Example (here I'm simplifying the syntax just to illustrate the color-naming point, in reality you need to use CSS custom properties, Sass or LESS variables syntax):
/* ===== Color theme—Bright ===== */
blue: #0000ff;
green: #008000;
dark-green: #006400;
neon-green: #00ff00;
neon-blue: #00ffff;
/* ===== Project color definitions ===== */
/* All places where color is specified in the project */
/* Currently using the Bright design palette */
link-color: blue;
banner-color: green;
banner-border: dark-green;
banner-bg: neon-green;
alert-status: green;
alert-status-border: dark-green;
button-bg: neon-blue;
button-border: blue;
footer-bg: neon-blue;
This way if you have to change anything color-related you only need to deal with this file, no need to sift through all of your CSS.
This process requires that each time you're adding new HTML to your project, with its CSS, you need to come up with the functional names for the new component, and only use functional names in your regular CSS. At the same time copy the newly added functional name to your colors file (_colors.scss) and define it with a branding color palette there.
After a design revamp
If a new visual design comes along you can easily switch all the functional names with the new color names and change the colors for the entire project in 5 minutes!
/* ===== Color theme—Bright ===== */
blue: #0000ff;
green: #008000;
dark-green: #006400;
neon-green: #00ff00;
neon-blue: #00ffff;
/* ===== Color theme—Pale ===== */
pale-blue: #bbbbff;
pale-green: #a1c8a1;
pale-dark-green: #506450;
pale-neon-green: #ddffdd;
pale-neon-blue: #ccffff;
/* ===== Project color definitions ===== */
/* All places where color is specified in the project */
/* Currently using the Pale design palette */
link-color: pale-blue;
banner-color: pale-green;
banner-border: pale-dark-green;
banner-bg: pale-neon-green;
alert-status: pale-green;
alert-status-border: pale-dark-green;
button-bg: pale-neon-blue;
button-border: pale-blue;
footer-bg: pale-neon-blue;
You should delete the unused color palettes from your compiled CSS for better performance. This means that if you're using CSS custom properties you should delete the old branding color variables from the :root and add the new ones.
But you can keep the different branding color palette definitions
in the _colors.scss for future reference, because only the color palette that is used in the functional names will end up in the actual CSS.
Similar to the question referenced below, I am trying to set the background and foreground color of the active tab label using theme colors. I mostly expected referencing the theme colors identifiers in CSS to not work. Is there a proper way to do so?
AngularJS Material Design : Different colors for different tabs in md-tabs
works:
.md-tab.md-active
{
background: green;
}
doesn't work:
.md-tab.md-active
{
background: accent;
}
The md-colors directive works with either value within an html tag, but they don't apply to the specific portions of md-tabs or md-tab that I would like:
<div md-colors="{color: 'accent', background: 'green'}">My Text</div>
What I'm trying to do is avoid hard coding the color that happens to be the accent (or could be primary) in the CSS. I'm thinking there is a way to programmatically determine the colors of accent/primary and then apply the colors. I haven't figured it out yet.
I think the issue is that you are trying to set the color to 'accent' which is not a color. As a variable it works in an Angular directive, but not is vanilla css.
I have a css file and i want automatically create few color variations of the file, using something like "colorize" in GIMP to shift hue of template.
I found something that does exacly what i want: http://adityabhandari.com/wp-content/uploads/2011/01/ColorChanger.html
but it not support rgba() notation i often use.
I'm linux user so maybe some tricky shell script with regex will do, problem is i really suck at regex.
If you post php/python/awk solution I'm smart enough to use it to.
LESS.css
It adds a number of convenience methods to CSS, including hex/rgba arithmetic, and will compile to 'native' CSS with the command line utility, which you will find intuitive.
spin(#BEFBA, 10); // return a color with a 10 degree larger in hue than #BEFBA
#color: #BEFBA; // just a variable
spin(#color, -10); // return a color with a 10 degree smaller in hue than #color
// applied to css class:
.myStyle{
background-color: spin( #color, 10 );
}