A dark theme is sometimes preferred by programmers (a default in many modern editors), or it can be used as a kind of night mode. And dark themes require less energy to display on some display technologies. More on wikipedia
to make it the default theme of your site.
page, to use the theme as soon as you are authenticated.
Typography#
Heading 1#
Heading 2#
Heading 3#
Regular#
This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
Bold#
This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
Italic#
This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
This is just some sample %%lead content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
This line of text is meant to be treated as fine print.
The following snippet of text contains strikethrough, sub-script and super-script text.
Left#
This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
Justify#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
Center#
This is just some sample content.
Don’t even bother reading it;
you will just waste your time.
Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
Right#
This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
Links#
Images#
By default, wide images are scaled down to fit the screen.
With %%scrollable-image, images retain their original size. You can scroll to view parts of the image which fall of the screen.
Emphasis classes#
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- Etiam porta sem malesuada magna mollis euismod.
- Donec ullamcorper nulla non metus auctor fringilla.
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- Lowercased text
- Uppercased text
- Capitalized text
- Small-caps text
Pre-formatted text#
Plain preformatted text
/**
* the fibonacci series implemented as an Iterable
*/
public final class Fibonacci implements Iterable<Integer> {
/** the next and previous members of the series. */
private int a = 1, b = 1;
public Iterator<Integer> iterator() {
return new Iterator<Integer>() {
/** the series is infinite. */
public boolean hasNext() { return true; }
public Integer next() {
int tmp = a;
a += b;
b = tmp;
return a;
}
public void remove() { throw new UnsupportedOperationException(); }
};
}
Prettified text (syntax colouring)
/**
* the fibonacci series implemented as an Iterable.
*/
public final class Fibonacci implements Iterable<Integer> {
/** the next and previous members of the series. */
private int a = 1, b = 1;
public Iterator<Integer> iterator() {
return new Iterator<Integer>() {
/** the series is infinite. */
public boolean hasNext() { return true; }
public Integer next() {
int tmp = a;
a += b;
b = tmp;
return a;
}
public void remove() { throw new UnsupportedOperationException(); }
};
}
And these pre-formatted blocks have a maximum height, the rest of the contents is scrollable.
Blockquotes #
This is just some sample
%%quote content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Someone famous in Source Title
DropCaps#
The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased usability by marking important passages and guiding readers through the text. Unlike their historic counterparts, drop caps on the Web don’t add value in terms of usability or readability—and they are hard for Web developers to control, often rendering differently across browsers.
And here is a page break#
Tables#
Default#
Planet | Distance From Sun (miles) | Diameter (miles) | Year Length (days) | Day Length (days) |
Mercury | 36,000,000 | 3,030 | 88 | 58.00 |
Venus | 67,000,000 | 7,520 | 225 | 225.00 |
Earth | 93,000,000 | 7,925 | 365 | 1.00 |
Mars | 142,000,000 | 4,210 | 687 | 1.00 |
Jupiter | 484,000,000 | 88,730 | 4,344 | 0.40 |
Saturn | 888,000,000 | 74,975 | 10,768 | 0.40 |
Uranus | 1,800,000,000 | 31,760 | 30,660 | 0.70 |
Neptune | 2,800,000,000 | 30,600 | 60,150 | 0.65 |
Pluto | 3,600,000,000 | 1,410 | 90,520 | 0.25 |
Fit#
Minimize the height of the rows and minimize the width of the table columns.
Planet | Distance From Sun (miles) | Diameter (miles) | Year Length (days) | Day Length (days) |
Mercury | 36,000,000 | 3,030 | 88 | 58.00 |
Venus | 67,000,000 | 7,520 | 225 | 225.00 |
Earth | 93,000,000 | 7,925 | 365 | 1.00 |
Mars | 142,000,000 | 4,210 | 687 | 1.00 |
Jupiter | 484,000,000 | 88,730 | 4,344 | 0.40 |
Saturn | 888,000,000 | 74,975 | 10,768 | 0.40 |
Uranus | 1,800,000,000 | 31,760 | 30,660 | 0.70 |
Neptune | 2,800,000,000 | 30,600 | 60,150 | 0.65 |
Pluto | 3,600,000,000 | 1,410 | 90,520 | 0.25 |
Condensed#
Minimize the height of the rows and minimize the width of the table columns.
Planet | Distance From Sun (miles) | Diameter (miles) | Year Length (days) | Day Length (days) |
Mercury | 36,000,000 | 3,030 | 88 | 58.00 |
Venus | 67,000,000 | 7,520 | 225 | 225.00 |
Earth | 93,000,000 | 7,925 | 365 | 1.00 |
Mars | 142,000,000 | 4,210 | 687 | 1.00 |
Jupiter | 484,000,000 | 88,730 | 4,344 | 0.40 |
Saturn | 888,000,000 | 74,975 | 10,768 | 0.40 |
Uranus | 1,800,000,000 | 31,760 | 30,660 | 0.70 |
Neptune | 2,800,000,000 | 30,600 | 60,150 | 0.65 |
Pluto | 3,600,000,000 | 1,410 | 90,520 | 0.25 |
Bordered#
Planet | Distance From Sun (miles) | Diameter (miles) | Year Length (days) | Day Length (days) |
Mercury | 36,000,000 | 3,030 | 88 | 58.00 |
Venus | 67,000,000 | 7,520 | 225 | 225.00 |
Earth | 93,000,000 | 7,925 | 365 | 1.00 |
Mars | 142,000,000 | 4,210 | 687 | 1.00 |
Jupiter | 484,000,000 | 88,730 | 4,344 | 0.40 |
Saturn | 888,000,000 | 74,975 | 10,768 | 0.40 |
Uranus | 1,800,000,000 | 31,760 | 30,660 | 0.70 |
Neptune | 2,800,000,000 | 30,600 | 60,150 | 0.65 |
Pluto | 3,600,000,000 | 1,410 | 90,520 | 0.25 |
Striped#
Planet | Distance From Sun (miles) | Diameter (miles) | Year Length (days) | Day Length (days) |
Mercury | 36,000,000 | 3,030 | 88 | 58.00 |
Venus | 67,000,000 | 7,520 | 225 | 225.00 |
Earth | 93,000,000 | 7,925 | 365 | 1.00 |
Mars | 142,000,000 | 4,210 | 687 | 1.00 |
Jupiter | 484,000,000 | 88,730 | 4,344 | 0.40 |
Saturn | 888,000,000 | 74,975 | 10,768 | 0.40 |
Uranus | 1,800,000,000 | 31,760 | 30,660 | 0.70 |
Neptune | 2,800,000,000 | 30,600 | 60,150 | 0.65 |
Pluto | 3,600,000,000 | 1,410 | 90,520 | 0.25 |
Hover #
Planet | Distance From Sun (miles) | Diameter (miles) | Year Length (days) | Day Length (days) |
Mercury | 36,000,000 | 3,030 | 88 | 58.00 |
Venus | 67,000,000 | 7,520 | 225 | 225.00 |
Earth | 93,000,000 | 7,925 | 365 | 1.00 |
Mars | 142,000,000 | 4,210 | 687 | 1.00 |
Jupiter | 484,000,000 | 88,730 | 4,344 | 0.40 |
Saturn | 888,000,000 | 74,975 | 10,768 | 0.40 |
Uranus | 1,800,000,000 | 31,760 | 30,660 | 0.70 |
Neptune | 2,800,000,000 | 30,600 | 60,150 | 0.65 |
Pluto | 3,600,000,000 | 1,410 | 90,520 | 0.25 |
Sort#
Planet | Distance From Sun (miles) | Diameter (miles) | Year Length (days) | Day Length (days) |
Mercury | 36,000,000 | 3,030 | 88 | 58.00 |
Venus | 67,000,000 | 7,520 | 225 | 225.00 |
Earth | 93,000,000 | 7,925 | 365 | 1.00 |
Mars | 142,000,000 | 4,210 | 687 | 1.00 |
Jupiter | 484,000,000 | 88,730 | 4,344 | 0.40 |
Saturn | 888,000,000 | 74,975 | 10,768 | 0.40 |
Uranus | 1,800,000,000 | 31,760 | 30,660 | 0.70 |
Neptune | 2,800,000,000 | 30,600 | 60,150 | 0.65 |
Pluto | 3,600,000,000 | 1,410 | 90,520 | 0.25 |
Filter#
Planet | Distance From Sun (miles) | Diameter (miles) | Year Length (days) | Day Length (days) |
Mercury | 36,000,000 | 3,030 | 88 | 58.00 |
Venus | 67,000,000 | 7,520 | 225 | 225.00 |
Earth | 93,000,000 | 7,925 | 365 | 1.00 |
Mars | 142,000,000 | 4,210 | 687 | 1.00 |
Jupiter | 484,000,000 | 88,730 | 4,344 | 0.40 |
Saturn | 888,000,000 | 74,975 | 10,768 | 0.40 |
Uranus | 1,800,000,000 | 31,760 | 30,660 | 0.70 |
Neptune | 2,800,000,000 | 30,600 | 60,150 | 0.65 |
Pluto | 3,600,000,000 | 1,410 | 90,520 | 0.25 |
Navs#
Tabs#
Tab1#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Tab2#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Tab1#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Tab2#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Pills#
Tab1#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Tab2#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Tab1#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Tab2#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Accordion#
Tab1#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Tab2#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Tab1#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Tab2#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Tab1#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Tab2#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Text information boxes#
ALERT
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Default block
With modest border
Warning
Best check yo self, you're not looking too good.
Error. Oh snap! Change a few things up and try submitting again.
Success. Well done! You successfully read this important alert message.
Info. Heads up! This alert needs your attention, but it's not super important.
Can be used inline as well:
- This is just some sample. Don’t even bother reading it; you will waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you ¿ OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Labels and Badges#
Default Primary Success Info Warning Danger
Badges: Example 3
Under-construction banner:
Graph Bars#
Default colors
100
100
100
100
100
With stripes (-striped)
100
100
100
100
100
Animated (-active)
100
100
100
100
100
Multiple graphBars
Category | Weight | Length |
apple | 20 | 20 |
pear | 40 | 10 |
banana | 60 | 5 |
strawberry | 49 | 7 |
cherry | 37 | 12 |
Gauge bars
apple | 20 |
banana | 60 |
strawberry | 120 |
cherry | 49 |
Progress bars
apple | 20 |
pear | 40 |
banana | 60 |
strawberry | 120 |
Vertical bars
Quarterly sales: 20 120 60 75 |
Lists #
- Definition1
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
- Definition2
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
- Definition3
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
unordered
- List item 1
- List item 2
- List item 3
ordered
- List item 1
- List item 2
- List item 21
- List item 3
%%collapse
- List item 1
- List item 2
- List item 3
%%tree
- List item 1
- List item 2
- List item 3
-nostyle
- List item 1
- List item 2
- List item 3
-unstyled
- List item 1
- List item 2
- List item 3
%%list-group
- List item 1
- List item 2
- List item 3
%%list-group-hover
- List item 1
- List item 2
- List item 3
%%list-hover
- List item 1
- List item 2
- List item 3
Panel#
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
A Collapse Box#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
A Comment Box#
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.