JavaFX Java GUI Tutorial - 25 - CSS Themes and Styles Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

our RIT houses welcome back and in this
video I'm going to show you how to use
CSS with Java FX now this is actually
one of the main reasons that I love Java
FX because before this bad boy came
along whenever we were trying to make
gooeys in java we pretty much use the
framework and it gave us a couple of
default themes but those themes were
more likely than not very ugly looking
so thanks to Java FX what we can do now
is we can actually write our own custom
CSS so we now have complete control over
every single item the color the font
size the background all that good stuff
so I'll show you guys exactly how to
work with that in designing a beautiful
piece of software but first I need to
show you guys this I don't need to but I
want to I thought it was really cool I
was browsing github the other day and I
stumbled across this repository right
here
so what this is is its base 16 color
scheme and any time you're trying to
design a piece of software with a dark
theme you see how IntelliJ kind of has a
dark theme to it what you can do is you
can use one of these themes so this is
pretty much a default one if you click
it it gives you all the arm hex numbers
or what you can do is just click this
little link and it will give you a bunch
of different themes so click like
Twilight ocean just a bunch of cool dark
themes so I thought this was pretty
stinking awesome
so I'm like you know what might as well
use this in my tutorial so without
further ado let's go ahead and get
started and for this tutorial what I am
doing is I'm actually using the code
from tutorial number 9 where I show you
guys how to work with grid layouts so
that's my starting point I didn't feel
like you know writing all this over
again since you already learned it so
the first thing I want to show you guys
is just how to use a really simple
built-in theme so by default we have
that theme that you just saw whenever
you first run everything and don't mess
with any styling you're giving that
default look and feel but
JavaFX also has a
couple other style sheets built-in so
you can just stick it right under your
login button what you can do is you can
say whenever we click the login button
I'm going to change this theme just so
you guys can see the difference so login
button set on action let me just stick
it on a new line so sets user agent
style sheet this means set a new style
for this program and the value is style
sheet
I believe Medina I don't even know how
to say these words or Caspian Medina I
think is the one that's given to you by
default but I know Caspian is a
different one
I don't really know these because I
don't really like the built-in styles I
always like to code my own so if I run
this we're given this one by default and
then I'm going to click this button and
watch it change so it was kind of subtle
but let me do that again you know it's
not like a huge change but the
background gets a little bit lighter the
text looks like it changes a little bit
in there you go so alright we have two
themes neither of those are that great
so let's go ahead and start building our
own so delete that because we really
don't want it and do this anytime you
want to work with a new custom style
it's always a good idea to add a new CSS
file
they have CSS in here you got a right at
myself'
style sheet right here hey buddy all
right
style sheet so I'll just name it
whatever theme what's a cool name for a
theme
Viper Viper CSS wow that is cool name
good job Bucky if anyone steals my theme
name I will destroy you fight for ah
nice all right so let me adjust here
well excited I thought of a cool name
alright so what you can actually do is
you can start styling these individual
widgets for example you can give this
button a new style maybe make the
background red you can I don't know for
these inputs
um you can make the text bigger in them
but what if you just want to apply an
overall style to your entire program
well in order to do that you use the
routes dot route now in between the
curly braces just like any normal CSS
you start writing your properties and
their values so the background a lot of
these they begin with FX background
color so now you can just use any hex
color let's what's a cool background
color maybe this three eight three eight
three eight three eight three eight
three a day to day day alright so now
our entire background for our software
is going to be this dark gray and also
say I don't know I want to set like the
font size to what's something like
eleven point so now that we have a style
created we need to hop back over in main
Java and we need to tell our program to
use that style sheet so under scene
remember the window is your entire
window with all the little buttons the X
maximize minimize the scene is
essentially the content inside your
window so what we can do for the scene
is we can get is oh it's right there
first one get style sheets and add
whatever our name was so Viper does CSS
now what this is going to do is it's
going to get all the current styles and
it's going to override them with Viper
CSS so basically whatever was there
before you can keep that for example all
the default font sizes the background
colors of the input and buttons but just
change the background color and font
size so let me run this and check it out
so our a our font size is now eleven
point and our background is now what is
it three eight three eight three and you
know what I think that font size is a
little big so I'm going to go
TenPoint and see how that looks all
right not bad but obviously we have a
couple issues first of all these labels
are incredibly hard to read so let's fix
that right now