This page (revision-1) was last changed on 16-Aug-2026 18:10 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
16-Aug-2026 18:10 16 KB UnknownAuthor

Page References

Incoming links Outgoing links
CSSThemeDark...nobody
CSSThemeDark

Version management

Difference between version and

1%%add-css
2
3/* Inspired by: https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a. Adapted for JSPWIKI, as delta on top of haddock.css. */
4
5html {
6 /*red / ...
7 --hue: 10;
8 --accent-hue: 185;
9 */
10 /*green / ...
11 --hue: 110;
12 --accent-hue: 285;
13 */
14 /* blue / orange */
15 --hue: 210;
16 --accent-hue: 25;
17
18 --text-color-normal: hsl(var(--hue), 10%, 62%);
19 --text-color-light: hsl(var(--hue), 15%, 35%);
20 --text-color-richer: hsl(var(--hue), 50%, 72%);
21 --text-color-highlight: hsl(var(--accent-hue), 70%, 45%);
22
23 --link-color: hsl(var(--accent-hue), 90%, 70%);
24
25 --accent-color: hsl(var(--accent-hue), 100%, 70%);
26 --error-color: rgb(240, 50, 50);
27
28 --button-background: hsl(var(--hue), 63%, 43%);
29 --button-text-color: black;
30
31 --background: hsla(var(--hue), 20%, 12%, 0.9);
32 --background-sidebar: hsla(var(--hue), 20%, 28%, 0.5);
33 --background-light: hsla(var(--hue), 20%, 28%, 0.9);
34 --background-lighter: hsla(var(--hue), 20%, 32%, 0.9);
35
36 --background-dropdown: hsla(var(--hue), 20%, 20%, 0.95);
37 --background-dialog: hsla(var(--hue), 20%, 20%, 0.95);
38
39 --border-color: var(--background-lighter);
40
41 --context-primary: #0088cc;
42 --context-success: #47a447;
43 --context-info: #5bc0de;
44 --context-warning: #ed9c28;
45 --context-error: #d53f3a;
46 --color-black: #111;
47 --color-white: #fff;
48}
49
50::selection {
51 color:var(--accent-color);
52 background-color: var(--color-black);
53}
54
55/* --- BOOTSTRAP --- */
56
57.panel {
58 background-color: var(--background-light);
59 border-color: var(--border-color);
60}
61.panel-default .panel-heading {
62 background-color: var(--background-lighter);
63 border-color: var(--border-color);
64 color:inherit;
65}
66
67.list-group-item {
68 background-color: var(--background-light);
69 border-color: var(--border-color);
70}
71
72.nav-tabs {
73 border-color: var(--border-color);
74}
75.nav-tabs > li > a {
76 color:inherit;
77}
78.nav-tabs > li > a:hover {
79 background-color: var(--background-light);
80 border-color: var(--border-color);
81 color:inherit;
82}
83.nav-tabs > li.active > a,
84.nav-tabs > li.active {
85 background:transparent;
86 color:var(--text-color-richer);
87 border-color: var(--border-color);
88 border-bottom-color: var(--background);
89}
90.nav-tabs > li.active > a:hover,
91.nav-tabs > li.active > a:focus {
92 background-color: var(--background-lighter);
93 border-color: var(--border-color);
94 color:var(--text-color-richer);
95}
96
97/*.nav-pills > li.active > a,
98.nav-pills > li.active > a:hover,
99.nav-pills > li.active > a:focus {
100
101}*/
102.nav > li > a:hover, .nav > li > a:focus {
103 background-color: var(--background-lighter);
104 border-color: var(--border-color);
105 color:var(--text-color-richer);
106}
107
108
109.btn-default,
110.default {
111 background-color: var(--background-light);
112 border-color: var(--border-color);
113 color:var(--text-color-richer);
114}
115.btn:hover, .btn:focus, .btn.focus,
116.btn-default:hover {
117 background-color: var(--background-lighter);
118 border-color: var(--border-color);
119 color:var(--text-color-richer);
120}
121.btn.disabled:hover {
122 background-color: var(--background-lighter);
123 border-color: var(--border-color);
124}
125.btn-default:active,
126.btn-default:active:hover,
127.btn-default.active,
128.btn-default.active:hover {
129 background-color: var(--background-lighter);
130 border-color: var(--border-color);
131 color:var(--accent-color);
132}
133
134.dropdown-menu {
135 background-color: var(--background-dropdown);
136 border-color: var(--border-color);
137}
138.dropdown-header {
139 color:var(--text-color-richer);
140}
141.dropdown-menu .divider {
142 background-color: var(--border-color);
143}
144.dropdown-menu > li > a {
145 color:var(--text-color-normal);
146}
147.dropdown-menu > li > a:hover {
148 background-color: var(--background-lighter);
149 color:inherit;
150}
151
152.form-control {
153 background-color: var(--background-light);
154 border-color: var(--border-color);
155}
156.form-control:focus {
157 border-color: var(--accent-color);
158}
159.form-control[[disabled] {
160 background-color: transparent;
161 border-color: var(--border-color);
162}
163.form-frame {
164 border-color: var(--border-color);
165}
166
167select,
168.form-group select {
169 background-color: var(--background-light);
170 border-color: var(--border-color);
171 color:var(--text-color-normal);
172}
173
174.modal {
175 background-color: var(--background-dropdown);
176 color:var(--text-color-normal);
177}
178
179/*pagination.less*/
180.pagination {
181 background-color: var(--background-light);
182 border-color: var(--border-color);
183}
184.pagination a {
185 color:var(--link-color);
186 text-decoration:none;
187}
188.pagination .cursor,
189.pagination a:hover {
190 background-color: var(--background-lighter);
191 border-color: var(--border-color);
192 color: var(--accent-color);
193}
194
195/* --- JSPWiki --- */
196
197/* --- variables.less --- */
198
199/* --- type.less --- */
200
201hr,.hr {
202 border-color: var(--border-color);
203}
204
205mark, .highlight {
206 background-color: var(--accent-color) !important;
207 color:var(--text-color-highlight);
208}
209
210span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal;); }
211/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
212
213.text-primary { color: var(--context-primary); }
214.text-success { color: var(--context-success); }
215.text-info { color: var(--context-info); }
216.text-warning { color: var(--context-warning); }
217.text-error,
218.text-danger { color: var(--context-error); }
219
220/* primary */
221.panel-primary > .panel-heading,
222.bg-primary {
223 background-color: var(--context-primary);
224 border-color: var(--context-primary);
225 color:var(--color-white);
226}
227.panel-primary > .panel-heading a:link,
228.bg-primary a:link {
229 color:var(--color-black);
230}
231/* success */
232.panel-success > .panel-heading,
233.success,
234.bg-success {
235 background-color: var(--context-success);
236 border-color: var(--context-success);
237 color:var(--color-black);
238}
239.panel-success > .panel-heading a:link,
240.success a:link,
241.bg-success a:link {
242 color:inherit;
243 text-decoration:underline;
244}
245/* info */
246.panel-info > .panel-heading,
247.info, .information,
248.bg-info {
249 background-color: var(--context-info);
250 border-color: var(--context-info);
251 color:var(--color-black);
252}
253.panel-info > .panel-heading a:link,
254.info a:link, .information a:link,
255.bg-info a:link {
256 color:inherit;
257 text-decoration:underline;
258}
259/* warning */
260.panel-warning > .panel-heading,
261.alert-warning,
262.warning,
263.bg-warning {
264 background-color: var(--context-warning);
265 border-color: var(--context-warning);
266 color:var(--color-black);
267}
268.panel-warning > .panel-heading a:link,
269.alert-warning a:link,
270.warning a:link,
271.bg-warning a:link {
272 color:inherit;
273 text-decoration:underline;
274}
275/* danger, error */
276.panel-danger > .panel-heading,
277.error,.danger,
278.bg-danger {
279 background-color: var(--context-error);
280 border-color: var(--context-error);
281 color:var(--color-black);
282}
283.panel-danger > .panel-heading a:link,
284.error a:link,.danger a:link,
285.bg-danger a:link {
286 color:inherit;
287 text-decoration:underline;
288}
289
290span.label { color:var(--color-black); }
291
292pre {
293 background-color:var(--background-light);
294 border-color:var(--border-color);
295 color:var(--text-color-richer);
296}
297
298code,
299tt {
300 background-color:var(--background-light);
301 border-color:var(--border-color);
302 color:var(--text-color-richer);
303}
304
305a.list-group-item:hover,
306.list-hover li:hover {
307 background-color:var(--background-lighter);
308 color:inherit;
309}
310
311.tree ul li::before,
312.tree ul li::after {
313 background: var(--border-color);
314}
315
316.list-hover li:hover {
317 background-color:var(--background-lighter);
318}
319
320.hover {
321 background-color:var(--background-lighter);
322}
323
324a.slimbox-link:after,
325.slimbox-btn:before,
326a:visited,
327a:link { color:var(--link-color); }
328
329a.createpage {
330 color:var(--error-color);
331}
332
333.interwiki-raw::after,
334a.interwiki[[href$="skin=raw"]::after,
335.interwiki-reader::after,
336a.interwiki[[href$="skin=reader"]::after,
337.interwiki-edit::after,
338a.interwiki[[href*="Edit.jsp?page="]::after,
339.interwiki-group::after,
340a.interwiki[[href*="Group.jsp?group="]::after,
341a.interwiki[[href^="rss.jsp"]::after {
342 background-color:var(--background-lighter);
343 color:var(--accent-color);
344}
345
346.editsection,
347.hashlink {
348 background-color: var(--background-light);
349 border-color: var(--border-color);
350 color:var(--link-color);
351}
352h2 .editsection:hover,
353h3 .editsection:hover,
354h4 .editsection:hover,
355h2 .hashlink:hover,
356h3 .hashlink:hover,
357h4 .hashlink:hover {
358 background-color: var(--background-lighter);
359 border-color: var(--border-color);
360 color:var(--link-color);
361 opacity:1;
362}
363
364div.dropcaps > span.dropcaps {
365 color: var(--text-color-highlight);
366}
367blockquote,
368.dialog .quote-item {
369 border-color:var(--text-color-highlight);
370}
371.page-break {
372 border-color: var(--border-color);
373}
374
375
376/* --- grid.less --- */
377/* --- tables.less --- */
378
379.table > thead > tr > th,
380.table > tbody > tr > th,
381.table > tfoot > tr > th,
382.table > thead > tr > td,
383.table > tbody > tr > td,
384.table > tfoot > tr > td {
385 border-color: var(--border-color);
386}
387
388.wikitable > thead > tr > th,
389.wikitable > tbody > tr > th,
390.wikitable > tfoot > tr > th,
391.wikitable > thead > tr > td,
392.wikitable > tbody > tr > td,
393.wikitable > tfoot > tr > td,
394.wikitable tr:first-child th {
395 border-color: var(--border-color);
396}
397
398.table-bordered,
399.table-bordered tr:first-child th,
400.table-bordered tr:first-child td {
401 border-color: var(--border-color);
402}
403.table-bordered > thead > tr > th,
404.table-bordered > tbody > tr > th,
405.table-bordered > tfoot > tr > th,
406.table-bordered > thead > tr > td,
407.table-bordered > tbody > tr > td,
408.table-bordered > tfoot > tr > td {
409 border-color: var(--border-color);
410}
411
412.table-hover > tbody > tr:nth-of-type(odd):hover,
413.table-hover > tbody > tr:nth-child(odd):hover > td,
414.table-hover > tbody > tr:nth-child(odd):hover > th,
415.table-hover > tbody > tr:hover {
416 background-color: var(--background-lighter);
417}
418
419.table-striped > tbody > tr:nth-of-type(odd) ,
420.table-striped > tbody > tr:nth-child(odd) > td,
421.table-striped > tbody > tr:nth-child(odd) > th {
422 background-color: var(--background-light);
423}
424[[class*=zebra] .odd {
425 background-color: var(--background-light);
426}
427
428
429/* --- TableX.Sort.less --- */
430.sortable th:hover {
431 background-color: var(--background-lighter);;
432}
433.sortable th.up:after,
434.sortable th.up:hover:after {
435 border-bottom-color: var(--accent-color);
436 opacity:1;
437}
438.sortable th:hover:after,
439.sortable th.down:after,
440.sortable th.down:hover:after {
441 border-top-color: var(--accent-color);
442 opacity:1;
443}
444
445/* --- TableX.Filter.less --- */
446/* --- forms.less --- */
447/* --- modals.less --- */
448
449/* --- fontjspwiki/font-jspwiki.less --- */
450/* --- dropdown.less --- */
451
452/* --- pagination.less --- */
453/* --- Tips.less --- */
454.tip-link,
455.tip-link:hover {
456 color: var(--link-color);
457}
458/* --- Magnify.less --- */
459/* --- Viewer.less --- */
460/* --- Viewer.Slimbox.less --- */
461/* --- Viewer.Carousel.less --- */
462/* --- Template.View.less --- */
463.header, .footer {
464 background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
465 background-image: radial-gradient(circle, var(--background-light), var(--background) );
466 color:var(--text-color-normal);
467}
468a.logo { border-color: var(--border-color); }
469
470
471div.admin .formcontainer {
472 /*.default*/
473 background-color: var(--background-light);
474 border-color: var(--border-color);
475 color:var(--text-color-richer);
476}
477
478.admin .formcontainer table {
479 border-color: var(--border-color);
480 /*
481 .table;
482 .table-bordered;
483 .table-striped;
484 */
485}
486.admin-user-form > div#userlist .list-group-item.new-user{
487 background-color: var(--background-light);
488 border-color: var(--border-color);
489 color:var(--text-color-richer);
490}
491
492
493
494
495/* --- Template.UserBox.less --- */
496.login-form {
497 background-color: var(--background-dialog);
498 border:1px solid var(--border-color);
499}
500.login-form hr { border-color:var(--border-color); }
501
502
503/* --- Template.SearchBox.less --- */
504/* --- Template.Nav.less --- */
505.badge,
506.header > .navigation .nav > li > a > .badge {
507 background-color:var(--background-lighter);
508 color:var(--text-color-normal);
509}
510
511.header > .navigation .nav .btn-xs .badge {
512 background-color: var(--background-lighter);
513}
514
515/* --- Template.Content.less --- */
516body, .content {
517 background-color: var(--background);
518 color:var(--text-color-normal);
519 overflow-y: auto;
520}
521.content:after {
522 background: var(--background-sidebar);
523}
524/* --- Template.Attach.less --- */
525/* --- Template.Diff.less --- */
526.diffadd { background-color:var(--context-success); color:var(--color-black); }
527.diffrem { background:var(--context-error); color:var(--color-black); }
528
529/* --- Template.Search.less --- */
530
531form#searchform2 + div .fragment {
532 color: var(--text-color-richer);
533}
534form#searchform2 + div .gb-bar {
535 background-color: var(--context-warning);
536}
537
538/* --- Template.Workflow.less --- */
539/* --- Template.Edit.less --- */
540
541.editform input[[type="text"]:focus,
542.dialog.find input[[type="text"]:focus,
543.editform textarea:focus,
544.dialog.find textarea:focus {
545 background-color:var(--background-lighter);
546 border-color:var(--border-color);
547 color:var(--text-color-richer);
548}
549.ajaxpreview {
550 border-color:var(--border-color);
551}
552.edit-area ~ .ajaxpreview {
553 border-left-color:var(--border-color);
554}
555
556/* --- Dialog.less --- */
557.dialog {
558 background-color: var(--background-dialog);
559 border-color: var(--border-color);
560}
561.dialog .caption {
562 border-color: var(--border-color);
563 color: var(--text-color-normal);
564}
565.dialog.selection .body .item:hover {
566 background-color: var(--background-lighter);
567}
568.dialog.selection .body .divider {
569 background-color: var(--border-color);
570}
571
572.dialog.find [[name=tbTEXTSEL] { /*same as selected text*/
573 color:var(--accent-color);
574 background-color: var(--color-black);
575}
576
577
578
579/* --- Template.Preview.less --- */
580
581/* --- ImagePlugin.less --- */
582/* --- IndexPlugin.less --- */
583
584.index .header {
585 background-color:var(--background-light);
586 border-color:var(--border-color);
587}
588.index .header:hover {
589 background-color:var(--background-light);
590}
591.index .header a {
592 color:var(--text-color-richer);
593}
594.index .header a:hover {
595 background-color:var(--background-lighter);
596}
597.index > .section a {
598 color:var(--text-color-richer);
599}
600
601
602/* --- TOCPlugin.less --- */
603
604.toc ul li:hover {
605 background-color:var(--background-lighter);
606}
607
608/* --- WeblogPlugin.less --- */
609/* --- RecentChangesPlugin.less --- */
610
611.recentchanges .date {
612 border-color:var(--border-color);
613}
614/* --- CommentBox.less --- */
615
616
617/* --- GraphBar.less --- */
618.gb-group {
619 background-color:var(--background-light);
620 border:1px solid var(--border-color);
621}
622
623/* --- Tabs.less --- */
624/* --- Accordion.less --- */
625/* --- Columns.less --- */
626.columns.border,
627.columns.border > .col:not(:last-child) {
628 border-color:var(--border-color);
629}
630.columns.hover .col:hover {
631 background-color: var(--background-lighter);
632}
633
634
635/* --- Collapsible.less --- */
636.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
637.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
638
639.bullet.xpand { border-top-color: var(--text-color-normal); }
640.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
641
642/* --- Category.less --- */
643.category-link {
644 border-color:var(--border-color);
645}
646/* --- Flip.less --- */
647/* --- Invisibles.less --- */
648/* --- prettify.less --- */
649 .prettify pre, .prettify-nonum pre, pre.prettylines {
650 background-color:var(--background-light);
651 border-color:var(--border-color);
652 color:var(--text-color-richer);
653 }
654 .pln { color: #cccccc; } /* plain text */
655 .str { color: #99cc99; } /* string content */
656 .kwd { color: #ffeea6; } /* keyword */
657 .com { color: #8a8a80; } /* comment */
658 .typ { color: #bbdaff; } /* type name */
659 .lit { color: #FCA369; } /* literal value */
660 .pun { color: #cda869; } /* punctuation */
661 .opn { color: #ffffff; } /* lisp open bracket */
662 .clo { color: #ffffff; } /* lisp close bracket */
663 .tag { color: #78AAD6; } /* markup tag name */
664 .atn { color: #ffc58f; } /* markup attribute name */
665 .atv { color: #FFD479; } /* markup attribute value */
666 .dec { color: #D6ACD6; } /* declaration */
667 .var { color: #76D4D6; } /* variable name */
668 .fun { color: #d6acd6; } /* function name */
669
670/* --- responsive-viewport.less --- */
671/* --- print.less --- */
672
673/%
674
675
676[{ALLOW edit Admin}]
677[{ALLOW view All}]
This page (revision-) was last changed on 16-Aug-2026 18:10 by UnknownAuthorTop