►
Description
In this video Laura Kokkarinen (Sulava) is demonstrating how to get started with the modern themes in SharePoint Online. She demonstrates the different UI capabilities and also how to create your own custom theme and apply that to your tenant.
Presenter - Laura Kokkarinen (Sulava) @laurakokkarinen
More on modern themes from the official SharePoint documentation - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview
More details on the SharePoint developer community from http://aka.ms/sppnp.
A
Hey
my
name
is
Lyle
Koenen
in
this
five-minute.
Video
I
will
tell
you
what
I'm
gonna
things
in
shape
on
online
I
can
create
your
own
custom,
color
themes
that
match
our
company
branding,
deploy
those
themes
to
tenant
and
finally
start
using
them.
When
your
beautiful
model
check
out
online
sites.
Let's
go.
One
of
the
themes
for
sharepoint
online
were
introduced
in
November
2017,
so
now
that
they
modern
sites
themselves
we're
released.
You
can
access
the
currently
installed
themes
through
the
cogwheel
menu
in
the
top
right
corner.
A
Then
select
change
the
look
and
on
that
theme,
Chevron
comes
with
eight
model.
Our
box
themes
that
you
can
use
on
your
sites,
but
you
can
also
create
your
own
custom,
color
themes,
which
is
probably
why
you're
watching
this
video
in
the
first
place.
So,
let's
take
a
look
at
how
we
can
create
one
today
there
exists
two
tools
you
can
use
for
generating
custom,
color
palettes
for
your
themes
and
don't
worry.
I'll
include
links
to
birthdays,
as
well
as
all
of
the
resources
I'm
mentioning
in
this
video.
A
In
description
below
on
this
page,
you
can
select
one
primary
color,
one
body
text,
color
and
one
body
background
color.
You
can
use
these
color
pickers
to
choose
the
colors
that
you
want,
or
your
customer
might
already
have,
a
brand
guidelines
document
which
contains
the
X
values
for
the
exact
brand
colors.
So
I
recommend
that
you
asked
for
that
document
and
compress
the
X
values
to
this
theme
generator
to
ensure
that
you
get
the
colors
just
right.
A
When
we
scroll
a
little
bit
further
down
the
page,
we
can
see
that
we
have
three
boxes
and
based
on
your
choices,
a
custom
hex
color
palette
is
automatically
generated
into
them.
All
of
these
contain
the
same
color
palettes
and
which
one
of
these
you
need
to
select
depends
on
where
you're
planning
to
use
it.
If
you
are
going
to
deploy
your
theme
through
pow
shop,
he
will
need
this
parsha
one,
and
if
you
are
going
to
deploy
your
theme
through
rest,
you
will
need
to
trace
it
on
and
so
forth.
A
A
We
are
chosen
primary
colors
for
the
rest
of
the
tokens
in
the
palette,
these
colors
in
the
different
tokens
that
get
applied
to
different
elements,
only
modern
sites,
and
in
this
section
you
can
actually
see
all
the
controls
that
appear
on
modern
sites
will
look
like
after
your
color
theme
has
applied
on
them
and
as
the
last
thing
on
the
page,
we
have
a
little
accessibility
section
where
you
can
check
how
good
quality
rating
your
theme
has.
The
good
contrast
is
important
if
you
want
to
ensure
that
the
content
on
your
site
is
easily
readable.
A
Okay.
So
let's
take
a
look
at
the
newer
theme,
generator
or
should
I
say
theme
designer.
It
works
in
a
very
similar
manner,
as
the
older
theme
generator.
So
in
the
end
which
one
you
want
to
use
comes
down
to
a
personal
preference.
However,
there
are
couple
cool
things
in
this
one.
First
of
all,
when
you
are
selecting
colors
for
your
color
palette,
you
can
immediately
see
how
accessible
your
theme
is.
So
you
know
if
you
need
to
adjust
the
color
a
little
to
make
it
accessible
like
so
also.
A
The
controls
on
this
page
are
a
little
bit
different
than
what
we
saw
in
the
other
generator
and
when
we
scroll
down
the
page,
we
see
a
similar
list
of
different
shades
and
tokens
as
what
we
did
in
the
other
generator.
But
when
we
click
this
semantic
slots
tab,
you
can
also
see
what
color
the
different
tokens
get
based
on
their
section
background
color.
A
If
you've
edited
modern
pages
lately,
you
most
likely
notice
that
you
can
change
the
background
color
for
each
of
the
sections
that
contain
your
webparts
and
you're,
also
able
to
change
the
header
background
color.
What
this
section
aims
to
do
is
to
show
you
how
the
token
colors
change,
depending
on
the
different
background,
color
options
to
achieve
a
good
core
contrast.
The
background
colors
are
typically
white,
a
neutral
color,
a
light
shade
over
your
primary
color
and
your
chosen
primary
color,
which
is
usually
fairly
dark.
Okay.
A
So
when
we
are
done
creating
our
theme,
we
need
to
click.
This
export
theme
button
add
the
head
up
and
in
this
we
get
a
similar
view,
as
in
the
other
generator
and
because
I
want
to
deploy
my
theme
using
PowerShell
I'm,
selecting
this
partial
palace
and
I'm
pasting
it
to
my
partial
script,
like
so
in
the
script
I'm.
A
First
of
all,
authenticating
to
my
tenant,
using
my
admin
credentials,
then
I'm
defining
the
name
for
my
theme
and
below
that
in
the
palette
I'm
specifying
the
color
color
generated
by
the
theme
designer
and
finally,
I
have
the
command
mode
for
actually
installing
the
theme
to
my
tenant.
So
let's
run
this
script.
A
And
when
we
go
back
to
our
site,
we
can
actually
see
that
our
theme
has
been
installed
to
the
tenant,
with
the
name
that
we
chose
and
by
clicking
this
and
save,
we
can
apply
it
on
the
site.
Now,
if
you
want
your
users
to
only
use
your
custom
car
theme
on
their
sites,
you
can
actually
disable
all
of
these
default
themes
from
this
view
or
hide
them.
So
they
don't
even
appear
here.
Only
your
custom
theme
will
be
visible
here.
A
You
can
do
that
with
either
partial
or
seize
them,
and,
as
I
mentioned
earlier,
you
have
several
options
for
managing
your
themes.
Programmatically
I
already
showed
you
how
you
can
install
your
theme
to
your
Senate
tenant
using
powder,
but
in
addition
to
just
adding
your
themes,
you
can
also
remove
them
and
check
what
themes
are
installed
into
a
tenant
and
also
manage
the
height
default
themes.
A
Options
that
I
just
mentioned
about
you
can
also
do
all
of
these
things
by
using
season
and
with
rest,
you're,
also
able
to
read,
add,
update
and
delete
themes,
but
unfortunately,
we
are
unable
to
adjust
the
heights
default
themes
option.
However,
there's
one
very
interesting
thing
and
that
is
applying
themes
on
sites
and
what
is
interesting
about
this
operation
is
that
you
can
also
apply
a
theme
directly
to
a
site
without
installing
it
to
a
tenant
first.
A
So
if
you
have
a
situation
in
which
you
want
one
site
to
use
a
certain
color
palette,
but
you
don't
want
it
to
be
installed
to
a
tenant
for
everyone
else
to
use,
you
can
use
this
apply
theme
operation
to
do
that.
Just
for
that
one
site
and
remember
that,
even
though
there
is
no
native
method
or
commanded
for
applying
themes
in
season
or
partial,
you
can
absolutely
create
this
rest
request
in
your
PowerShell
or
C
sharp
code
or,
alternatively,
programmatically
invoke
a
SharePoint
site
design
to
apply
an
installed
theme
to
a
site.
A
But
that
is
a
story
for
another
time
now.
You
might
have
noticed
that
before
I
applied
this
cream
theme
to
my
site,
it
actually
had
this
kind
of
custom
multicolored
theme
on
it,
which
was
a
combination
of
this
Navy,
coral
and
turquoise
colors.
If
you
are
interested
in
creating
this
kind
of
multicolor
theme,
it
is
entirely
possible.
A
It
just
requires
a
little
bit
of
manual
work
to
help
you
out
I've
written
this
thorough
blog
post
with
steps
and
images
to
help
you
distinguish
what
tokens
are
used
on,
which
elements
of
the
page,
so
you
can
easily
see
where
these
different
colors
appear
and
adjust
your
color
palette
and
accordingly,
okay,
that's
it
I
hope
you
enjoyed
and
learned
a
lot
and
go
out
there
use
those
colors
have
fun
with
themes.
Bye,
bye,.