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
Note: this theme makes use of css variables (css custom properties), currently not supported by IE browsers. See https://caniuse.com/#feat=css-variables
How to:#
Add following markup to your LeftMenu to make it the default theme of your site.%%add-css [CSSThemeDark] /%
See Category.Themes, Category.Add CSS Style
Haddock Styles Test Page#
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?The following snippet of text contains strikethrough, sub-script and super-script text.
Left#
Justify#
Center#
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#
Links#
- External Link
- Attachment Link
- Ordinary Wiki-Page Link
- Interwiki Link - Reader skin
- Interwiki Link- Raw page source
- SLIMBOX link, Full SLIMBOX link
- Category Link
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#
/** * 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.
/** * 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(); } }; }
/** * 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(); } }; }
Blockquotes #
DropCaps#
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#
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.
With modest border
Best check yo self, you're not looking too good.
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 DangerBadges: Example 3
Under-construction banner:
Graph Bars#
100
100
100
100
100
With stripes (-striped)
100
100
100
100
100
Animated (-active)
100
100
100
100
100
Category | Weight | Length |
---|---|---|
apple | 20 | 20 |
pear | 40 | 10 |
banana | 60 | 5 |
strawberry | 49 | 7 |
cherry | 37 | 12 |
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.
- List item 1
- List item 2
- List item 21
- 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 21
- List item 3
- List item 1
- List item 2
- List item 21
- List item 3
-nostyle
- List item 1
- List item 2
- List item 21
- List item 3
-unstyled
- List item 1
- List item 2
- List item 21
- List item 3
- List item 1
- List item 2
- List item 21
- List item 3
%%list-group-hover
- List item 1
- List item 2
- List item 21
- List item 3
%%list-hover
- List item 1
- List item 2
- List item 21
- List item 3
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.