diff --git a/jspwiki-war/src/main/webapp/templates/default/commonheader.jsp b/jspwiki-war/src/main/webapp/templates/default/commonheader.jsp
index f1aba997f9..fd78354ee8 100644
--- a/jspwiki-war/src/main/webapp/templates/default/commonheader.jsp
+++ b/jspwiki-war/src/main/webapp/templates/default/commonheader.jsp
@@ -74,10 +74,6 @@ String.I18N.PREFIX = "javascript.";
-
-
-
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/black-n-gold/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/black-n-gold/skin.css
new file mode 100644
index 0000000000..61266f8be9
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/black-n-gold/skin.css
@@ -0,0 +1,739 @@
+/*
+Copyright 2025 The Apache Software Foundation.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+html {
+ /* 1. Core Hue Shifts */
+ --hue: 45; /* Gold/Yellow Hue */
+ --accent-hue: 45;
+
+ /* 2. Text Colors */
+ --text-color-normal: #e0e0e0; /* Light gray for better readability than pure white */
+ --text-color-light: #a3a3a3; /* Muted gray */
+ --text-color-richer: #ffffff; /* Pure white for headers */
+ --text-color-highlight: #ffcc00; /* Bright Gold for emphasis */
+
+ /* 3. Links and Accents */
+ --link-color: #ffcc00; /* Army Gold */
+ --accent-color: #d4af37; /* Metallic Gold */
+ --error-color: #ff4444;
+
+ /* 4. Buttons */
+ --button-background: #ffcc00; /* Gold buttons */
+ --button-text-color: #000000; /* Black text on gold buttons for high contrast */
+ --button-active: #e6b800;
+ --button-active-darker: #cca300;
+
+ /* 5. Backgrounds */
+ --background: #111111; /* Deep Rich Black */
+ --background-sidebar: #1a1a1a; /* Slightly lighter charcoal for sidebars */
+ --background-light: #222222; /* For panels/cards */
+ --background-lighter: #333333;
+ --background-light-solid: #1a1a1a;
+
+ /* Navbar / PageName Specific Background */
+ --navbar-bg: #000000; /* Pure Black Navbar */
+
+ --background-dropdown: #222222;
+ --background-dialog: #111111;
+
+ /* 6. Borders */
+ --border-color: #333333; /* Dark gray borders */
+
+ /* 7. Contextual Colors */
+ --context-primary: #ffcc00; /* Gold */
+ --context-success: #4b5320; /* Army Green */
+ --context-info: #3498db;
+ --context-warning: #f39c12;
+ --context-error: #e74c3c;
+
+ --color-black: #000000;
+ --color-white: #ffffff;
+
+ --wikiTriangleColor: var(--link-color);
+}
+
+
+::selection {
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+/* --- BOOTSTRAP --- */
+.titlebox {
+ background-color: var(--background-light);
+}
+.panel {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.panel-default .panel-heading {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:inherit;
+}
+
+.list-group-item {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+
+.nav-tabs {
+ border-color: var(--border-color);
+}
+.nav-tabs > li > a {
+ color:inherit;
+}
+.nav-tabs > li > a:hover {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:inherit;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active {
+ background:transparent;
+ color:var(--text-color-richer);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background);
+}
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+/*.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+
+}*/
+.nav > li > a:hover, .nav > li > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+.btn-default,
+.default {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn:hover, .btn:focus, .btn.focus,
+.btn-default:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn.disabled:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+}
+.btn-default:active,
+.btn-default:active:hover,
+.btn-default.active,
+.btn-default.active:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--accent-color);
+}
+
+.dropdown-menu {
+ background-color: var(--background-dropdown);
+ border-color: var(--border-color);
+}
+.dropdown-header {
+ color:var(--text-color-richer);
+}
+.dropdown-menu .divider {
+ background-color: var(--border-color);
+}
+.dropdown-menu > li > a {
+ color:var(--text-color-normal);
+}
+.dropdown-menu > li > a:hover {
+ background-color: var(--background-lighter);
+ color:inherit;
+}
+
+.form-control {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+}
+.form-control:focus {
+ border-color: var(--accent-color);
+}
+.form-control[disabled] {
+ background-color: transparent;
+ border-color: var(--border-color);
+}
+.form-frame {
+ border-color: var(--border-color);
+}
+
+label.form-switch > input[type=checkbox],
+input[type=checkbox].form-switch {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ background-color:var(--background-light);
+ border:1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:hover,
+input[type=checkbox].form-switch:hover {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ border: 1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:checked,
+input[type=checkbox].form-switch:checked {
+ box-shadow: inset 1.25em 0 0 1px var(--button-active);
+ border: 1px solid var(--button-active);
+}
+label.form-switch > input[type=checkbox]:checked:hover,
+input[type=checkbox].form-switch:checked:hover {
+ box-shadow:inset 1.25em 0 0 1px var(--button-active-darker);
+ border: 1px solid var(--button-active-darker);
+}
+label.form-switch > input[type=checkbox]:focus,
+input[type=checkbox].form-switch:focus {
+ background:none !important;
+}
+/*
+.form-group .btn.active {
+ color:var(--text-color-normal);
+ background-color:var(--context-info);
+}
+*/
+
+select,
+.form-group select {
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+
+ background-color: var(--background-light);
+ background-image:
+ linear-gradient(120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) ),
+ linear-gradient(-120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) );
+
+ background-position:
+ calc( var(--padding-base-horizontal) - 1px + var(--wikiTriangleSize)/2 ) calc(var(--padding-base-vertical)*2),
+ calc( var(--padding-base-horizontal) - var(--wikiTriangleSize)*3/2 ) calc(var(--padding-base-vertical)*2);
+
+
+}
+
+input[type=checkbox]:focus,
+select:focus,
+.form-group select:focus {
+ outline-color: var(--accent-color);
+}
+
+.modal {
+ background-color: var(--background-dropdown);
+ color:var(--text-color-normal);
+}
+
+/*pagination.less*/
+.pagination {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.pagination a {
+ color:var(--link-color);
+ text-decoration:none;
+}
+.pagination .cursor,
+.pagination a:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color: var(--accent-color);
+}
+
+/* --- JSPWiki --- */
+
+/* --- variables.less --- */
+
+/* --- type.less --- */
+
+hr,.hr {
+ border-color: var(--border-color);
+}
+
+mark, .highlight {
+ background-color: var(--accent-color) !important;
+ color:var(--text-color-highlight);
+}
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
+/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
+
+.text-primary { color: var(--context-primary); }
+.text-success { color: var(--context-success); }
+.text-info { color: var(--context-info); }
+.text-warning { color: var(--context-warning); }
+.text-error,
+.text-danger { color: var(--context-error); }
+
+/* primary */
+.panel-primary > .panel-heading,
+.bg-primary {
+ background-color: var(--context-primary);
+ border-color: var(--context-primary);
+ color:var(--color-white);
+}
+.panel-primary > .panel-heading a:link,
+.bg-primary a:link {
+ color:var(--color-black);
+}
+/* success */
+.panel-success > .panel-heading,
+.success,
+.bg-success {
+ background-color: var(--context-success);
+ border-color: var(--context-success);
+ color:var(--color-black);
+}
+.panel-success > .panel-heading a:link,
+.success a:link,
+.bg-success a:link {
+ text-decoration:underline;
+}
+/* info */
+.panel-info > .panel-heading,
+.info, .information,
+.bg-info {
+ background-color: var(--context-info);
+ border-color: var(--context-info);
+ color:var(--color-black);
+}
+.panel-info > .panel-heading a:link,
+.info a:link, .information a:link,
+.bg-info a:link {
+ text-decoration:underline;
+}
+/* warning */
+.panel-warning > .panel-heading,
+.alert-warning,
+.warning,
+.bg-warning {
+ background-color: var(--context-warning);
+ border-color: var(--context-warning);
+ color:var(--color-black);
+}
+.panel-warning > .panel-heading a:link,
+.alert-warning a:link,
+.warning a:link,
+.bg-warning a:link {
+ text-decoration:underline;
+}
+/* danger, error */
+.panel-danger > .panel-heading,
+.error,.danger,
+.bg-danger {
+ background-color: var(--context-error);
+ border-color: var(--context-error);
+ color:var(--color-black);
+}
+.panel-danger > .panel-heading a:link,
+.error a:link,.danger a:link,
+.bg-danger a:link {
+ text-decoration:underline;
+}
+
+span.label { color:var(--color-black); }
+
+pre {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+code,
+tt {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+a.list-group-item:hover,
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+ color:inherit;
+}
+
+.tree ul li::before,
+.tree ul li::after {
+ background: var(--border-color);
+}
+
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+}
+
+.hover {
+ background-color:var(--background-lighter);
+}
+
+a.slimbox-link:after,
+.slimbox-btn:before,
+a:visited,
+a:link { color:var(--link-color); }
+
+a.createpage {
+ color:var(--error-color);
+}
+
+.interwiki-raw::after,
+a.interwiki[href$="skin=raw"]::after,
+.interwiki-reader::after,
+a.interwiki[href$="skin=reader"]::after,
+.interwiki-edit::after,
+a.interwiki[href*="Edit.jsp?page="]::after,
+.interwiki-group::after,
+a.interwiki[href*="Group.jsp?group="]::after,
+a.interwiki[href^="rss.jsp"]::after {
+ background-color:var(--background-lighter);
+ color:var(--accent-color);
+}
+
+.editsection,
+.hashlink {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--link-color);
+}
+.editsection:hover,
+h2 .editsection:hover,
+h3 .editsection:hover,
+h4 .editsection:hover,
+h2 .hashlink:hover,
+h3 .hashlink:hover,
+h4 .hashlink:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--link-color);
+ opacity:1;
+}
+
+div.dropcaps > span.dropcaps {
+ color: var(--text-color-highlight);
+}
+blockquote,
+.dialog .quote-item {
+ border-color:var(--text-color-highlight);
+}
+.page-break {
+ border-color: var(--border-color);
+}
+
+
+/* --- grid.less --- */
+/* --- tables.less --- */
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.wikitable > thead > tr > th,
+.wikitable > tbody > tr > th,
+.wikitable > tfoot > tr > th,
+.wikitable > thead > tr > td,
+.wikitable > tbody > tr > td,
+.wikitable > tfoot > tr > td,
+.wikitable tr:first-child th {
+ border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered tr:first-child th,
+.table-bordered tr:first-child td {
+ border-color: var(--border-color);
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.table-hover > tbody > tr:nth-of-type(odd):hover,
+.table-hover > tbody > tr:nth-child(odd):hover > td,
+.table-hover > tbody > tr:nth-child(odd):hover > th,
+.table-hover > tbody > tr:hover {
+ background-color: var(--background-lighter);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) ,
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: var(--background-light);
+}
+[class*=zebra] .odd {
+ background-color: var(--background-light);
+}
+
+
+/* --- TableX.Sort.less --- */
+.sortable th:hover {
+ background-color: var(--background-lighter);;
+}
+.sortable th.up:after,
+.sortable th.up:hover:after {
+ border-bottom-color: var(--accent-color);
+ opacity:1;
+}
+.sortable th:hover:after,
+.sortable th.down:after,
+.sortable th.down:hover:after {
+ border-top-color: var(--accent-color);
+ opacity:1;
+}
+
+/* --- TableX.Filter.less --- */
+/* --- forms.less --- */
+/* --- modals.less --- */
+
+/* --- fontjspwiki/font-jspwiki.less --- */
+/* --- dropdown.less --- */
+
+/* --- pagination.less --- */
+/* --- Tips.less --- */
+.tip-link,
+.tip-link:hover {
+ color: var(--link-color);
+}
+/* --- Magnify.less --- */
+/* --- Viewer.less --- */
+/* --- Viewer.Slimbox.less --- */
+/* --- Viewer.Carousel.less --- */
+/* --- Template.View.less --- */
+html body .header, html body .footer {
+ background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
+ background-image: radial-gradient(circle, var(--background-light), var(--background) );
+ color:var(--text-color-normal);
+}
+a.logo { border-color: var(--border-color); }
+
+
+div.admin .formcontainer {
+ /*.default*/
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+.admin .formcontainer table {
+ border-color: var(--border-color);
+ /*
+ .table;
+ .table-bordered;
+ .table-striped;
+ */
+}
+.admin-user-form > div#userlist .list-group-item.new-user{
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+
+
+/* --- Template.UserBox.less --- */
+.login-form {
+ background-color: var(--background-dialog);
+ border:1px solid var(--border-color);
+}
+.login-form hr { border-color:var(--border-color); }
+
+
+/* --- Template.SearchBox.less --- */
+/* --- Template.Nav.less --- */
+.badge,
+.header > .navigation .nav > li > a > .badge {
+ background-color:var(--background-lighter);
+ color:var(--text-color-normal);
+}
+
+.header > .navigation .nav .btn-xs .badge {
+ background-color: var(--background-lighter);
+}
+
+/* --- Template.Content.less --- */
+body, .content {
+ background-color: var(--background);
+ color:var(--text-color-normal);
+ overflow-y: auto;
+}
+.content:after {
+ background: var(--background-sidebar);
+}
+/* --- Template.Attach.less --- */
+/* --- Template.Diff.less --- */
+.diffadd { background-color:var(--context-success); color:var(--color-black); }
+.diffrem { background:var(--context-error); color:var(--color-black); }
+
+/* --- Template.Search.less --- */
+
+form#searchform2 + div .fragment {
+ color: var(--text-color-richer);
+}
+form#searchform2 + div .gb-bar {
+ background-color: var(--context-warning);
+}
+
+/* --- Template.Workflow.less --- */
+/* --- Template.Edit.less --- */
+
+.editform input[type="text"]:focus,
+.dialog.find input[type="text"]:focus,
+.editform textarea:focus,
+.dialog.find textarea:focus {
+ background-color:var(--background-lighter);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+.ajaxpreview {
+ border-color:var(--border-color);
+}
+.edit-area ~ .ajaxpreview {
+ border-left-color:var(--border-color);
+}
+
+/* --- Dialog.less --- */
+.dialog {
+ background-color: var(--background-dialog);
+ border-color: var(--border-color);
+}
+.dialog .caption {
+ border-color: var(--border-color);
+ color: var(--text-color-normal);
+}
+.dialog.selection .body .item:hover {
+ background-color: var(--background-lighter);
+}
+.dialog.selection .body .divider {
+ background-color: var(--border-color);
+}
+
+.dialog.find [name=tbTEXTSEL] { /*same as selected text*/
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+
+
+/* --- Template.Preview.less --- */
+
+/* --- ImagePlugin.less --- */
+/* --- IndexPlugin.less --- */
+
+.index .header {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+}
+.index .header:hover {
+ background-color:var(--background-light);
+}
+.index .header a {
+ color:var(--text-color-richer);
+}
+.index .header a:hover {
+ background-color:var(--background-lighter);
+}
+.index > .section a {
+ color:var(--text-color-richer);
+}
+
+
+/* --- TOCPlugin.less --- */
+
+.toc ul li:hover {
+ background-color:var(--background-lighter);
+}
+
+/* --- WeblogPlugin.less --- */
+/* --- RecentChangesPlugin.less --- */
+
+.recentchanges .date {
+ border-color:var(--border-color);
+}
+/* --- CommentBox.less --- */
+
+
+/* --- GraphBar.less --- */
+.gb-group {
+ background-color:var(--background-light);
+ border:1px solid var(--border-color);
+}
+
+/* --- Tabs.less --- */
+/* --- Accordion.less --- */
+/* --- Columns.less --- */
+.columns.border,
+.columns.border > .col:not(:last-child) {
+ border-color:var(--border-color);
+}
+.columns.hover .col:hover {
+ background-color: var(--background-lighter);
+}
+
+
+/* --- Collapsible.less --- */
+.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
+.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
+
+.bullet.xpand { border-top-color: var(--text-color-normal); }
+.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
+
+/* --- Category.less --- */
+.category-link {
+ border-color:var(--border-color);
+}
+/* --- Flip.less --- */
+/* --- Invisibles.less --- */
+/* --- prettify.less --- */
+ .prettify pre, .prettify-nonum pre, pre.prettylines {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+ }
+ .pln { color: #cccccc; } /* plain text */
+ .str { color: #99cc99; } /* string content */
+ .kwd { color: #ffeea6; } /* keyword */
+ .com { color: #8a8a80; } /* comment */
+ .typ { color: #bbdaff; } /* type name */
+ .lit { color: #FCA369; } /* literal value */
+ .pun { color: #cda869; } /* punctuation */
+ .opn { color: #ffffff; } /* lisp open bracket */
+ .clo { color: #ffffff; } /* lisp close bracket */
+ .tag { color: #78AAD6; } /* markup tag name */
+ .atn { color: #ffc58f; } /* markup attribute name */
+ .atv { color: #FFD479; } /* markup attribute value */
+ .dec { color: #D6ACD6; } /* declaration */
+ .var { color: #76D4D6; } /* variable name */
+ .fun { color: #d6acd6; } /* function name */
+
+/* --- responsive-viewport.less --- */
+/* --- print.less --- */
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/black-n-gold/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/black-n-gold/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/black-n-gold/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/bootstrap/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/bootstrap/skin.css
new file mode 100644
index 0000000000..9c5e3e70e6
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/bootstrap/skin.css
@@ -0,0 +1,728 @@
+/*
+inspired by default Bootswatch theme, which is based on bootstrap itself
+from https://github.com/thomaspark/bootswatch/
+MIT Licensed
+*/
+html {
+ /* 1. Core Hue Shifts */
+ --hue: 211; /* Standard Bootstrap Blue Hue */
+ --accent-hue: 211;
+
+ /* 2. Text Colors */
+ --text-color-normal: #212529; /* Bootstrap Dark Gray/Black */
+ --text-color-light: #6c757d; /* Muted Text */
+ --text-color-richer: #000000;
+ --text-color-highlight: #0d6efd; /* Primary Blue */
+
+ /* 3. Links and Accents */
+ --link-color: #0d6efd; /* Bootstrap Primary Blue */
+ --accent-color: #0d6efd;
+ --error-color: #dc3545; /* Danger Red */
+
+ /* 4. Buttons */
+ --button-background: #0d6efd;
+ --button-text-color: #ffffff;
+ --button-active: #0b5ed7; /* Slightly darker blue for hover */
+ --button-active-darker: #0a58ca;
+
+ /* 5. Backgrounds */
+ --background: #ffffff; /* Pure White */
+ --background-sidebar: #f8f9fa; /* Very Light Gray (standard for sidebars) */
+ --background-light: #f8f9fa;
+ --background-lighter: #e9ecef;
+ --background-light-solid: #ffffff;
+
+ /* Navbar / PageName Specific Background */
+ --navbar-bg: #f8f9fa; /* Light Navbar theme */
+
+ --background-dropdown: #ffffff;
+ --background-dialog: #ffffff;
+
+ /* 6. Borders */
+ --border-color: #dee2e6; /* Standard Bootstrap subtle border */
+
+ /* 7. Contextual Colors (Bootstrap 5 Standards) */
+ --context-primary: #0d6efd;
+ --context-success: #198754;
+ --context-info: #0dcaf0;
+ --context-warning: #ffc107;
+ --context-error: #dc3545;
+
+ --color-black: #000000;
+ --color-white: #ffffff;
+
+ --wikiTriangleColor: var(--link-color);
+ /*--navbar-bg to #212529 */
+}
+
+
+::selection {
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+/* --- BOOTSTRAP --- */
+.titlebox {
+ background-color: var(--background-light);
+}
+.panel {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.panel-default .panel-heading {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:inherit;
+}
+
+.list-group-item {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+
+.nav-tabs {
+ border-color: var(--border-color);
+}
+.nav-tabs > li > a {
+ color:inherit;
+}
+.nav-tabs > li > a:hover {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:inherit;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active {
+ background:transparent;
+ color:var(--text-color-richer);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background);
+}
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+/*.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+
+}*/
+.nav > li > a:hover, .nav > li > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+.btn-default,
+.default {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn:hover, .btn:focus, .btn.focus,
+.btn-default:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn.disabled:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+}
+.btn-default:active,
+.btn-default:active:hover,
+.btn-default.active,
+.btn-default.active:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--accent-color);
+}
+
+.dropdown-menu {
+ background-color: var(--background-dropdown);
+ border-color: var(--border-color);
+}
+.dropdown-header {
+ color:var(--text-color-richer);
+}
+.dropdown-menu .divider {
+ background-color: var(--border-color);
+}
+.dropdown-menu > li > a {
+ color:var(--text-color-normal);
+}
+.dropdown-menu > li > a:hover {
+ background-color: var(--background-lighter);
+ color:inherit;
+}
+
+.form-control {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+}
+.form-control:focus {
+ border-color: var(--accent-color);
+}
+.form-control[disabled] {
+ background-color: transparent;
+ border-color: var(--border-color);
+}
+.form-frame {
+ border-color: var(--border-color);
+}
+
+label.form-switch > input[type=checkbox],
+input[type=checkbox].form-switch {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ background-color:var(--background-light);
+ border:1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:hover,
+input[type=checkbox].form-switch:hover {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ border: 1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:checked,
+input[type=checkbox].form-switch:checked {
+ box-shadow: inset 1.25em 0 0 1px var(--button-active);
+ border: 1px solid var(--button-active);
+}
+label.form-switch > input[type=checkbox]:checked:hover,
+input[type=checkbox].form-switch:checked:hover {
+ box-shadow:inset 1.25em 0 0 1px var(--button-active-darker);
+ border: 1px solid var(--button-active-darker);
+}
+label.form-switch > input[type=checkbox]:focus,
+input[type=checkbox].form-switch:focus {
+ background:none !important;
+}
+/*
+.form-group .btn.active {
+ color:var(--text-color-normal);
+ background-color:var(--context-info);
+}
+*/
+
+select,
+.form-group select {
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+
+ background-color: var(--background-light);
+ background-image:
+ linear-gradient(120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) ),
+ linear-gradient(-120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) );
+
+ background-position:
+ calc( var(--padding-base-horizontal) - 1px + var(--wikiTriangleSize)/2 ) calc(var(--padding-base-vertical)*2),
+ calc( var(--padding-base-horizontal) - var(--wikiTriangleSize)*3/2 ) calc(var(--padding-base-vertical)*2);
+
+
+}
+
+input[type=checkbox]:focus,
+select:focus,
+.form-group select:focus {
+ outline-color: var(--accent-color);
+}
+
+.modal {
+ background-color: var(--background-dropdown);
+ color:var(--text-color-normal);
+}
+
+/*pagination.less*/
+.pagination {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.pagination a {
+ color:var(--link-color);
+ text-decoration:none;
+}
+.pagination .cursor,
+.pagination a:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color: var(--accent-color);
+}
+
+/* --- JSPWiki --- */
+
+/* --- variables.less --- */
+
+/* --- type.less --- */
+
+hr,.hr {
+ border-color: var(--border-color);
+}
+
+mark, .highlight {
+ background-color: var(--accent-color) !important;
+ color:var(--text-color-highlight);
+}
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
+/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
+
+.text-primary { color: var(--context-primary); }
+.text-success { color: var(--context-success); }
+.text-info { color: var(--context-info); }
+.text-warning { color: var(--context-warning); }
+.text-error,
+.text-danger { color: var(--context-error); }
+
+/* primary */
+.panel-primary > .panel-heading,
+.bg-primary {
+ background-color: var(--context-primary);
+ border-color: var(--context-primary);
+ color:var(--color-white);
+}
+.panel-primary > .panel-heading a:link,
+.bg-primary a:link {
+ color:var(--color-black);
+}
+/* success */
+.panel-success > .panel-heading,
+.success,
+.bg-success {
+ background-color: var(--context-success);
+ border-color: var(--context-success);
+ color:var(--color-black);
+}
+.panel-success > .panel-heading a:link,
+.success a:link,
+.bg-success a:link {
+ text-decoration:underline;
+}
+/* info */
+.panel-info > .panel-heading,
+.info, .information,
+.bg-info {
+ background-color: var(--context-info);
+ border-color: var(--context-info);
+ color:var(--color-black);
+}
+.panel-info > .panel-heading a:link,
+.info a:link, .information a:link,
+.bg-info a:link {
+ text-decoration:underline;
+}
+/* warning */
+.panel-warning > .panel-heading,
+.alert-warning,
+.warning,
+.bg-warning {
+ background-color: var(--context-warning);
+ border-color: var(--context-warning);
+ color:var(--color-black);
+}
+.panel-warning > .panel-heading a:link,
+.alert-warning a:link,
+.warning a:link,
+.bg-warning a:link {
+ text-decoration:underline;
+}
+/* danger, error */
+.panel-danger > .panel-heading,
+.error,.danger,
+.bg-danger {
+ background-color: var(--context-error);
+ border-color: var(--context-error);
+ color:var(--color-black);
+}
+.panel-danger > .panel-heading a:link,
+.error a:link,.danger a:link,
+.bg-danger a:link {
+ text-decoration:underline;
+}
+
+span.label { color:var(--color-black); }
+
+pre {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+code,
+tt {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+a.list-group-item:hover,
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+ color:inherit;
+}
+
+.tree ul li::before,
+.tree ul li::after {
+ background: var(--border-color);
+}
+
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+}
+
+.hover {
+ background-color:var(--background-lighter);
+}
+
+a.slimbox-link:after,
+.slimbox-btn:before,
+a:visited,
+a:link { color:var(--link-color); }
+
+a.createpage {
+ color:var(--error-color);
+}
+
+.interwiki-raw::after,
+a.interwiki[href$="skin=raw"]::after,
+.interwiki-reader::after,
+a.interwiki[href$="skin=reader"]::after,
+.interwiki-edit::after,
+a.interwiki[href*="Edit.jsp?page="]::after,
+.interwiki-group::after,
+a.interwiki[href*="Group.jsp?group="]::after,
+a.interwiki[href^="rss.jsp"]::after {
+ background-color:var(--background-lighter);
+ color:var(--accent-color);
+}
+
+.editsection,
+.hashlink {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--link-color);
+}
+.editsection:hover,
+h2 .editsection:hover,
+h3 .editsection:hover,
+h4 .editsection:hover,
+h2 .hashlink:hover,
+h3 .hashlink:hover,
+h4 .hashlink:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--link-color);
+ opacity:1;
+}
+
+div.dropcaps > span.dropcaps {
+ color: var(--text-color-highlight);
+}
+blockquote,
+.dialog .quote-item {
+ border-color:var(--text-color-highlight);
+}
+.page-break {
+ border-color: var(--border-color);
+}
+
+
+/* --- grid.less --- */
+/* --- tables.less --- */
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.wikitable > thead > tr > th,
+.wikitable > tbody > tr > th,
+.wikitable > tfoot > tr > th,
+.wikitable > thead > tr > td,
+.wikitable > tbody > tr > td,
+.wikitable > tfoot > tr > td,
+.wikitable tr:first-child th {
+ border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered tr:first-child th,
+.table-bordered tr:first-child td {
+ border-color: var(--border-color);
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.table-hover > tbody > tr:nth-of-type(odd):hover,
+.table-hover > tbody > tr:nth-child(odd):hover > td,
+.table-hover > tbody > tr:nth-child(odd):hover > th,
+.table-hover > tbody > tr:hover {
+ background-color: var(--background-lighter);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) ,
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: var(--background-light);
+}
+[class*=zebra] .odd {
+ background-color: var(--background-light);
+}
+
+
+/* --- TableX.Sort.less --- */
+.sortable th:hover {
+ background-color: var(--background-lighter);;
+}
+.sortable th.up:after,
+.sortable th.up:hover:after {
+ border-bottom-color: var(--accent-color);
+ opacity:1;
+}
+.sortable th:hover:after,
+.sortable th.down:after,
+.sortable th.down:hover:after {
+ border-top-color: var(--accent-color);
+ opacity:1;
+}
+
+/* --- TableX.Filter.less --- */
+/* --- forms.less --- */
+/* --- modals.less --- */
+
+/* --- fontjspwiki/font-jspwiki.less --- */
+/* --- dropdown.less --- */
+
+/* --- pagination.less --- */
+/* --- Tips.less --- */
+.tip-link,
+.tip-link:hover {
+ color: var(--link-color);
+}
+/* --- Magnify.less --- */
+/* --- Viewer.less --- */
+/* --- Viewer.Slimbox.less --- */
+/* --- Viewer.Carousel.less --- */
+/* --- Template.View.less --- */
+html body .header, html body .footer {
+ background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
+ background-image: radial-gradient(circle, var(--background-light), var(--background) );
+ color:var(--text-color-normal);
+}
+a.logo { border-color: var(--border-color); }
+
+
+div.admin .formcontainer {
+ /*.default*/
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+.admin .formcontainer table {
+ border-color: var(--border-color);
+ /*
+ .table;
+ .table-bordered;
+ .table-striped;
+ */
+}
+.admin-user-form > div#userlist .list-group-item.new-user{
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+
+
+/* --- Template.UserBox.less --- */
+.login-form {
+ background-color: var(--background-dialog);
+ border:1px solid var(--border-color);
+}
+.login-form hr { border-color:var(--border-color); }
+
+
+/* --- Template.SearchBox.less --- */
+/* --- Template.Nav.less --- */
+.badge,
+.header > .navigation .nav > li > a > .badge {
+ background-color:var(--background-lighter);
+ color:var(--text-color-normal);
+}
+
+.header > .navigation .nav .btn-xs .badge {
+ background-color: var(--background-lighter);
+}
+
+/* --- Template.Content.less --- */
+body, .content {
+ background-color: var(--background);
+ color:var(--text-color-normal);
+ overflow-y: auto;
+}
+.content:after {
+ background: var(--background-sidebar);
+}
+/* --- Template.Attach.less --- */
+/* --- Template.Diff.less --- */
+.diffadd { background-color:var(--context-success); color:var(--color-black); }
+.diffrem { background:var(--context-error); color:var(--color-black); }
+
+/* --- Template.Search.less --- */
+
+form#searchform2 + div .fragment {
+ color: var(--text-color-richer);
+}
+form#searchform2 + div .gb-bar {
+ background-color: var(--context-warning);
+}
+
+/* --- Template.Workflow.less --- */
+/* --- Template.Edit.less --- */
+
+.editform input[type="text"]:focus,
+.dialog.find input[type="text"]:focus,
+.editform textarea:focus,
+.dialog.find textarea:focus {
+ background-color:var(--background-lighter);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+.ajaxpreview {
+ border-color:var(--border-color);
+}
+.edit-area ~ .ajaxpreview {
+ border-left-color:var(--border-color);
+}
+
+/* --- Dialog.less --- */
+.dialog {
+ background-color: var(--background-dialog);
+ border-color: var(--border-color);
+}
+.dialog .caption {
+ border-color: var(--border-color);
+ color: var(--text-color-normal);
+}
+.dialog.selection .body .item:hover {
+ background-color: var(--background-lighter);
+}
+.dialog.selection .body .divider {
+ background-color: var(--border-color);
+}
+
+.dialog.find [name=tbTEXTSEL] { /*same as selected text*/
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+
+
+/* --- Template.Preview.less --- */
+
+/* --- ImagePlugin.less --- */
+/* --- IndexPlugin.less --- */
+
+.index .header {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+}
+.index .header:hover {
+ background-color:var(--background-light);
+}
+.index .header a {
+ color:var(--text-color-richer);
+}
+.index .header a:hover {
+ background-color:var(--background-lighter);
+}
+.index > .section a {
+ color:var(--text-color-richer);
+}
+
+
+/* --- TOCPlugin.less --- */
+
+.toc ul li:hover {
+ background-color:var(--background-lighter);
+}
+
+/* --- WeblogPlugin.less --- */
+/* --- RecentChangesPlugin.less --- */
+
+.recentchanges .date {
+ border-color:var(--border-color);
+}
+/* --- CommentBox.less --- */
+
+
+/* --- GraphBar.less --- */
+.gb-group {
+ background-color:var(--background-light);
+ border:1px solid var(--border-color);
+}
+
+/* --- Tabs.less --- */
+/* --- Accordion.less --- */
+/* --- Columns.less --- */
+.columns.border,
+.columns.border > .col:not(:last-child) {
+ border-color:var(--border-color);
+}
+.columns.hover .col:hover {
+ background-color: var(--background-lighter);
+}
+
+
+/* --- Collapsible.less --- */
+.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
+.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
+
+.bullet.xpand { border-top-color: var(--text-color-normal); }
+.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
+
+/* --- Category.less --- */
+.category-link {
+ border-color:var(--border-color);
+}
+/* --- Flip.less --- */
+/* --- Invisibles.less --- */
+/* --- prettify.less --- */
+ .prettify pre, .prettify-nonum pre, pre.prettylines {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+ }
+ .pln { color: #cccccc; } /* plain text */
+ .str { color: #99cc99; } /* string content */
+ .kwd { color: #ffeea6; } /* keyword */
+ .com { color: #8a8a80; } /* comment */
+ .typ { color: #bbdaff; } /* type name */
+ .lit { color: #FCA369; } /* literal value */
+ .pun { color: #cda869; } /* punctuation */
+ .opn { color: #ffffff; } /* lisp open bracket */
+ .clo { color: #ffffff; } /* lisp close bracket */
+ .tag { color: #78AAD6; } /* markup tag name */
+ .atn { color: #ffc58f; } /* markup attribute name */
+ .atv { color: #FFD479; } /* markup attribute value */
+ .dec { color: #D6ACD6; } /* declaration */
+ .var { color: #76D4D6; } /* variable name */
+ .fun { color: #d6acd6; } /* function name */
+
+/* --- responsive-viewport.less --- */
+/* --- print.less --- */
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/bootstrap/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/bootstrap/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/bootstrap/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/cyborg/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/cyborg/skin.css
new file mode 100644
index 0000000000..0ffc70c991
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/cyborg/skin.css
@@ -0,0 +1,728 @@
+/*
+inspired by Bootswatch theme of the same name
+from https://github.com/thomaspark/bootswatch/
+MIT Licensed
+*/
+
+html {
+ /* 1. Core Hue Shifts */
+ --hue: 200; /* Shifted toward Electric Blue */
+ --accent-hue: 200;
+
+ /* 2. Text Colors */
+ --text-color-normal: #eeeeee; /* Off-white for high contrast */
+ --text-color-light: #999999; /* Muted gray */
+ --text-color-richer: #ffffff;
+ --text-color-highlight: #2a9fd6; /* Cyborg Electric Blue */
+
+ /* 3. Links and Accents */
+ --link-color: #2a9fd6; /* Electric Blue */
+ --accent-color: #2a9fd6;
+ --error-color: #cc0000; /* Deeper Red for Cyborg */
+
+ /* 4. Buttons */
+ --button-background: #2a9fd6;
+ --button-text-color: #ffffff;
+ --button-active: #2180ac; /* Darker blue for hover state */
+ --button-active-darker: #196081;
+
+ /* 5. Backgrounds */
+ --background: #060606; /* Jet Black */
+ --background-sidebar: #151515; /* Near Black for subtle depth */
+ --background-light: #222222;
+ --background-lighter: #282828;
+ --background-light-solid: #151515;
+
+ /* Navbar / PageName Specific Background */
+ --navbar-bg: #222222; /* Slightly lighter than body for visibility */
+
+ --background-dropdown: #222222;
+ --background-dialog: #060606;
+
+ /* 6. Borders */
+ --border-color: #282828; /* Very dark gray borders */
+
+ /* 7. Contextual Colors (Cyborg Standards) */
+ --context-primary: #2a9fd6;
+ --context-success: #77b300; /* Cyborg's specific neon-lime success */
+ --context-info: #9933cc; /* Purple used in Cyborg for Info */
+ --context-warning: #ff8800; /* Bright Orange */
+ --context-error: #cc0000;
+
+ --color-black: #000000;
+ --color-white: #ffffff;
+
+ --wikiTriangleColor: var(--link-color);
+}
+
+
+::selection {
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+/* --- BOOTSTRAP --- */
+.titlebox {
+ background-color: var(--background-light);
+}
+.panel {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.panel-default .panel-heading {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:inherit;
+}
+
+.list-group-item {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+
+.nav-tabs {
+ border-color: var(--border-color);
+}
+.nav-tabs > li > a {
+ color:inherit;
+}
+.nav-tabs > li > a:hover {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:inherit;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active {
+ background:transparent;
+ color:var(--text-color-richer);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background);
+}
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+/*.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+
+}*/
+.nav > li > a:hover, .nav > li > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+.btn-default,
+.default {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn:hover, .btn:focus, .btn.focus,
+.btn-default:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn.disabled:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+}
+.btn-default:active,
+.btn-default:active:hover,
+.btn-default.active,
+.btn-default.active:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--accent-color);
+}
+
+.dropdown-menu {
+ background-color: var(--background-dropdown);
+ border-color: var(--border-color);
+}
+.dropdown-header {
+ color:var(--text-color-richer);
+}
+.dropdown-menu .divider {
+ background-color: var(--border-color);
+}
+.dropdown-menu > li > a {
+ color:var(--text-color-normal);
+}
+.dropdown-menu > li > a:hover {
+ background-color: var(--background-lighter);
+ color:inherit;
+}
+
+.form-control {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+}
+.form-control:focus {
+ border-color: var(--accent-color);
+}
+.form-control[disabled] {
+ background-color: transparent;
+ border-color: var(--border-color);
+}
+.form-frame {
+ border-color: var(--border-color);
+}
+
+label.form-switch > input[type=checkbox],
+input[type=checkbox].form-switch {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ background-color:var(--background-light);
+ border:1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:hover,
+input[type=checkbox].form-switch:hover {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ border: 1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:checked,
+input[type=checkbox].form-switch:checked {
+ box-shadow: inset 1.25em 0 0 1px var(--button-active);
+ border: 1px solid var(--button-active);
+}
+label.form-switch > input[type=checkbox]:checked:hover,
+input[type=checkbox].form-switch:checked:hover {
+ box-shadow:inset 1.25em 0 0 1px var(--button-active-darker);
+ border: 1px solid var(--button-active-darker);
+}
+label.form-switch > input[type=checkbox]:focus,
+input[type=checkbox].form-switch:focus {
+ background:none !important;
+}
+/*
+.form-group .btn.active {
+ color:var(--text-color-normal);
+ background-color:var(--context-info);
+}
+*/
+
+select,
+.form-group select {
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+
+ background-color: var(--background-light);
+ background-image:
+ linear-gradient(120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) ),
+ linear-gradient(-120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) );
+
+ background-position:
+ calc( var(--padding-base-horizontal) - 1px + var(--wikiTriangleSize)/2 ) calc(var(--padding-base-vertical)*2),
+ calc( var(--padding-base-horizontal) - var(--wikiTriangleSize)*3/2 ) calc(var(--padding-base-vertical)*2);
+
+
+}
+
+input[type=checkbox]:focus,
+select:focus,
+.form-group select:focus {
+ outline-color: var(--accent-color);
+}
+
+.modal {
+ background-color: var(--background-dropdown);
+ color:var(--text-color-normal);
+}
+
+/*pagination.less*/
+.pagination {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.pagination a {
+ color:var(--link-color);
+ text-decoration:none;
+}
+.pagination .cursor,
+.pagination a:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color: var(--accent-color);
+}
+
+/* --- JSPWiki --- */
+
+/* --- variables.less --- */
+
+/* --- type.less --- */
+
+hr,.hr {
+ border-color: var(--border-color);
+}
+
+mark, .highlight {
+ background-color: var(--accent-color) !important;
+ color:var(--text-color-highlight);
+}
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
+/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
+
+.text-primary { color: var(--context-primary); }
+.text-success { color: var(--context-success); }
+.text-info { color: var(--context-info); }
+.text-warning { color: var(--context-warning); }
+.text-error,
+.text-danger { color: var(--context-error); }
+
+/* primary */
+.panel-primary > .panel-heading,
+.bg-primary {
+ background-color: var(--context-primary);
+ border-color: var(--context-primary);
+ color:var(--color-white);
+}
+.panel-primary > .panel-heading a:link,
+.bg-primary a:link {
+ color:var(--color-black);
+}
+/* success */
+.panel-success > .panel-heading,
+.success,
+.bg-success {
+ background-color: var(--context-success);
+ border-color: var(--context-success);
+ color:var(--color-black);
+}
+.panel-success > .panel-heading a:link,
+.success a:link,
+.bg-success a:link {
+ text-decoration:underline;
+}
+/* info */
+.panel-info > .panel-heading,
+.info, .information,
+.bg-info {
+ background-color: var(--context-info);
+ border-color: var(--context-info);
+ color:var(--color-black);
+}
+.panel-info > .panel-heading a:link,
+.info a:link, .information a:link,
+.bg-info a:link {
+ text-decoration:underline;
+}
+/* warning */
+.panel-warning > .panel-heading,
+.alert-warning,
+.warning,
+.bg-warning {
+ background-color: var(--context-warning);
+ border-color: var(--context-warning);
+ color:var(--color-black);
+}
+.panel-warning > .panel-heading a:link,
+.alert-warning a:link,
+.warning a:link,
+.bg-warning a:link {
+ text-decoration:underline;
+}
+/* danger, error */
+.panel-danger > .panel-heading,
+.error,.danger,
+.bg-danger {
+ background-color: var(--context-error);
+ border-color: var(--context-error);
+ color:var(--color-black);
+}
+.panel-danger > .panel-heading a:link,
+.error a:link,.danger a:link,
+.bg-danger a:link {
+ text-decoration:underline;
+}
+
+span.label { color:var(--color-black); }
+
+pre {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+code,
+tt {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+a.list-group-item:hover,
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+ color:inherit;
+}
+
+.tree ul li::before,
+.tree ul li::after {
+ background: var(--border-color);
+}
+
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+}
+
+.hover {
+ background-color:var(--background-lighter);
+}
+
+a.slimbox-link:after,
+.slimbox-btn:before,
+a:visited,
+a:link { color:var(--link-color); }
+
+a.createpage {
+ color:var(--error-color);
+}
+
+.interwiki-raw::after,
+a.interwiki[href$="skin=raw"]::after,
+.interwiki-reader::after,
+a.interwiki[href$="skin=reader"]::after,
+.interwiki-edit::after,
+a.interwiki[href*="Edit.jsp?page="]::after,
+.interwiki-group::after,
+a.interwiki[href*="Group.jsp?group="]::after,
+a.interwiki[href^="rss.jsp"]::after {
+ background-color:var(--background-lighter);
+ color:var(--accent-color);
+}
+
+.editsection,
+.hashlink {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--link-color);
+}
+.editsection:hover,
+h2 .editsection:hover,
+h3 .editsection:hover,
+h4 .editsection:hover,
+h2 .hashlink:hover,
+h3 .hashlink:hover,
+h4 .hashlink:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--link-color);
+ opacity:1;
+}
+
+div.dropcaps > span.dropcaps {
+ color: var(--text-color-highlight);
+}
+blockquote,
+.dialog .quote-item {
+ border-color:var(--text-color-highlight);
+}
+.page-break {
+ border-color: var(--border-color);
+}
+
+
+/* --- grid.less --- */
+/* --- tables.less --- */
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.wikitable > thead > tr > th,
+.wikitable > tbody > tr > th,
+.wikitable > tfoot > tr > th,
+.wikitable > thead > tr > td,
+.wikitable > tbody > tr > td,
+.wikitable > tfoot > tr > td,
+.wikitable tr:first-child th {
+ border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered tr:first-child th,
+.table-bordered tr:first-child td {
+ border-color: var(--border-color);
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.table-hover > tbody > tr:nth-of-type(odd):hover,
+.table-hover > tbody > tr:nth-child(odd):hover > td,
+.table-hover > tbody > tr:nth-child(odd):hover > th,
+.table-hover > tbody > tr:hover {
+ background-color: var(--background-lighter);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) ,
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: var(--background-light);
+}
+[class*=zebra] .odd {
+ background-color: var(--background-light);
+}
+
+
+/* --- TableX.Sort.less --- */
+.sortable th:hover {
+ background-color: var(--background-lighter);;
+}
+.sortable th.up:after,
+.sortable th.up:hover:after {
+ border-bottom-color: var(--accent-color);
+ opacity:1;
+}
+.sortable th:hover:after,
+.sortable th.down:after,
+.sortable th.down:hover:after {
+ border-top-color: var(--accent-color);
+ opacity:1;
+}
+
+/* --- TableX.Filter.less --- */
+/* --- forms.less --- */
+/* --- modals.less --- */
+
+/* --- fontjspwiki/font-jspwiki.less --- */
+/* --- dropdown.less --- */
+
+/* --- pagination.less --- */
+/* --- Tips.less --- */
+.tip-link,
+.tip-link:hover {
+ color: var(--link-color);
+}
+/* --- Magnify.less --- */
+/* --- Viewer.less --- */
+/* --- Viewer.Slimbox.less --- */
+/* --- Viewer.Carousel.less --- */
+/* --- Template.View.less --- */
+html body .header, html body .footer {
+ background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
+ background-image: radial-gradient(circle, var(--background-light), var(--background) );
+ color:var(--text-color-normal);
+}
+a.logo { border-color: var(--border-color); }
+
+
+div.admin .formcontainer {
+ /*.default*/
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+.admin .formcontainer table {
+ border-color: var(--border-color);
+ /*
+ .table;
+ .table-bordered;
+ .table-striped;
+ */
+}
+.admin-user-form > div#userlist .list-group-item.new-user{
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+
+
+/* --- Template.UserBox.less --- */
+.login-form {
+ background-color: var(--background-dialog);
+ border:1px solid var(--border-color);
+}
+.login-form hr { border-color:var(--border-color); }
+
+
+/* --- Template.SearchBox.less --- */
+/* --- Template.Nav.less --- */
+.badge,
+.header > .navigation .nav > li > a > .badge {
+ background-color:var(--background-lighter);
+ color:var(--text-color-normal);
+}
+
+.header > .navigation .nav .btn-xs .badge {
+ background-color: var(--background-lighter);
+}
+
+/* --- Template.Content.less --- */
+body, .content {
+ background-color: var(--background);
+ color:var(--text-color-normal);
+ overflow-y: auto;
+}
+.content:after {
+ background: var(--background-sidebar);
+}
+/* --- Template.Attach.less --- */
+/* --- Template.Diff.less --- */
+.diffadd { background-color:var(--context-success); color:var(--color-black); }
+.diffrem { background:var(--context-error); color:var(--color-black); }
+
+/* --- Template.Search.less --- */
+
+form#searchform2 + div .fragment {
+ color: var(--text-color-richer);
+}
+form#searchform2 + div .gb-bar {
+ background-color: var(--context-warning);
+}
+
+/* --- Template.Workflow.less --- */
+/* --- Template.Edit.less --- */
+
+.editform input[type="text"]:focus,
+.dialog.find input[type="text"]:focus,
+.editform textarea:focus,
+.dialog.find textarea:focus {
+ background-color:var(--background-lighter);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+.ajaxpreview {
+ border-color:var(--border-color);
+}
+.edit-area ~ .ajaxpreview {
+ border-left-color:var(--border-color);
+}
+
+/* --- Dialog.less --- */
+.dialog {
+ background-color: var(--background-dialog);
+ border-color: var(--border-color);
+}
+.dialog .caption {
+ border-color: var(--border-color);
+ color: var(--text-color-normal);
+}
+.dialog.selection .body .item:hover {
+ background-color: var(--background-lighter);
+}
+.dialog.selection .body .divider {
+ background-color: var(--border-color);
+}
+
+.dialog.find [name=tbTEXTSEL] { /*same as selected text*/
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+
+
+/* --- Template.Preview.less --- */
+
+/* --- ImagePlugin.less --- */
+/* --- IndexPlugin.less --- */
+
+.index .header {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+}
+.index .header:hover {
+ background-color:var(--background-light);
+}
+.index .header a {
+ color:var(--text-color-richer);
+}
+.index .header a:hover {
+ background-color:var(--background-lighter);
+}
+.index > .section a {
+ color:var(--text-color-richer);
+}
+
+
+/* --- TOCPlugin.less --- */
+
+.toc ul li:hover {
+ background-color:var(--background-lighter);
+}
+
+/* --- WeblogPlugin.less --- */
+/* --- RecentChangesPlugin.less --- */
+
+.recentchanges .date {
+ border-color:var(--border-color);
+}
+/* --- CommentBox.less --- */
+
+
+/* --- GraphBar.less --- */
+.gb-group {
+ background-color:var(--background-light);
+ border:1px solid var(--border-color);
+}
+
+/* --- Tabs.less --- */
+/* --- Accordion.less --- */
+/* --- Columns.less --- */
+.columns.border,
+.columns.border > .col:not(:last-child) {
+ border-color:var(--border-color);
+}
+.columns.hover .col:hover {
+ background-color: var(--background-lighter);
+}
+
+
+/* --- Collapsible.less --- */
+.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
+.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
+
+.bullet.xpand { border-top-color: var(--text-color-normal); }
+.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
+
+/* --- Category.less --- */
+.category-link {
+ border-color:var(--border-color);
+}
+/* --- Flip.less --- */
+/* --- Invisibles.less --- */
+/* --- prettify.less --- */
+ .prettify pre, .prettify-nonum pre, pre.prettylines {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+ }
+ .pln { color: #cccccc; } /* plain text */
+ .str { color: #99cc99; } /* string content */
+ .kwd { color: #ffeea6; } /* keyword */
+ .com { color: #8a8a80; } /* comment */
+ .typ { color: #bbdaff; } /* type name */
+ .lit { color: #FCA369; } /* literal value */
+ .pun { color: #cda869; } /* punctuation */
+ .opn { color: #ffffff; } /* lisp open bracket */
+ .clo { color: #ffffff; } /* lisp close bracket */
+ .tag { color: #78AAD6; } /* markup tag name */
+ .atn { color: #ffc58f; } /* markup attribute name */
+ .atv { color: #FFD479; } /* markup attribute value */
+ .dec { color: #D6ACD6; } /* declaration */
+ .var { color: #76D4D6; } /* variable name */
+ .fun { color: #d6acd6; } /* function name */
+
+/* --- responsive-viewport.less --- */
+/* --- print.less --- */
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/cyborg/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/cyborg/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/cyborg/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
diff --git a/jspwiki-war/src/main/styles/static/templates/default/haddock-dark.css b/jspwiki-war/src/main/webapp/templates/default/skins/dark/skin.css
similarity index 99%
rename from jspwiki-war/src/main/styles/static/templates/default/haddock-dark.css
rename to jspwiki-war/src/main/webapp/templates/default/skins/dark/skin.css
index 528e6a6773..28125ec8d0 100644
--- a/jspwiki-war/src/main/styles/static/templates/default/haddock-dark.css
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/dark/skin.css
@@ -82,7 +82,9 @@ html {
}
/* --- BOOTSTRAP --- */
-
+.titlebox {
+ background-color: var(--background-light);
+}
.panel {
background-color: var(--background-light);
border-color: var(--border-color);
@@ -285,7 +287,7 @@ mark, .highlight {
color:var(--text-color-highlight);
}
-span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal;); }
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
.text-primary { color: var(--context-primary); }
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/dark/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/dark/skin.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/darkly/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/darkly/skin.css
new file mode 100644
index 0000000000..9572890f42
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/darkly/skin.css
@@ -0,0 +1,728 @@
+/*
+inspired by Bootswatch theme of the same name
+from https://github.com/thomaspark/bootswatch/
+MIT Licensed
+*/
+
+html {
+ /* 1. Core Hue Shifts */
+ --hue: 209;
+ --accent-hue: 165; /* Shifted toward Teal/Green */
+
+ /* 2. Text Colors */
+ --text-color-normal: #ebebeb;
+ --text-color-light: #999999;
+ --text-color-richer: #ffffff;
+ --text-color-highlight: #00bc8c; /* Changed to Darkly Green */
+
+ /* 3. Links and Accents - THE GREEN FIX */
+ --link-color: #00bc8c; /* Darkly Success Green */
+ --accent-color: #00bc8c;
+ --error-color: #000000;
+
+ /* 4. Buttons */
+ --button-background: #375a7f; /* Primary Blue for buttons */
+ --button-text-color: #ffffff;
+ --button-active: #00bc8c; /* Green for active/hover */
+ --button-active-darker: #008f6a;
+
+ /* 5. Backgrounds */
+ --background: #222222;
+ --background-sidebar: #303030;
+ --background-light: #303030;
+ --background-lighter: #444444;
+ --background-light-solid: #303030;
+
+ /* Navbar / PageName Specific Background */
+ --navbar-bg: #375a7f; /* Darkly's Navbar Blue */
+
+ --background-dropdown: #303030;
+ --background-dialog: #222222;
+
+ /* 6. Borders */
+ --border-color: #444444;
+
+ /* 7. Contextual Colors */
+ --context-primary: #375a7f;
+ --context-success: #00bc8c;
+ --context-info: #3498db;
+ --context-warning: #f39c12;
+ --context-error: #e74c3c;
+
+ --color-black: #000000;
+ --color-white: #ffffff;
+
+ --wikiTriangleColor: var(--link-color);
+}
+
+
+::selection {
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+/* --- BOOTSTRAP --- */
+.titlebox {
+ background-color: var(--background-light);
+}
+.panel {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.panel-default .panel-heading {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:inherit;
+}
+
+.list-group-item {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+
+.nav-tabs {
+ border-color: var(--border-color);
+}
+.nav-tabs > li > a {
+ color:inherit;
+}
+.nav-tabs > li > a:hover {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:inherit;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active {
+ background:transparent;
+ color:var(--text-color-richer);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background);
+}
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+/*.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+
+}*/
+.nav > li > a:hover, .nav > li > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+.btn-default,
+.default {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn:hover, .btn:focus, .btn.focus,
+.btn-default:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn.disabled:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+}
+.btn-default:active,
+.btn-default:active:hover,
+.btn-default.active,
+.btn-default.active:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--accent-color);
+}
+
+.dropdown-menu {
+ background-color: var(--background-dropdown);
+ border-color: var(--border-color);
+}
+.dropdown-header {
+ color:var(--text-color-richer);
+}
+.dropdown-menu .divider {
+ background-color: var(--border-color);
+}
+.dropdown-menu > li > a {
+ color:var(--text-color-normal);
+}
+.dropdown-menu > li > a:hover {
+ background-color: var(--background-lighter);
+ color:inherit;
+}
+
+.form-control {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+}
+.form-control:focus {
+ border-color: var(--accent-color);
+}
+.form-control[disabled] {
+ background-color: transparent;
+ border-color: var(--border-color);
+}
+.form-frame {
+ border-color: var(--border-color);
+}
+
+label.form-switch > input[type=checkbox],
+input[type=checkbox].form-switch {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ background-color:var(--background-light);
+ border:1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:hover,
+input[type=checkbox].form-switch:hover {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ border: 1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:checked,
+input[type=checkbox].form-switch:checked {
+ box-shadow: inset 1.25em 0 0 1px var(--button-active);
+ border: 1px solid var(--button-active);
+}
+label.form-switch > input[type=checkbox]:checked:hover,
+input[type=checkbox].form-switch:checked:hover {
+ box-shadow:inset 1.25em 0 0 1px var(--button-active-darker);
+ border: 1px solid var(--button-active-darker);
+}
+label.form-switch > input[type=checkbox]:focus,
+input[type=checkbox].form-switch:focus {
+ background:none !important;
+}
+/*
+.form-group .btn.active {
+ color:var(--text-color-normal);
+ background-color:var(--context-info);
+}
+*/
+
+select,
+.form-group select {
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+
+ background-color: var(--background-light);
+ background-image:
+ linear-gradient(120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) ),
+ linear-gradient(-120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) );
+
+ background-position:
+ calc( var(--padding-base-horizontal) - 1px + var(--wikiTriangleSize)/2 ) calc(var(--padding-base-vertical)*2),
+ calc( var(--padding-base-horizontal) - var(--wikiTriangleSize)*3/2 ) calc(var(--padding-base-vertical)*2);
+
+
+}
+
+input[type=checkbox]:focus,
+select:focus,
+.form-group select:focus {
+ outline-color: var(--accent-color);
+}
+
+.modal {
+ background-color: var(--background-dropdown);
+ color:var(--text-color-normal);
+}
+
+/*pagination.less*/
+.pagination {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.pagination a {
+ color:var(--link-color);
+ text-decoration:none;
+}
+.pagination .cursor,
+.pagination a:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color: var(--accent-color);
+}
+
+/* --- JSPWiki --- */
+
+/* --- variables.less --- */
+
+/* --- type.less --- */
+
+hr,.hr {
+ border-color: var(--border-color);
+}
+
+mark, .highlight {
+ background-color: var(--accent-color) !important;
+ color:var(--text-color-highlight);
+}
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
+/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
+
+.text-primary { color: var(--context-primary); }
+.text-success { color: var(--context-success); }
+.text-info { color: var(--context-info); }
+.text-warning { color: var(--context-warning); }
+.text-error,
+.text-danger { color: var(--context-error); }
+
+/* primary */
+.panel-primary > .panel-heading,
+.bg-primary {
+ background-color: var(--context-primary);
+ border-color: var(--context-primary);
+ color:var(--color-white);
+}
+.panel-primary > .panel-heading a:link,
+.bg-primary a:link {
+ color:var(--color-black);
+}
+/* success */
+.panel-success > .panel-heading,
+.success,
+.bg-success {
+ background-color: var(--context-success);
+ border-color: var(--context-success);
+ color:var(--color-black);
+}
+.panel-success > .panel-heading a:link,
+.success a:link,
+.bg-success a:link {
+ text-decoration:underline;
+}
+/* info */
+.panel-info > .panel-heading,
+.info, .information,
+.bg-info {
+ background-color: var(--context-info);
+ border-color: var(--context-info);
+ color:var(--color-black);
+}
+.panel-info > .panel-heading a:link,
+.info a:link, .information a:link,
+.bg-info a:link {
+ text-decoration:underline;
+}
+/* warning */
+.panel-warning > .panel-heading,
+.alert-warning,
+.warning,
+.bg-warning {
+ background-color: var(--context-warning);
+ border-color: var(--context-warning);
+ color:var(--color-black);
+}
+.panel-warning > .panel-heading a:link,
+.alert-warning a:link,
+.warning a:link,
+.bg-warning a:link {
+ text-decoration:underline;
+}
+/* danger, error */
+.panel-danger > .panel-heading,
+.error,.danger,
+.bg-danger {
+ background-color: var(--context-error);
+ border-color: var(--context-error);
+ color:var(--color-black);
+}
+.panel-danger > .panel-heading a:link,
+.error a:link,.danger a:link,
+.bg-danger a:link {
+ text-decoration:underline;
+}
+
+span.label { color:var(--color-black); }
+
+pre {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+code,
+tt {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+a.list-group-item:hover,
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+ color:inherit;
+}
+
+.tree ul li::before,
+.tree ul li::after {
+ background: var(--border-color);
+}
+
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+}
+
+.hover {
+ background-color:var(--background-lighter);
+}
+
+a.slimbox-link:after,
+.slimbox-btn:before,
+a:visited,
+a:link { color:var(--link-color); }
+
+a.createpage {
+ color:var(--error-color);
+}
+
+.interwiki-raw::after,
+a.interwiki[href$="skin=raw"]::after,
+.interwiki-reader::after,
+a.interwiki[href$="skin=reader"]::after,
+.interwiki-edit::after,
+a.interwiki[href*="Edit.jsp?page="]::after,
+.interwiki-group::after,
+a.interwiki[href*="Group.jsp?group="]::after,
+a.interwiki[href^="rss.jsp"]::after {
+ background-color:var(--background-lighter);
+ color:var(--accent-color);
+}
+
+.editsection,
+.hashlink {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--link-color);
+}
+.editsection:hover,
+h2 .editsection:hover,
+h3 .editsection:hover,
+h4 .editsection:hover,
+h2 .hashlink:hover,
+h3 .hashlink:hover,
+h4 .hashlink:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--link-color);
+ opacity:1;
+}
+
+div.dropcaps > span.dropcaps {
+ color: var(--text-color-highlight);
+}
+blockquote,
+.dialog .quote-item {
+ border-color:var(--text-color-highlight);
+}
+.page-break {
+ border-color: var(--border-color);
+}
+
+
+/* --- grid.less --- */
+/* --- tables.less --- */
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.wikitable > thead > tr > th,
+.wikitable > tbody > tr > th,
+.wikitable > tfoot > tr > th,
+.wikitable > thead > tr > td,
+.wikitable > tbody > tr > td,
+.wikitable > tfoot > tr > td,
+.wikitable tr:first-child th {
+ border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered tr:first-child th,
+.table-bordered tr:first-child td {
+ border-color: var(--border-color);
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.table-hover > tbody > tr:nth-of-type(odd):hover,
+.table-hover > tbody > tr:nth-child(odd):hover > td,
+.table-hover > tbody > tr:nth-child(odd):hover > th,
+.table-hover > tbody > tr:hover {
+ background-color: var(--background-lighter);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) ,
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: var(--background-light);
+}
+[class*=zebra] .odd {
+ background-color: var(--background-light);
+}
+
+
+/* --- TableX.Sort.less --- */
+.sortable th:hover {
+ background-color: var(--background-lighter);;
+}
+.sortable th.up:after,
+.sortable th.up:hover:after {
+ border-bottom-color: var(--accent-color);
+ opacity:1;
+}
+.sortable th:hover:after,
+.sortable th.down:after,
+.sortable th.down:hover:after {
+ border-top-color: var(--accent-color);
+ opacity:1;
+}
+
+/* --- TableX.Filter.less --- */
+/* --- forms.less --- */
+/* --- modals.less --- */
+
+/* --- fontjspwiki/font-jspwiki.less --- */
+/* --- dropdown.less --- */
+
+/* --- pagination.less --- */
+/* --- Tips.less --- */
+.tip-link,
+.tip-link:hover {
+ color: var(--link-color);
+}
+/* --- Magnify.less --- */
+/* --- Viewer.less --- */
+/* --- Viewer.Slimbox.less --- */
+/* --- Viewer.Carousel.less --- */
+/* --- Template.View.less --- */
+html body .header, html body .footer {
+ background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
+ background-image: radial-gradient(circle, var(--background-light), var(--background) );
+ color:var(--text-color-normal);
+}
+a.logo { border-color: var(--border-color); }
+
+
+div.admin .formcontainer {
+ /*.default*/
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+.admin .formcontainer table {
+ border-color: var(--border-color);
+ /*
+ .table;
+ .table-bordered;
+ .table-striped;
+ */
+}
+.admin-user-form > div#userlist .list-group-item.new-user{
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+
+
+/* --- Template.UserBox.less --- */
+.login-form {
+ background-color: var(--background-dialog);
+ border:1px solid var(--border-color);
+}
+.login-form hr { border-color:var(--border-color); }
+
+
+/* --- Template.SearchBox.less --- */
+/* --- Template.Nav.less --- */
+.badge,
+.header > .navigation .nav > li > a > .badge {
+ background-color:var(--background-lighter);
+ color:var(--text-color-normal);
+}
+
+.header > .navigation .nav .btn-xs .badge {
+ background-color: var(--background-lighter);
+}
+
+/* --- Template.Content.less --- */
+body, .content {
+ background-color: var(--background);
+ color:var(--text-color-normal);
+ overflow-y: auto;
+}
+.content:after {
+ background: var(--background-sidebar);
+}
+/* --- Template.Attach.less --- */
+/* --- Template.Diff.less --- */
+.diffadd { background-color:var(--context-success); color:var(--color-black); }
+.diffrem { background:var(--context-error); color:var(--color-black); }
+
+/* --- Template.Search.less --- */
+
+form#searchform2 + div .fragment {
+ color: var(--text-color-richer);
+}
+form#searchform2 + div .gb-bar {
+ background-color: var(--context-warning);
+}
+
+/* --- Template.Workflow.less --- */
+/* --- Template.Edit.less --- */
+
+.editform input[type="text"]:focus,
+.dialog.find input[type="text"]:focus,
+.editform textarea:focus,
+.dialog.find textarea:focus {
+ background-color:var(--background-lighter);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+.ajaxpreview {
+ border-color:var(--border-color);
+}
+.edit-area ~ .ajaxpreview {
+ border-left-color:var(--border-color);
+}
+
+/* --- Dialog.less --- */
+.dialog {
+ background-color: var(--background-dialog);
+ border-color: var(--border-color);
+}
+.dialog .caption {
+ border-color: var(--border-color);
+ color: var(--text-color-normal);
+}
+.dialog.selection .body .item:hover {
+ background-color: var(--background-lighter);
+}
+.dialog.selection .body .divider {
+ background-color: var(--border-color);
+}
+
+.dialog.find [name=tbTEXTSEL] { /*same as selected text*/
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+
+
+/* --- Template.Preview.less --- */
+
+/* --- ImagePlugin.less --- */
+/* --- IndexPlugin.less --- */
+
+.index .header {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+}
+.index .header:hover {
+ background-color:var(--background-light);
+}
+.index .header a {
+ color:var(--text-color-richer);
+}
+.index .header a:hover {
+ background-color:var(--background-lighter);
+}
+.index > .section a {
+ color:var(--text-color-richer);
+}
+
+
+/* --- TOCPlugin.less --- */
+
+.toc ul li:hover {
+ background-color:var(--background-lighter);
+}
+
+/* --- WeblogPlugin.less --- */
+/* --- RecentChangesPlugin.less --- */
+
+.recentchanges .date {
+ border-color:var(--border-color);
+}
+/* --- CommentBox.less --- */
+
+
+/* --- GraphBar.less --- */
+.gb-group {
+ background-color:var(--background-light);
+ border:1px solid var(--border-color);
+}
+
+/* --- Tabs.less --- */
+/* --- Accordion.less --- */
+/* --- Columns.less --- */
+.columns.border,
+.columns.border > .col:not(:last-child) {
+ border-color:var(--border-color);
+}
+.columns.hover .col:hover {
+ background-color: var(--background-lighter);
+}
+
+
+/* --- Collapsible.less --- */
+.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
+.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
+
+.bullet.xpand { border-top-color: var(--text-color-normal); }
+.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
+
+/* --- Category.less --- */
+.category-link {
+ border-color:var(--border-color);
+}
+/* --- Flip.less --- */
+/* --- Invisibles.less --- */
+/* --- prettify.less --- */
+ .prettify pre, .prettify-nonum pre, pre.prettylines {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+ }
+ .pln { color: #cccccc; } /* plain text */
+ .str { color: #99cc99; } /* string content */
+ .kwd { color: #ffeea6; } /* keyword */
+ .com { color: #8a8a80; } /* comment */
+ .typ { color: #bbdaff; } /* type name */
+ .lit { color: #FCA369; } /* literal value */
+ .pun { color: #cda869; } /* punctuation */
+ .opn { color: #ffffff; } /* lisp open bracket */
+ .clo { color: #ffffff; } /* lisp close bracket */
+ .tag { color: #78AAD6; } /* markup tag name */
+ .atn { color: #ffc58f; } /* markup attribute name */
+ .atv { color: #FFD479; } /* markup attribute value */
+ .dec { color: #D6ACD6; } /* declaration */
+ .var { color: #76D4D6; } /* variable name */
+ .fun { color: #d6acd6; } /* function name */
+
+/* --- responsive-viewport.less --- */
+/* --- print.less --- */
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/darkly/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/darkly/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/darkly/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/default/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/default/skin.css
new file mode 100644
index 0000000000..6b3e563a81
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/default/skin.css
@@ -0,0 +1,15 @@
+/*
+Copyright 2025 The Apache Software Foundation.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
\ No newline at end of file
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/default/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/default/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/default/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/materia/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/materia/skin.css
new file mode 100644
index 0000000000..2e766b34da
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/materia/skin.css
@@ -0,0 +1,729 @@
+/*
+inspired by Bootswatch theme of the same name
+from https://github.com/thomaspark/bootswatch/
+MIT Licensed
+*/
+
+
+html {
+ /* 1. Core Hue Shifts */
+ --hue: 188; /* Material Teal/Cyan Hue */
+ --accent-hue: 188;
+
+ /* 2. Text Colors */
+ --text-color-normal: #444444; /* Material Dark Gray */
+ --text-color-light: #777777; /* Muted Gray */
+ --text-color-richer: #212121; /* Material "Near Black" */
+ --text-color-highlight: #009688; /* Teal Accent */
+
+ /* 3. Links and Accents */
+ --link-color: #2196f3; /* Material Primary Blue */
+ --accent-color: #009688; /* Material Teal */
+ --error-color: #f44336; /* Material Red */
+
+ /* 4. Buttons */
+ --button-background: #2196f3;
+ --button-text-color: #ffffff;
+ --button-active: #1e88e5; /* Slightly deeper blue */
+ --button-active-darker: #1976d2;
+
+ /* 5. Backgrounds */
+ --background: #ffffff; /* Pure White */
+ --background-sidebar: #fafafa; /* Very subtle off-white */
+ --background-light: #f5f5f5; /* "Elevated" background */
+ --background-lighter: #eeeeee;
+ --background-light-solid: #ffffff;
+
+ /* Navbar / PageName Specific Background */
+ --navbar-bg: #2196f3; /* Distinct Material Blue Navbar */
+
+ --background-dropdown: #ffffff;
+ --background-dialog: #ffffff;
+
+ /* 6. Borders */
+ --border-color: #e0e0e0; /* Very thin, light borders */
+
+ /* 7. Contextual Colors (Material Design Palette) */
+ --context-primary: #2196f3; /* Material Blue */
+ --context-success: #4caf50; /* Material Green */
+ --context-info: #00bcd4; /* Material Cyan */
+ --context-warning: #ff9800; /* Material Orange */
+ --context-error: #f44336; /* Material Red */
+
+ --color-black: #000000;
+ --color-white: #ffffff;
+
+ --wikiTriangleColor: var(--link-color);
+}
+
+
+::selection {
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+/* --- BOOTSTRAP --- */
+.titlebox {
+ background-color: var(--background-light);
+}
+.panel {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.panel-default .panel-heading {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:inherit;
+}
+
+.list-group-item {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+
+.nav-tabs {
+ border-color: var(--border-color);
+}
+.nav-tabs > li > a {
+ color:inherit;
+}
+.nav-tabs > li > a:hover {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:inherit;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active {
+ background:transparent;
+ color:var(--text-color-richer);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background);
+}
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+/*.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+
+}*/
+.nav > li > a:hover, .nav > li > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+.btn-default,
+.default {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn:hover, .btn:focus, .btn.focus,
+.btn-default:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn.disabled:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+}
+.btn-default:active,
+.btn-default:active:hover,
+.btn-default.active,
+.btn-default.active:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--accent-color);
+}
+
+.dropdown-menu {
+ background-color: var(--background-dropdown);
+ border-color: var(--border-color);
+}
+.dropdown-header {
+ color:var(--text-color-richer);
+}
+.dropdown-menu .divider {
+ background-color: var(--border-color);
+}
+.dropdown-menu > li > a {
+ color:var(--text-color-normal);
+}
+.dropdown-menu > li > a:hover {
+ background-color: var(--background-lighter);
+ color:inherit;
+}
+
+.form-control {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+}
+.form-control:focus {
+ border-color: var(--accent-color);
+}
+.form-control[disabled] {
+ background-color: transparent;
+ border-color: var(--border-color);
+}
+.form-frame {
+ border-color: var(--border-color);
+}
+
+label.form-switch > input[type=checkbox],
+input[type=checkbox].form-switch {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ background-color:var(--background-light);
+ border:1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:hover,
+input[type=checkbox].form-switch:hover {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ border: 1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:checked,
+input[type=checkbox].form-switch:checked {
+ box-shadow: inset 1.25em 0 0 1px var(--button-active);
+ border: 1px solid var(--button-active);
+}
+label.form-switch > input[type=checkbox]:checked:hover,
+input[type=checkbox].form-switch:checked:hover {
+ box-shadow:inset 1.25em 0 0 1px var(--button-active-darker);
+ border: 1px solid var(--button-active-darker);
+}
+label.form-switch > input[type=checkbox]:focus,
+input[type=checkbox].form-switch:focus {
+ background:none !important;
+}
+/*
+.form-group .btn.active {
+ color:var(--text-color-normal);
+ background-color:var(--context-info);
+}
+*/
+
+select,
+.form-group select {
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+
+ background-color: var(--background-light);
+ background-image:
+ linear-gradient(120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) ),
+ linear-gradient(-120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) );
+
+ background-position:
+ calc( var(--padding-base-horizontal) - 1px + var(--wikiTriangleSize)/2 ) calc(var(--padding-base-vertical)*2),
+ calc( var(--padding-base-horizontal) - var(--wikiTriangleSize)*3/2 ) calc(var(--padding-base-vertical)*2);
+
+
+}
+
+input[type=checkbox]:focus,
+select:focus,
+.form-group select:focus {
+ outline-color: var(--accent-color);
+}
+
+.modal {
+ background-color: var(--background-dropdown);
+ color:var(--text-color-normal);
+}
+
+/*pagination.less*/
+.pagination {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.pagination a {
+ color:var(--link-color);
+ text-decoration:none;
+}
+.pagination .cursor,
+.pagination a:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color: var(--accent-color);
+}
+
+/* --- JSPWiki --- */
+
+/* --- variables.less --- */
+
+/* --- type.less --- */
+
+hr,.hr {
+ border-color: var(--border-color);
+}
+
+mark, .highlight {
+ background-color: var(--accent-color) !important;
+ color:var(--text-color-highlight);
+}
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
+/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
+
+.text-primary { color: var(--context-primary); }
+.text-success { color: var(--context-success); }
+.text-info { color: var(--context-info); }
+.text-warning { color: var(--context-warning); }
+.text-error,
+.text-danger { color: var(--context-error); }
+
+/* primary */
+.panel-primary > .panel-heading,
+.bg-primary {
+ background-color: var(--context-primary);
+ border-color: var(--context-primary);
+ color:var(--color-white);
+}
+.panel-primary > .panel-heading a:link,
+.bg-primary a:link {
+ color:var(--color-black);
+}
+/* success */
+.panel-success > .panel-heading,
+.success,
+.bg-success {
+ background-color: var(--context-success);
+ border-color: var(--context-success);
+ color:var(--color-black);
+}
+.panel-success > .panel-heading a:link,
+.success a:link,
+.bg-success a:link {
+ text-decoration:underline;
+}
+/* info */
+.panel-info > .panel-heading,
+.info, .information,
+.bg-info {
+ background-color: var(--context-info);
+ border-color: var(--context-info);
+ color:var(--color-black);
+}
+.panel-info > .panel-heading a:link,
+.info a:link, .information a:link,
+.bg-info a:link {
+ text-decoration:underline;
+}
+/* warning */
+.panel-warning > .panel-heading,
+.alert-warning,
+.warning,
+.bg-warning {
+ background-color: var(--context-warning);
+ border-color: var(--context-warning);
+ color:var(--color-black);
+}
+.panel-warning > .panel-heading a:link,
+.alert-warning a:link,
+.warning a:link,
+.bg-warning a:link {
+ text-decoration:underline;
+}
+/* danger, error */
+.panel-danger > .panel-heading,
+.error,.danger,
+.bg-danger {
+ background-color: var(--context-error);
+ border-color: var(--context-error);
+ color:var(--color-black);
+}
+.panel-danger > .panel-heading a:link,
+.error a:link,.danger a:link,
+.bg-danger a:link {
+ text-decoration:underline;
+}
+
+span.label { color:var(--color-black); }
+
+pre {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+code,
+tt {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+a.list-group-item:hover,
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+ color:inherit;
+}
+
+.tree ul li::before,
+.tree ul li::after {
+ background: var(--border-color);
+}
+
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+}
+
+.hover {
+ background-color:var(--background-lighter);
+}
+
+a.slimbox-link:after,
+.slimbox-btn:before,
+a:visited,
+a:link { color:var(--link-color); }
+
+a.createpage {
+ color:var(--error-color);
+}
+
+.interwiki-raw::after,
+a.interwiki[href$="skin=raw"]::after,
+.interwiki-reader::after,
+a.interwiki[href$="skin=reader"]::after,
+.interwiki-edit::after,
+a.interwiki[href*="Edit.jsp?page="]::after,
+.interwiki-group::after,
+a.interwiki[href*="Group.jsp?group="]::after,
+a.interwiki[href^="rss.jsp"]::after {
+ background-color:var(--background-lighter);
+ color:var(--accent-color);
+}
+
+.editsection,
+.hashlink {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--link-color);
+}
+.editsection:hover,
+h2 .editsection:hover,
+h3 .editsection:hover,
+h4 .editsection:hover,
+h2 .hashlink:hover,
+h3 .hashlink:hover,
+h4 .hashlink:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--link-color);
+ opacity:1;
+}
+
+div.dropcaps > span.dropcaps {
+ color: var(--text-color-highlight);
+}
+blockquote,
+.dialog .quote-item {
+ border-color:var(--text-color-highlight);
+}
+.page-break {
+ border-color: var(--border-color);
+}
+
+
+/* --- grid.less --- */
+/* --- tables.less --- */
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.wikitable > thead > tr > th,
+.wikitable > tbody > tr > th,
+.wikitable > tfoot > tr > th,
+.wikitable > thead > tr > td,
+.wikitable > tbody > tr > td,
+.wikitable > tfoot > tr > td,
+.wikitable tr:first-child th {
+ border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered tr:first-child th,
+.table-bordered tr:first-child td {
+ border-color: var(--border-color);
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.table-hover > tbody > tr:nth-of-type(odd):hover,
+.table-hover > tbody > tr:nth-child(odd):hover > td,
+.table-hover > tbody > tr:nth-child(odd):hover > th,
+.table-hover > tbody > tr:hover {
+ background-color: var(--background-lighter);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) ,
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: var(--background-light);
+}
+[class*=zebra] .odd {
+ background-color: var(--background-light);
+}
+
+
+/* --- TableX.Sort.less --- */
+.sortable th:hover {
+ background-color: var(--background-lighter);;
+}
+.sortable th.up:after,
+.sortable th.up:hover:after {
+ border-bottom-color: var(--accent-color);
+ opacity:1;
+}
+.sortable th:hover:after,
+.sortable th.down:after,
+.sortable th.down:hover:after {
+ border-top-color: var(--accent-color);
+ opacity:1;
+}
+
+/* --- TableX.Filter.less --- */
+/* --- forms.less --- */
+/* --- modals.less --- */
+
+/* --- fontjspwiki/font-jspwiki.less --- */
+/* --- dropdown.less --- */
+
+/* --- pagination.less --- */
+/* --- Tips.less --- */
+.tip-link,
+.tip-link:hover {
+ color: var(--link-color);
+}
+/* --- Magnify.less --- */
+/* --- Viewer.less --- */
+/* --- Viewer.Slimbox.less --- */
+/* --- Viewer.Carousel.less --- */
+/* --- Template.View.less --- */
+html body .header, html body .footer {
+ background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
+ background-image: radial-gradient(circle, var(--background-light), var(--background) );
+ color:var(--text-color-normal);
+}
+a.logo { border-color: var(--border-color); }
+
+
+div.admin .formcontainer {
+ /*.default*/
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+.admin .formcontainer table {
+ border-color: var(--border-color);
+ /*
+ .table;
+ .table-bordered;
+ .table-striped;
+ */
+}
+.admin-user-form > div#userlist .list-group-item.new-user{
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+
+
+/* --- Template.UserBox.less --- */
+.login-form {
+ background-color: var(--background-dialog);
+ border:1px solid var(--border-color);
+}
+.login-form hr { border-color:var(--border-color); }
+
+
+/* --- Template.SearchBox.less --- */
+/* --- Template.Nav.less --- */
+.badge,
+.header > .navigation .nav > li > a > .badge {
+ background-color:var(--background-lighter);
+ color:var(--text-color-normal);
+}
+
+.header > .navigation .nav .btn-xs .badge {
+ background-color: var(--background-lighter);
+}
+
+/* --- Template.Content.less --- */
+body, .content {
+ background-color: var(--background);
+ color:var(--text-color-normal);
+ overflow-y: auto;
+}
+.content:after {
+ background: var(--background-sidebar);
+}
+/* --- Template.Attach.less --- */
+/* --- Template.Diff.less --- */
+.diffadd { background-color:var(--context-success); color:var(--color-black); }
+.diffrem { background:var(--context-error); color:var(--color-black); }
+
+/* --- Template.Search.less --- */
+
+form#searchform2 + div .fragment {
+ color: var(--text-color-richer);
+}
+form#searchform2 + div .gb-bar {
+ background-color: var(--context-warning);
+}
+
+/* --- Template.Workflow.less --- */
+/* --- Template.Edit.less --- */
+
+.editform input[type="text"]:focus,
+.dialog.find input[type="text"]:focus,
+.editform textarea:focus,
+.dialog.find textarea:focus {
+ background-color:var(--background-lighter);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+.ajaxpreview {
+ border-color:var(--border-color);
+}
+.edit-area ~ .ajaxpreview {
+ border-left-color:var(--border-color);
+}
+
+/* --- Dialog.less --- */
+.dialog {
+ background-color: var(--background-dialog);
+ border-color: var(--border-color);
+}
+.dialog .caption {
+ border-color: var(--border-color);
+ color: var(--text-color-normal);
+}
+.dialog.selection .body .item:hover {
+ background-color: var(--background-lighter);
+}
+.dialog.selection .body .divider {
+ background-color: var(--border-color);
+}
+
+.dialog.find [name=tbTEXTSEL] { /*same as selected text*/
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+
+
+/* --- Template.Preview.less --- */
+
+/* --- ImagePlugin.less --- */
+/* --- IndexPlugin.less --- */
+
+.index .header {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+}
+.index .header:hover {
+ background-color:var(--background-light);
+}
+.index .header a {
+ color:var(--text-color-richer);
+}
+.index .header a:hover {
+ background-color:var(--background-lighter);
+}
+.index > .section a {
+ color:var(--text-color-richer);
+}
+
+
+/* --- TOCPlugin.less --- */
+
+.toc ul li:hover {
+ background-color:var(--background-lighter);
+}
+
+/* --- WeblogPlugin.less --- */
+/* --- RecentChangesPlugin.less --- */
+
+.recentchanges .date {
+ border-color:var(--border-color);
+}
+/* --- CommentBox.less --- */
+
+
+/* --- GraphBar.less --- */
+.gb-group {
+ background-color:var(--background-light);
+ border:1px solid var(--border-color);
+}
+
+/* --- Tabs.less --- */
+/* --- Accordion.less --- */
+/* --- Columns.less --- */
+.columns.border,
+.columns.border > .col:not(:last-child) {
+ border-color:var(--border-color);
+}
+.columns.hover .col:hover {
+ background-color: var(--background-lighter);
+}
+
+
+/* --- Collapsible.less --- */
+.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
+.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
+
+.bullet.xpand { border-top-color: var(--text-color-normal); }
+.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
+
+/* --- Category.less --- */
+.category-link {
+ border-color:var(--border-color);
+}
+/* --- Flip.less --- */
+/* --- Invisibles.less --- */
+/* --- prettify.less --- */
+ .prettify pre, .prettify-nonum pre, pre.prettylines {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+ }
+ .pln { color: #cccccc; } /* plain text */
+ .str { color: #99cc99; } /* string content */
+ .kwd { color: #ffeea6; } /* keyword */
+ .com { color: #8a8a80; } /* comment */
+ .typ { color: #bbdaff; } /* type name */
+ .lit { color: #FCA369; } /* literal value */
+ .pun { color: #cda869; } /* punctuation */
+ .opn { color: #ffffff; } /* lisp open bracket */
+ .clo { color: #ffffff; } /* lisp close bracket */
+ .tag { color: #78AAD6; } /* markup tag name */
+ .atn { color: #ffc58f; } /* markup attribute name */
+ .atv { color: #FFD479; } /* markup attribute value */
+ .dec { color: #D6ACD6; } /* declaration */
+ .var { color: #76D4D6; } /* variable name */
+ .fun { color: #d6acd6; } /* function name */
+
+/* --- responsive-viewport.less --- */
+/* --- print.less --- */
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/materia/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/materia/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/materia/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/slate/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/slate/skin.css
new file mode 100644
index 0000000000..a32763e0d8
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/slate/skin.css
@@ -0,0 +1,730 @@
+/*
+inspired by Bootswatch theme of the same name
+from https://github.com/thomaspark/bootswatch/
+MIT Licensed
+*/
+
+html {
+ /* 1. Core Hue Shifts */
+ --hue: 210; /* Gunmetal Blue/Gray */
+ --accent-hue: 210;
+
+ /* 2. Text Colors */
+ --text-color-normal: #ced4da; /* Soft Light Gray */
+ --text-color-light: #999999; /* Muted Slate */
+ --text-color-richer: #ffffff;
+ --text-color-highlight: #ffffff; /* Slate uses White for emphasis */
+
+ /* 3. Links and Accents */
+ --link-color: #ffffff; /* Slate often uses white or very light blue links */
+ --accent-color: #7a8288; /* Mid-tone Slate */
+ --error-color: #ee5f5b;
+
+ /* 4. Buttons */
+ --button-background: #3a3f44; /* Gradient base / Gunmetal */
+ --button-text-color: #ffffff;
+ --button-active: #272b30; /* Deep slate hover */
+ --button-active-darker: #1c1e22;
+
+ /* 5. Backgrounds */
+ --background: #272b30; /* "Charcoal" Slate */
+ --background-sidebar: #1c1e22; /* Darker accent for sidebars */
+ --background-light: #3a3f44; /* Lighter slate for cards/panels */
+ --background-lighter: #495057;
+ --background-light-solid: #3a3f44;
+
+ /* Navbar / PageName Specific Background */
+ --navbar-bg: #1c1e22; /* Deepest Slate */
+
+ --background-dropdown: #3a3f44;
+ --background-dialog: #272b30;
+
+ /* 6. Borders */
+ --border-color: #1c1e22; /* Subtle dark borders */
+
+ /* 7. Contextual Colors (Slate-Specific Muted Tones) */
+ --context-primary: #7a8288; /* Slate Gray */
+ --context-success: #62c462; /* Muted Green */
+ --context-info: #5bc0de; /* Soft Blue */
+ --context-warning: #f89406; /* Golden Orange */
+ --context-error: #ee5f5b; /* Softened Red */
+
+ --color-black: #000000;
+ --color-white: #ffffff;
+
+ --wikiTriangleColor: var(--link-color);
+ /*If you want to get fancy with JSPWiki's button class, you can apply a subtle gradient using:
+ linear-gradient(#484e55, #3a3f44 60%, #313539)*/
+}
+
+
+::selection {
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+/* --- BOOTSTRAP --- */
+.titlebox {
+ background-color: var(--background-light);
+}
+.panel {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.panel-default .panel-heading {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:inherit;
+}
+
+.list-group-item {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+
+.nav-tabs {
+ border-color: var(--border-color);
+}
+.nav-tabs > li > a {
+ color:inherit;
+}
+.nav-tabs > li > a:hover {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:inherit;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active {
+ background:transparent;
+ color:var(--text-color-richer);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background);
+}
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+/*.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+
+}*/
+.nav > li > a:hover, .nav > li > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+.btn-default,
+.default {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn:hover, .btn:focus, .btn.focus,
+.btn-default:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn.disabled:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+}
+.btn-default:active,
+.btn-default:active:hover,
+.btn-default.active,
+.btn-default.active:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--accent-color);
+}
+
+.dropdown-menu {
+ background-color: var(--background-dropdown);
+ border-color: var(--border-color);
+}
+.dropdown-header {
+ color:var(--text-color-richer);
+}
+.dropdown-menu .divider {
+ background-color: var(--border-color);
+}
+.dropdown-menu > li > a {
+ color:var(--text-color-normal);
+}
+.dropdown-menu > li > a:hover {
+ background-color: var(--background-lighter);
+ color:inherit;
+}
+
+.form-control {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+}
+.form-control:focus {
+ border-color: var(--accent-color);
+}
+.form-control[disabled] {
+ background-color: transparent;
+ border-color: var(--border-color);
+}
+.form-frame {
+ border-color: var(--border-color);
+}
+
+label.form-switch > input[type=checkbox],
+input[type=checkbox].form-switch {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ background-color:var(--background-light);
+ border:1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:hover,
+input[type=checkbox].form-switch:hover {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ border: 1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:checked,
+input[type=checkbox].form-switch:checked {
+ box-shadow: inset 1.25em 0 0 1px var(--button-active);
+ border: 1px solid var(--button-active);
+}
+label.form-switch > input[type=checkbox]:checked:hover,
+input[type=checkbox].form-switch:checked:hover {
+ box-shadow:inset 1.25em 0 0 1px var(--button-active-darker);
+ border: 1px solid var(--button-active-darker);
+}
+label.form-switch > input[type=checkbox]:focus,
+input[type=checkbox].form-switch:focus {
+ background:none !important;
+}
+/*
+.form-group .btn.active {
+ color:var(--text-color-normal);
+ background-color:var(--context-info);
+}
+*/
+
+select,
+.form-group select {
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+
+ background-color: var(--background-light);
+ background-image:
+ linear-gradient(120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) ),
+ linear-gradient(-120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) );
+
+ background-position:
+ calc( var(--padding-base-horizontal) - 1px + var(--wikiTriangleSize)/2 ) calc(var(--padding-base-vertical)*2),
+ calc( var(--padding-base-horizontal) - var(--wikiTriangleSize)*3/2 ) calc(var(--padding-base-vertical)*2);
+
+
+}
+
+input[type=checkbox]:focus,
+select:focus,
+.form-group select:focus {
+ outline-color: var(--accent-color);
+}
+
+.modal {
+ background-color: var(--background-dropdown);
+ color:var(--text-color-normal);
+}
+
+/*pagination.less*/
+.pagination {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.pagination a {
+ color:var(--link-color);
+ text-decoration:none;
+}
+.pagination .cursor,
+.pagination a:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color: var(--accent-color);
+}
+
+/* --- JSPWiki --- */
+
+/* --- variables.less --- */
+
+/* --- type.less --- */
+
+hr,.hr {
+ border-color: var(--border-color);
+}
+
+mark, .highlight {
+ background-color: var(--accent-color) !important;
+ color:var(--text-color-highlight);
+}
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
+/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
+
+.text-primary { color: var(--context-primary); }
+.text-success { color: var(--context-success); }
+.text-info { color: var(--context-info); }
+.text-warning { color: var(--context-warning); }
+.text-error,
+.text-danger { color: var(--context-error); }
+
+/* primary */
+.panel-primary > .panel-heading,
+.bg-primary {
+ background-color: var(--context-primary);
+ border-color: var(--context-primary);
+ color:var(--color-white);
+}
+.panel-primary > .panel-heading a:link,
+.bg-primary a:link {
+ color:var(--color-black);
+}
+/* success */
+.panel-success > .panel-heading,
+.success,
+.bg-success {
+ background-color: var(--context-success);
+ border-color: var(--context-success);
+ color:var(--color-black);
+}
+.panel-success > .panel-heading a:link,
+.success a:link,
+.bg-success a:link {
+ text-decoration:underline;
+}
+/* info */
+.panel-info > .panel-heading,
+.info, .information,
+.bg-info {
+ background-color: var(--context-info);
+ border-color: var(--context-info);
+ color:var(--color-black);
+}
+.panel-info > .panel-heading a:link,
+.info a:link, .information a:link,
+.bg-info a:link {
+ text-decoration:underline;
+}
+/* warning */
+.panel-warning > .panel-heading,
+.alert-warning,
+.warning,
+.bg-warning {
+ background-color: var(--context-warning);
+ border-color: var(--context-warning);
+ color:var(--color-black);
+}
+.panel-warning > .panel-heading a:link,
+.alert-warning a:link,
+.warning a:link,
+.bg-warning a:link {
+ text-decoration:underline;
+}
+/* danger, error */
+.panel-danger > .panel-heading,
+.error,.danger,
+.bg-danger {
+ background-color: var(--context-error);
+ border-color: var(--context-error);
+ color:var(--color-black);
+}
+.panel-danger > .panel-heading a:link,
+.error a:link,.danger a:link,
+.bg-danger a:link {
+ text-decoration:underline;
+}
+
+span.label { color:var(--color-black); }
+
+pre {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+code,
+tt {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+a.list-group-item:hover,
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+ color:inherit;
+}
+
+.tree ul li::before,
+.tree ul li::after {
+ background: var(--border-color);
+}
+
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+}
+
+.hover {
+ background-color:var(--background-lighter);
+}
+
+a.slimbox-link:after,
+.slimbox-btn:before,
+a:visited,
+a:link { color:var(--link-color); }
+
+a.createpage {
+ color:var(--error-color);
+}
+
+.interwiki-raw::after,
+a.interwiki[href$="skin=raw"]::after,
+.interwiki-reader::after,
+a.interwiki[href$="skin=reader"]::after,
+.interwiki-edit::after,
+a.interwiki[href*="Edit.jsp?page="]::after,
+.interwiki-group::after,
+a.interwiki[href*="Group.jsp?group="]::after,
+a.interwiki[href^="rss.jsp"]::after {
+ background-color:var(--background-lighter);
+ color:var(--accent-color);
+}
+
+.editsection,
+.hashlink {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--link-color);
+}
+.editsection:hover,
+h2 .editsection:hover,
+h3 .editsection:hover,
+h4 .editsection:hover,
+h2 .hashlink:hover,
+h3 .hashlink:hover,
+h4 .hashlink:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--link-color);
+ opacity:1;
+}
+
+div.dropcaps > span.dropcaps {
+ color: var(--text-color-highlight);
+}
+blockquote,
+.dialog .quote-item {
+ border-color:var(--text-color-highlight);
+}
+.page-break {
+ border-color: var(--border-color);
+}
+
+
+/* --- grid.less --- */
+/* --- tables.less --- */
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.wikitable > thead > tr > th,
+.wikitable > tbody > tr > th,
+.wikitable > tfoot > tr > th,
+.wikitable > thead > tr > td,
+.wikitable > tbody > tr > td,
+.wikitable > tfoot > tr > td,
+.wikitable tr:first-child th {
+ border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered tr:first-child th,
+.table-bordered tr:first-child td {
+ border-color: var(--border-color);
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.table-hover > tbody > tr:nth-of-type(odd):hover,
+.table-hover > tbody > tr:nth-child(odd):hover > td,
+.table-hover > tbody > tr:nth-child(odd):hover > th,
+.table-hover > tbody > tr:hover {
+ background-color: var(--background-lighter);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) ,
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: var(--background-light);
+}
+[class*=zebra] .odd {
+ background-color: var(--background-light);
+}
+
+
+/* --- TableX.Sort.less --- */
+.sortable th:hover {
+ background-color: var(--background-lighter);;
+}
+.sortable th.up:after,
+.sortable th.up:hover:after {
+ border-bottom-color: var(--accent-color);
+ opacity:1;
+}
+.sortable th:hover:after,
+.sortable th.down:after,
+.sortable th.down:hover:after {
+ border-top-color: var(--accent-color);
+ opacity:1;
+}
+
+/* --- TableX.Filter.less --- */
+/* --- forms.less --- */
+/* --- modals.less --- */
+
+/* --- fontjspwiki/font-jspwiki.less --- */
+/* --- dropdown.less --- */
+
+/* --- pagination.less --- */
+/* --- Tips.less --- */
+.tip-link,
+.tip-link:hover {
+ color: var(--link-color);
+}
+/* --- Magnify.less --- */
+/* --- Viewer.less --- */
+/* --- Viewer.Slimbox.less --- */
+/* --- Viewer.Carousel.less --- */
+/* --- Template.View.less --- */
+html body .header, html body .footer {
+ background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
+ background-image: radial-gradient(circle, var(--background-light), var(--background) );
+ color:var(--text-color-normal);
+}
+a.logo { border-color: var(--border-color); }
+
+
+div.admin .formcontainer {
+ /*.default*/
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+.admin .formcontainer table {
+ border-color: var(--border-color);
+ /*
+ .table;
+ .table-bordered;
+ .table-striped;
+ */
+}
+.admin-user-form > div#userlist .list-group-item.new-user{
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+
+
+/* --- Template.UserBox.less --- */
+.login-form {
+ background-color: var(--background-dialog);
+ border:1px solid var(--border-color);
+}
+.login-form hr { border-color:var(--border-color); }
+
+
+/* --- Template.SearchBox.less --- */
+/* --- Template.Nav.less --- */
+.badge,
+.header > .navigation .nav > li > a > .badge {
+ background-color:var(--background-lighter);
+ color:var(--text-color-normal);
+}
+
+.header > .navigation .nav .btn-xs .badge {
+ background-color: var(--background-lighter);
+}
+
+/* --- Template.Content.less --- */
+body, .content {
+ background-color: var(--background);
+ color:var(--text-color-normal);
+ overflow-y: auto;
+}
+.content:after {
+ background: var(--background-sidebar);
+}
+/* --- Template.Attach.less --- */
+/* --- Template.Diff.less --- */
+.diffadd { background-color:var(--context-success); color:var(--color-black); }
+.diffrem { background:var(--context-error); color:var(--color-black); }
+
+/* --- Template.Search.less --- */
+
+form#searchform2 + div .fragment {
+ color: var(--text-color-richer);
+}
+form#searchform2 + div .gb-bar {
+ background-color: var(--context-warning);
+}
+
+/* --- Template.Workflow.less --- */
+/* --- Template.Edit.less --- */
+
+.editform input[type="text"]:focus,
+.dialog.find input[type="text"]:focus,
+.editform textarea:focus,
+.dialog.find textarea:focus {
+ background-color:var(--background-lighter);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+.ajaxpreview {
+ border-color:var(--border-color);
+}
+.edit-area ~ .ajaxpreview {
+ border-left-color:var(--border-color);
+}
+
+/* --- Dialog.less --- */
+.dialog {
+ background-color: var(--background-dialog);
+ border-color: var(--border-color);
+}
+.dialog .caption {
+ border-color: var(--border-color);
+ color: var(--text-color-normal);
+}
+.dialog.selection .body .item:hover {
+ background-color: var(--background-lighter);
+}
+.dialog.selection .body .divider {
+ background-color: var(--border-color);
+}
+
+.dialog.find [name=tbTEXTSEL] { /*same as selected text*/
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+
+
+/* --- Template.Preview.less --- */
+
+/* --- ImagePlugin.less --- */
+/* --- IndexPlugin.less --- */
+
+.index .header {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+}
+.index .header:hover {
+ background-color:var(--background-light);
+}
+.index .header a {
+ color:var(--text-color-richer);
+}
+.index .header a:hover {
+ background-color:var(--background-lighter);
+}
+.index > .section a {
+ color:var(--text-color-richer);
+}
+
+
+/* --- TOCPlugin.less --- */
+
+.toc ul li:hover {
+ background-color:var(--background-lighter);
+}
+
+/* --- WeblogPlugin.less --- */
+/* --- RecentChangesPlugin.less --- */
+
+.recentchanges .date {
+ border-color:var(--border-color);
+}
+/* --- CommentBox.less --- */
+
+
+/* --- GraphBar.less --- */
+.gb-group {
+ background-color:var(--background-light);
+ border:1px solid var(--border-color);
+}
+
+/* --- Tabs.less --- */
+/* --- Accordion.less --- */
+/* --- Columns.less --- */
+.columns.border,
+.columns.border > .col:not(:last-child) {
+ border-color:var(--border-color);
+}
+.columns.hover .col:hover {
+ background-color: var(--background-lighter);
+}
+
+
+/* --- Collapsible.less --- */
+.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
+.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
+
+.bullet.xpand { border-top-color: var(--text-color-normal); }
+.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
+
+/* --- Category.less --- */
+.category-link {
+ border-color:var(--border-color);
+}
+/* --- Flip.less --- */
+/* --- Invisibles.less --- */
+/* --- prettify.less --- */
+ .prettify pre, .prettify-nonum pre, pre.prettylines {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+ }
+ .pln { color: #cccccc; } /* plain text */
+ .str { color: #99cc99; } /* string content */
+ .kwd { color: #ffeea6; } /* keyword */
+ .com { color: #8a8a80; } /* comment */
+ .typ { color: #bbdaff; } /* type name */
+ .lit { color: #FCA369; } /* literal value */
+ .pun { color: #cda869; } /* punctuation */
+ .opn { color: #ffffff; } /* lisp open bracket */
+ .clo { color: #ffffff; } /* lisp close bracket */
+ .tag { color: #78AAD6; } /* markup tag name */
+ .atn { color: #ffc58f; } /* markup attribute name */
+ .atv { color: #FFD479; } /* markup attribute value */
+ .dec { color: #D6ACD6; } /* declaration */
+ .var { color: #76D4D6; } /* variable name */
+ .fun { color: #d6acd6; } /* function name */
+
+/* --- responsive-viewport.less --- */
+/* --- print.less --- */
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/slate/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/slate/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/slate/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/uswds/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/uswds/skin.css
new file mode 100644
index 0000000000..35accabae3
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/uswds/skin.css
@@ -0,0 +1,743 @@
+/*
+Copyright 2025 The Apache Software Foundation.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/*
+Loosly based on the US Web Design System
+https://designsystem.digital.gov/templates/
+
+*/
+html {
+ /* 1. Core Hue Shifts */
+ --hue: 212; /* USWDS Blue Hue */
+ --accent-hue: 212;
+
+ /* 2. Text Colors */
+ --text-color-normal: #1b1b1b; /* Gray-90: High contrast for readability */
+ --text-color-light: #565c65; /* Gray-50: Accessible muted text */
+ --text-color-richer: #1b1b1b; /* USWDS prefers dark gray over pure black */
+ --text-color-highlight: #005ea2; /* Blue-60v (Primary) */
+
+ /* 3. Links and Accents */
+ --link-color: #005ea2; /* USWDS Blue 60v - Standard Link */
+ --accent-color: #005ea2;
+ --error-color: #b50909; /* Red-60v - Error/Danger */
+
+ /* 4. Buttons */
+ --button-background: #005ea2; /* Primary Blue */
+ --button-text-color: #ffffff;
+ --button-active: #1a4480; /* Blue-70v - Hover state */
+ --button-active-darker: #162e4d; /* Blue-80v - Pressed state */
+
+ /* 5. Backgrounds */
+ --background: #ffffff; /* Pure White */
+ --background-sidebar: #f0f0f0; /* Gray-5: Neutral background */
+ --background-light: #f0f0f0;
+ --background-lighter: #dfe1e2; /* Gray-10 */
+ --background-light-solid: #ffffff;
+
+ /* Navbar / PageName Specific Background */
+ --navbar-bg: #1b1b1b; /* Gray-90: Standard for Header/Global nav */
+
+ --background-dropdown: #ffffff;
+ --background-dialog: #ffffff;
+
+ /* 6. Borders */
+ --border-color: #adade2; /* Using a light blue-gray for borders */
+
+ /* 7. Contextual Colors (USWDS Vivid Palette) */
+ --context-primary: #005ea2; /* Blue 60v */
+ --context-success: #00a91c; /* Green 50v */
+ --context-info: #00bde3; /* Cyan 40v */
+ --context-warning: #ffbe2e; /* Gold 20v */
+ --context-error: #b50909; /* Red 60v */
+
+ --color-black: #000000;
+ --color-white: #ffffff;
+
+ --wikiTriangleColor: var(--link-color);
+}
+
+
+
+::selection {
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+/* --- BOOTSTRAP --- */
+.titlebox {
+ background-color: var(--background-light);
+}
+.panel {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.panel-default .panel-heading {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:inherit;
+}
+
+.list-group-item {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+
+.nav-tabs {
+ border-color: var(--border-color);
+}
+.nav-tabs > li > a {
+ color:inherit;
+}
+.nav-tabs > li > a:hover {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:inherit;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active {
+ background:transparent;
+ color:var(--text-color-richer);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background);
+}
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+/*.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+
+}*/
+.nav > li > a:hover, .nav > li > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+.btn-default,
+.default {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn:hover, .btn:focus, .btn.focus,
+.btn-default:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn.disabled:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+}
+.btn-default:active,
+.btn-default:active:hover,
+.btn-default.active,
+.btn-default.active:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--accent-color);
+}
+
+.dropdown-menu {
+ background-color: var(--background-dropdown);
+ border-color: var(--border-color);
+}
+.dropdown-header {
+ color:var(--text-color-richer);
+}
+.dropdown-menu .divider {
+ background-color: var(--border-color);
+}
+.dropdown-menu > li > a {
+ color:var(--text-color-normal);
+}
+.dropdown-menu > li > a:hover {
+ background-color: var(--background-lighter);
+ color:inherit;
+}
+
+.form-control {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+}
+.form-control:focus {
+ border-color: var(--accent-color);
+}
+.form-control[disabled] {
+ background-color: transparent;
+ border-color: var(--border-color);
+}
+.form-frame {
+ border-color: var(--border-color);
+}
+
+label.form-switch > input[type=checkbox],
+input[type=checkbox].form-switch {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ background-color:var(--background-light);
+ border:1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:hover,
+input[type=checkbox].form-switch:hover {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ border: 1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:checked,
+input[type=checkbox].form-switch:checked {
+ box-shadow: inset 1.25em 0 0 1px var(--button-active);
+ border: 1px solid var(--button-active);
+}
+label.form-switch > input[type=checkbox]:checked:hover,
+input[type=checkbox].form-switch:checked:hover {
+ box-shadow:inset 1.25em 0 0 1px var(--button-active-darker);
+ border: 1px solid var(--button-active-darker);
+}
+label.form-switch > input[type=checkbox]:focus,
+input[type=checkbox].form-switch:focus {
+ background:none !important;
+}
+/*
+.form-group .btn.active {
+ color:var(--text-color-normal);
+ background-color:var(--context-info);
+}
+*/
+
+select,
+.form-group select {
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+
+ background-color: var(--background-light);
+ background-image:
+ linear-gradient(120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) ),
+ linear-gradient(-120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) );
+
+ background-position:
+ calc( var(--padding-base-horizontal) - 1px + var(--wikiTriangleSize)/2 ) calc(var(--padding-base-vertical)*2),
+ calc( var(--padding-base-horizontal) - var(--wikiTriangleSize)*3/2 ) calc(var(--padding-base-vertical)*2);
+
+
+}
+
+input[type=checkbox]:focus,
+select:focus,
+.form-group select:focus {
+ outline-color: var(--accent-color);
+}
+
+.modal {
+ background-color: var(--background-dropdown);
+ color:var(--text-color-normal);
+}
+
+/*pagination.less*/
+.pagination {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.pagination a {
+ color:var(--link-color);
+ text-decoration:none;
+}
+.pagination .cursor,
+.pagination a:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color: var(--accent-color);
+}
+
+/* --- JSPWiki --- */
+
+/* --- variables.less --- */
+
+/* --- type.less --- */
+
+hr,.hr {
+ border-color: var(--border-color);
+}
+
+mark, .highlight {
+ background-color: var(--accent-color) !important;
+ color:var(--text-color-highlight);
+}
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
+/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
+
+.text-primary { color: var(--context-primary); }
+.text-success { color: var(--context-success); }
+.text-info { color: var(--context-info); }
+.text-warning { color: var(--context-warning); }
+.text-error,
+.text-danger { color: var(--context-error); }
+
+/* primary */
+.panel-primary > .panel-heading,
+.bg-primary {
+ background-color: var(--context-primary);
+ border-color: var(--context-primary);
+ color:var(--color-white);
+}
+.panel-primary > .panel-heading a:link,
+.bg-primary a:link {
+ color:var(--color-black);
+}
+/* success */
+.panel-success > .panel-heading,
+.success,
+.bg-success {
+ background-color: var(--context-success);
+ border-color: var(--context-success);
+ color:var(--color-black);
+}
+.panel-success > .panel-heading a:link,
+.success a:link,
+.bg-success a:link {
+ text-decoration:underline;
+}
+/* info */
+.panel-info > .panel-heading,
+.info, .information,
+.bg-info {
+ background-color: var(--context-info);
+ border-color: var(--context-info);
+ color:var(--color-black);
+}
+.panel-info > .panel-heading a:link,
+.info a:link, .information a:link,
+.bg-info a:link {
+ text-decoration:underline;
+}
+/* warning */
+.panel-warning > .panel-heading,
+.alert-warning,
+.warning,
+.bg-warning {
+ background-color: var(--context-warning);
+ border-color: var(--context-warning);
+ color:var(--color-black);
+}
+.panel-warning > .panel-heading a:link,
+.alert-warning a:link,
+.warning a:link,
+.bg-warning a:link {
+ text-decoration:underline;
+}
+/* danger, error */
+.panel-danger > .panel-heading,
+.error,.danger,
+.bg-danger {
+ background-color: var(--context-error);
+ border-color: var(--context-error);
+ color:var(--color-black);
+}
+.panel-danger > .panel-heading a:link,
+.error a:link,.danger a:link,
+.bg-danger a:link {
+ text-decoration:underline;
+}
+
+span.label { color:var(--color-black); }
+
+pre {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+code,
+tt {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+a.list-group-item:hover,
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+ color:inherit;
+}
+
+.tree ul li::before,
+.tree ul li::after {
+ background: var(--border-color);
+}
+
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+}
+
+.hover {
+ background-color:var(--background-lighter);
+}
+
+a.slimbox-link:after,
+.slimbox-btn:before,
+a:visited,
+a:link { color:var(--link-color); }
+
+a.createpage {
+ color:var(--error-color);
+}
+
+.interwiki-raw::after,
+a.interwiki[href$="skin=raw"]::after,
+.interwiki-reader::after,
+a.interwiki[href$="skin=reader"]::after,
+.interwiki-edit::after,
+a.interwiki[href*="Edit.jsp?page="]::after,
+.interwiki-group::after,
+a.interwiki[href*="Group.jsp?group="]::after,
+a.interwiki[href^="rss.jsp"]::after {
+ background-color:var(--background-lighter);
+ color:var(--accent-color);
+}
+
+.editsection,
+.hashlink {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--link-color);
+}
+.editsection:hover,
+h2 .editsection:hover,
+h3 .editsection:hover,
+h4 .editsection:hover,
+h2 .hashlink:hover,
+h3 .hashlink:hover,
+h4 .hashlink:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--link-color);
+ opacity:1;
+}
+
+div.dropcaps > span.dropcaps {
+ color: var(--text-color-highlight);
+}
+blockquote,
+.dialog .quote-item {
+ border-color:var(--text-color-highlight);
+}
+.page-break {
+ border-color: var(--border-color);
+}
+
+
+/* --- grid.less --- */
+/* --- tables.less --- */
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.wikitable > thead > tr > th,
+.wikitable > tbody > tr > th,
+.wikitable > tfoot > tr > th,
+.wikitable > thead > tr > td,
+.wikitable > tbody > tr > td,
+.wikitable > tfoot > tr > td,
+.wikitable tr:first-child th {
+ border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered tr:first-child th,
+.table-bordered tr:first-child td {
+ border-color: var(--border-color);
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.table-hover > tbody > tr:nth-of-type(odd):hover,
+.table-hover > tbody > tr:nth-child(odd):hover > td,
+.table-hover > tbody > tr:nth-child(odd):hover > th,
+.table-hover > tbody > tr:hover {
+ background-color: var(--background-lighter);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) ,
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: var(--background-light);
+}
+[class*=zebra] .odd {
+ background-color: var(--background-light);
+}
+
+
+/* --- TableX.Sort.less --- */
+.sortable th:hover {
+ background-color: var(--background-lighter);;
+}
+.sortable th.up:after,
+.sortable th.up:hover:after {
+ border-bottom-color: var(--accent-color);
+ opacity:1;
+}
+.sortable th:hover:after,
+.sortable th.down:after,
+.sortable th.down:hover:after {
+ border-top-color: var(--accent-color);
+ opacity:1;
+}
+
+/* --- TableX.Filter.less --- */
+/* --- forms.less --- */
+/* --- modals.less --- */
+
+/* --- fontjspwiki/font-jspwiki.less --- */
+/* --- dropdown.less --- */
+
+/* --- pagination.less --- */
+/* --- Tips.less --- */
+.tip-link,
+.tip-link:hover {
+ color: var(--link-color);
+}
+/* --- Magnify.less --- */
+/* --- Viewer.less --- */
+/* --- Viewer.Slimbox.less --- */
+/* --- Viewer.Carousel.less --- */
+/* --- Template.View.less --- */
+html body .header, html body .footer {
+ background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
+ background-image: radial-gradient(circle, var(--background-light), var(--background) );
+ color:var(--text-color-normal);
+}
+a.logo { border-color: var(--border-color); }
+
+
+div.admin .formcontainer {
+ /*.default*/
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+.admin .formcontainer table {
+ border-color: var(--border-color);
+ /*
+ .table;
+ .table-bordered;
+ .table-striped;
+ */
+}
+.admin-user-form > div#userlist .list-group-item.new-user{
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+
+
+/* --- Template.UserBox.less --- */
+.login-form {
+ background-color: var(--background-dialog);
+ border:1px solid var(--border-color);
+}
+.login-form hr { border-color:var(--border-color); }
+
+
+/* --- Template.SearchBox.less --- */
+/* --- Template.Nav.less --- */
+.badge,
+.header > .navigation .nav > li > a > .badge {
+ background-color:var(--background-lighter);
+ color:var(--text-color-normal);
+}
+
+.header > .navigation .nav .btn-xs .badge {
+ background-color: var(--background-lighter);
+}
+
+/* --- Template.Content.less --- */
+body, .content {
+ background-color: var(--background);
+ color:var(--text-color-normal);
+ overflow-y: auto;
+}
+.content:after {
+ background: var(--background-sidebar);
+}
+/* --- Template.Attach.less --- */
+/* --- Template.Diff.less --- */
+.diffadd { background-color:var(--context-success); color:var(--color-black); }
+.diffrem { background:var(--context-error); color:var(--color-black); }
+
+/* --- Template.Search.less --- */
+
+form#searchform2 + div .fragment {
+ color: var(--text-color-richer);
+}
+form#searchform2 + div .gb-bar {
+ background-color: var(--context-warning);
+}
+
+/* --- Template.Workflow.less --- */
+/* --- Template.Edit.less --- */
+
+.editform input[type="text"]:focus,
+.dialog.find input[type="text"]:focus,
+.editform textarea:focus,
+.dialog.find textarea:focus {
+ background-color:var(--background-lighter);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+.ajaxpreview {
+ border-color:var(--border-color);
+}
+.edit-area ~ .ajaxpreview {
+ border-left-color:var(--border-color);
+}
+
+/* --- Dialog.less --- */
+.dialog {
+ background-color: var(--background-dialog);
+ border-color: var(--border-color);
+}
+.dialog .caption {
+ border-color: var(--border-color);
+ color: var(--text-color-normal);
+}
+.dialog.selection .body .item:hover {
+ background-color: var(--background-lighter);
+}
+.dialog.selection .body .divider {
+ background-color: var(--border-color);
+}
+
+.dialog.find [name=tbTEXTSEL] { /*same as selected text*/
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+
+
+/* --- Template.Preview.less --- */
+
+/* --- ImagePlugin.less --- */
+/* --- IndexPlugin.less --- */
+
+.index .header {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+}
+.index .header:hover {
+ background-color:var(--background-light);
+}
+.index .header a {
+ color:var(--text-color-richer);
+}
+.index .header a:hover {
+ background-color:var(--background-lighter);
+}
+.index > .section a {
+ color:var(--text-color-richer);
+}
+
+
+/* --- TOCPlugin.less --- */
+
+.toc ul li:hover {
+ background-color:var(--background-lighter);
+}
+
+/* --- WeblogPlugin.less --- */
+/* --- RecentChangesPlugin.less --- */
+
+.recentchanges .date {
+ border-color:var(--border-color);
+}
+/* --- CommentBox.less --- */
+
+
+/* --- GraphBar.less --- */
+.gb-group {
+ background-color:var(--background-light);
+ border:1px solid var(--border-color);
+}
+
+/* --- Tabs.less --- */
+/* --- Accordion.less --- */
+/* --- Columns.less --- */
+.columns.border,
+.columns.border > .col:not(:last-child) {
+ border-color:var(--border-color);
+}
+.columns.hover .col:hover {
+ background-color: var(--background-lighter);
+}
+
+
+/* --- Collapsible.less --- */
+.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
+.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
+
+.bullet.xpand { border-top-color: var(--text-color-normal); }
+.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
+
+/* --- Category.less --- */
+.category-link {
+ border-color:var(--border-color);
+}
+/* --- Flip.less --- */
+/* --- Invisibles.less --- */
+/* --- prettify.less --- */
+ .prettify pre, .prettify-nonum pre, pre.prettylines {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+ }
+ .pln { color: #cccccc; } /* plain text */
+ .str { color: #99cc99; } /* string content */
+ .kwd { color: #ffeea6; } /* keyword */
+ .com { color: #8a8a80; } /* comment */
+ .typ { color: #bbdaff; } /* type name */
+ .lit { color: #FCA369; } /* literal value */
+ .pun { color: #cda869; } /* punctuation */
+ .opn { color: #ffffff; } /* lisp open bracket */
+ .clo { color: #ffffff; } /* lisp close bracket */
+ .tag { color: #78AAD6; } /* markup tag name */
+ .atn { color: #ffc58f; } /* markup attribute name */
+ .atv { color: #FFD479; } /* markup attribute value */
+ .dec { color: #D6ACD6; } /* declaration */
+ .var { color: #76D4D6; } /* variable name */
+ .fun { color: #d6acd6; } /* function name */
+
+/* --- responsive-viewport.less --- */
+/* --- print.less --- */
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/uswds/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/uswds/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/uswds/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/vapor/skin.css b/jspwiki-war/src/main/webapp/templates/default/skins/vapor/skin.css
new file mode 100644
index 0000000000..0f94d5b614
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/vapor/skin.css
@@ -0,0 +1,729 @@
+/*
+inspired by Bootswatch theme of the same name
+from https://github.com/thomaspark/bootswatch/
+MIT Licensed
+*/
+html {
+ /* 1. Core Hue Shifts (Vapor is Purple/Violet based) */
+ --hue: 275;
+ --accent-hue: 320; /* Hot Pink / Magenta */
+
+ /* 2. Text Colors */
+ --text-color-normal: #cdb9df; /* Soft Purple-White */
+ --text-color-light: #80679b; /* Muted Purple */
+ --text-color-richer: #ffffff; /* Bright White */
+ --text-color-highlight: #ff00ab; /* Neon Pink */
+
+ /* 3. Links and Accents */
+ --link-color: #32fbe2; /* Neon Cyan */
+ --accent-color: #ff00ab; /* Neon Pink */
+ --error-color: #ff5e9c; /* Vapor Pink-Red */
+
+ /* 4. Buttons */
+ --button-background: #442671; /* Deep Purple */
+ --button-text-color: #ffffff;
+ --button-active: #ff00ab;
+ --button-active-darker: #c20082;
+
+ /* 5. Backgrounds (The deep space purple) */
+ --background: #1a0933; /* Dark Space Background */
+ --background-sidebar: #261447; /* Lighter Purple */
+ --background-light: #261447;
+ --background-lighter: #442671;
+ --background-light-solid: #261447;
+
+ --background-dropdown: #1a0933;
+ --background-dialog: #1a0933;
+
+ /* 6. Borders (Neon outlines) */
+ --border-color: #442671;
+
+ /* 7. Contextual Colors (Vapor Neon Palette) */
+ --context-primary: #6f42c1; /* Deep Purple */
+ --context-success: #32fbe2; /* Cyan */
+ --context-info: #00d5ff; /* Bright Blue */
+ --context-info-darker: #00a8cc;
+ --context-warning: #ff9100; /* Neon Orange */
+ --context-error: #ff5e9c; /* Hot Pink/Red */
+
+ --color-black: #0d0221;
+ --color-white: #ffffff;
+
+ /* 8. UI Constants */
+ --wikiTriangleColor: #32fbe2; /* Cyan Triangles */
+ --wikiTriangleSize: 4.8px;
+ --padding-base-horizontal: 12px;
+ --padding-base-vertical: 6px;
+}
+
+
+::selection {
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+/* --- BOOTSTRAP --- */
+.titlebox {
+ background-color: var(--background-light);
+}
+.panel {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.panel-default .panel-heading {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:inherit;
+}
+
+.list-group-item {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+
+.nav-tabs {
+ border-color: var(--border-color);
+}
+.nav-tabs > li > a {
+ color:inherit;
+}
+.nav-tabs > li > a:hover {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:inherit;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active {
+ background:transparent;
+ color:var(--text-color-richer);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background);
+}
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+/*.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+
+}*/
+.nav > li > a:hover, .nav > li > a:focus {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+.btn-default,
+.default {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn:hover, .btn:focus, .btn.focus,
+.btn-default:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+.btn.disabled:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+}
+.btn-default:active,
+.btn-default:active:hover,
+.btn-default.active,
+.btn-default.active:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--accent-color);
+}
+
+.dropdown-menu {
+ background-color: var(--background-dropdown);
+ border-color: var(--border-color);
+}
+.dropdown-header {
+ color:var(--text-color-richer);
+}
+.dropdown-menu .divider {
+ background-color: var(--border-color);
+}
+.dropdown-menu > li > a {
+ color:var(--text-color-normal);
+}
+.dropdown-menu > li > a:hover {
+ background-color: var(--background-lighter);
+ color:inherit;
+}
+
+.form-control {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+}
+.form-control:focus {
+ border-color: var(--accent-color);
+}
+.form-control[disabled] {
+ background-color: transparent;
+ border-color: var(--border-color);
+}
+.form-frame {
+ border-color: var(--border-color);
+}
+
+label.form-switch > input[type=checkbox],
+input[type=checkbox].form-switch {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ background-color:var(--background-light);
+ border:1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:hover,
+input[type=checkbox].form-switch:hover {
+ box-shadow:inset -1.25em 0 0 1px var(--text-color-normal);
+ border: 1px solid var(--text-color-normal);
+}
+label.form-switch > input[type=checkbox]:checked,
+input[type=checkbox].form-switch:checked {
+ box-shadow: inset 1.25em 0 0 1px var(--button-active);
+ border: 1px solid var(--button-active);
+}
+label.form-switch > input[type=checkbox]:checked:hover,
+input[type=checkbox].form-switch:checked:hover {
+ box-shadow:inset 1.25em 0 0 1px var(--button-active-darker);
+ border: 1px solid var(--button-active-darker);
+}
+label.form-switch > input[type=checkbox]:focus,
+input[type=checkbox].form-switch:focus {
+ background:none !important;
+}
+/*
+.form-group .btn.active {
+ color:var(--text-color-normal);
+ background-color:var(--context-info);
+}
+*/
+
+select,
+.form-group select {
+ border-color: var(--border-color);
+ color:var(--text-color-normal);
+
+ background-color: var(--background-light);
+ background-image:
+ linear-gradient(120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) ),
+ linear-gradient(-120deg, var(--wikiTriangleColor) var(--wikiTriangleSize), transparent var(--wikiTriangleSize) );
+
+ background-position:
+ calc( var(--padding-base-horizontal) - 1px + var(--wikiTriangleSize)/2 ) calc(var(--padding-base-vertical)*2),
+ calc( var(--padding-base-horizontal) - var(--wikiTriangleSize)*3/2 ) calc(var(--padding-base-vertical)*2);
+
+
+}
+
+input[type=checkbox]:focus,
+select:focus,
+.form-group select:focus {
+ outline-color: var(--accent-color);
+}
+
+.modal {
+ background-color: var(--background-dropdown);
+ color:var(--text-color-normal);
+}
+
+/*pagination.less*/
+.pagination {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+}
+.pagination a {
+ color:var(--link-color);
+ text-decoration:none;
+}
+.pagination .cursor,
+.pagination a:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color: var(--accent-color);
+}
+
+/* --- JSPWiki --- */
+
+/* --- variables.less --- */
+
+/* --- type.less --- */
+
+hr,.hr {
+ border-color: var(--border-color);
+}
+
+mark, .highlight {
+ background-color: var(--accent-color) !important;
+ color:var(--text-color-highlight);
+}
+
+span.text-white, div.text-white, .bg.dark + .bg-overlay { color:var(--text-color-normal); }
+/*span.text-black, div.text-black, .bg.light + .bg-overlay { color:(var(--text-???); } */
+
+.text-primary { color: var(--context-primary); }
+.text-success { color: var(--context-success); }
+.text-info { color: var(--context-info); }
+.text-warning { color: var(--context-warning); }
+.text-error,
+.text-danger { color: var(--context-error); }
+
+/* primary */
+.panel-primary > .panel-heading,
+.bg-primary {
+ background-color: var(--context-primary);
+ border-color: var(--context-primary);
+ color:var(--color-white);
+}
+.panel-primary > .panel-heading a:link,
+.bg-primary a:link {
+ color:var(--color-black);
+}
+/* success */
+.panel-success > .panel-heading,
+.success,
+.bg-success {
+ background-color: var(--context-success);
+ border-color: var(--context-success);
+ color:var(--color-black);
+}
+.panel-success > .panel-heading a:link,
+.success a:link,
+.bg-success a:link {
+ text-decoration:underline;
+}
+/* info */
+.panel-info > .panel-heading,
+.info, .information,
+.bg-info {
+ background-color: var(--context-info);
+ border-color: var(--context-info);
+ color:var(--color-black);
+}
+.panel-info > .panel-heading a:link,
+.info a:link, .information a:link,
+.bg-info a:link {
+ text-decoration:underline;
+}
+/* warning */
+.panel-warning > .panel-heading,
+.alert-warning,
+.warning,
+.bg-warning {
+ background-color: var(--context-warning);
+ border-color: var(--context-warning);
+ color:var(--color-black);
+}
+.panel-warning > .panel-heading a:link,
+.alert-warning a:link,
+.warning a:link,
+.bg-warning a:link {
+ text-decoration:underline;
+}
+/* danger, error */
+.panel-danger > .panel-heading,
+.error,.danger,
+.bg-danger {
+ background-color: var(--context-error);
+ border-color: var(--context-error);
+ color:var(--color-black);
+}
+.panel-danger > .panel-heading a:link,
+.error a:link,.danger a:link,
+.bg-danger a:link {
+ text-decoration:underline;
+}
+
+span.label { color:var(--color-black); }
+
+pre {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+code,
+tt {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+
+a.list-group-item:hover,
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+ color:inherit;
+}
+
+.tree ul li::before,
+.tree ul li::after {
+ background: var(--border-color);
+}
+
+.list-hover li:hover {
+ background-color:var(--background-lighter);
+}
+
+.hover {
+ background-color:var(--background-lighter);
+}
+
+a.slimbox-link:after,
+.slimbox-btn:before,
+a:visited,
+a:link { color:var(--link-color); }
+
+a.createpage {
+ color:var(--error-color);
+}
+
+.interwiki-raw::after,
+a.interwiki[href$="skin=raw"]::after,
+.interwiki-reader::after,
+a.interwiki[href$="skin=reader"]::after,
+.interwiki-edit::after,
+a.interwiki[href*="Edit.jsp?page="]::after,
+.interwiki-group::after,
+a.interwiki[href*="Group.jsp?group="]::after,
+a.interwiki[href^="rss.jsp"]::after {
+ background-color:var(--background-lighter);
+ color:var(--accent-color);
+}
+
+.editsection,
+.hashlink {
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--link-color);
+}
+.editsection:hover,
+h2 .editsection:hover,
+h3 .editsection:hover,
+h4 .editsection:hover,
+h2 .hashlink:hover,
+h3 .hashlink:hover,
+h4 .hashlink:hover {
+ background-color: var(--background-lighter);
+ border-color: var(--border-color);
+ color:var(--link-color);
+ opacity:1;
+}
+
+div.dropcaps > span.dropcaps {
+ color: var(--text-color-highlight);
+}
+blockquote,
+.dialog .quote-item {
+ border-color:var(--text-color-highlight);
+}
+.page-break {
+ border-color: var(--border-color);
+}
+
+
+/* --- grid.less --- */
+/* --- tables.less --- */
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.wikitable > thead > tr > th,
+.wikitable > tbody > tr > th,
+.wikitable > tfoot > tr > th,
+.wikitable > thead > tr > td,
+.wikitable > tbody > tr > td,
+.wikitable > tfoot > tr > td,
+.wikitable tr:first-child th {
+ border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered tr:first-child th,
+.table-bordered tr:first-child td {
+ border-color: var(--border-color);
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+ border-color: var(--border-color);
+}
+
+.table-hover > tbody > tr:nth-of-type(odd):hover,
+.table-hover > tbody > tr:nth-child(odd):hover > td,
+.table-hover > tbody > tr:nth-child(odd):hover > th,
+.table-hover > tbody > tr:hover {
+ background-color: var(--background-lighter);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) ,
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: var(--background-light);
+}
+[class*=zebra] .odd {
+ background-color: var(--background-light);
+}
+
+
+/* --- TableX.Sort.less --- */
+.sortable th:hover {
+ background-color: var(--background-lighter);;
+}
+.sortable th.up:after,
+.sortable th.up:hover:after {
+ border-bottom-color: var(--accent-color);
+ opacity:1;
+}
+.sortable th:hover:after,
+.sortable th.down:after,
+.sortable th.down:hover:after {
+ border-top-color: var(--accent-color);
+ opacity:1;
+}
+
+/* --- TableX.Filter.less --- */
+/* --- forms.less --- */
+/* --- modals.less --- */
+
+/* --- fontjspwiki/font-jspwiki.less --- */
+/* --- dropdown.less --- */
+
+/* --- pagination.less --- */
+/* --- Tips.less --- */
+.tip-link,
+.tip-link:hover {
+ color: var(--link-color);
+}
+/* --- Magnify.less --- */
+/* --- Viewer.less --- */
+/* --- Viewer.Slimbox.less --- */
+/* --- Viewer.Carousel.less --- */
+/* --- Template.View.less --- */
+html body .header, html body .footer {
+ background-image: -webkit-radial-gradient(circle, var(--background-light), var(--background));
+ background-image: radial-gradient(circle, var(--background-light), var(--background) );
+ color:var(--text-color-normal);
+}
+a.logo { border-color: var(--border-color); }
+
+
+div.admin .formcontainer {
+ /*.default*/
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+.admin .formcontainer table {
+ border-color: var(--border-color);
+ /*
+ .table;
+ .table-bordered;
+ .table-striped;
+ */
+}
+.admin-user-form > div#userlist .list-group-item.new-user{
+ background-color: var(--background-light);
+ border-color: var(--border-color);
+ color:var(--text-color-richer);
+}
+
+
+
+
+/* --- Template.UserBox.less --- */
+.login-form {
+ background-color: var(--background-dialog);
+ border:1px solid var(--border-color);
+}
+.login-form hr { border-color:var(--border-color); }
+
+
+/* --- Template.SearchBox.less --- */
+/* --- Template.Nav.less --- */
+.badge,
+.header > .navigation .nav > li > a > .badge {
+ background-color:var(--background-lighter);
+ color:var(--text-color-normal);
+}
+
+.header > .navigation .nav .btn-xs .badge {
+ background-color: var(--background-lighter);
+}
+
+/* --- Template.Content.less --- */
+body, .content {
+ background-color: var(--background);
+ color:var(--text-color-normal);
+ overflow-y: auto;
+}
+.content:after {
+ background: var(--background-sidebar);
+}
+/* --- Template.Attach.less --- */
+/* --- Template.Diff.less --- */
+.diffadd { background-color:var(--context-success); color:var(--color-black); }
+.diffrem { background:var(--context-error); color:var(--color-black); }
+
+/* --- Template.Search.less --- */
+
+form#searchform2 + div .fragment {
+ color: var(--text-color-richer);
+}
+form#searchform2 + div .gb-bar {
+ background-color: var(--context-warning);
+}
+
+/* --- Template.Workflow.less --- */
+/* --- Template.Edit.less --- */
+
+.editform input[type="text"]:focus,
+.dialog.find input[type="text"]:focus,
+.editform textarea:focus,
+.dialog.find textarea:focus {
+ background-color:var(--background-lighter);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+}
+.ajaxpreview {
+ border-color:var(--border-color);
+}
+.edit-area ~ .ajaxpreview {
+ border-left-color:var(--border-color);
+}
+
+/* --- Dialog.less --- */
+.dialog {
+ background-color: var(--background-dialog);
+ border-color: var(--border-color);
+}
+.dialog .caption {
+ border-color: var(--border-color);
+ color: var(--text-color-normal);
+}
+.dialog.selection .body .item:hover {
+ background-color: var(--background-lighter);
+}
+.dialog.selection .body .divider {
+ background-color: var(--border-color);
+}
+
+.dialog.find [name=tbTEXTSEL] { /*same as selected text*/
+ color:var(--accent-color);
+ background-color: var(--color-black);
+}
+
+
+
+/* --- Template.Preview.less --- */
+
+/* --- ImagePlugin.less --- */
+/* --- IndexPlugin.less --- */
+
+.index .header {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+}
+.index .header:hover {
+ background-color:var(--background-light);
+}
+.index .header a {
+ color:var(--text-color-richer);
+}
+.index .header a:hover {
+ background-color:var(--background-lighter);
+}
+.index > .section a {
+ color:var(--text-color-richer);
+}
+
+
+/* --- TOCPlugin.less --- */
+
+.toc ul li:hover {
+ background-color:var(--background-lighter);
+}
+
+/* --- WeblogPlugin.less --- */
+/* --- RecentChangesPlugin.less --- */
+
+.recentchanges .date {
+ border-color:var(--border-color);
+}
+/* --- CommentBox.less --- */
+
+
+/* --- GraphBar.less --- */
+.gb-group {
+ background-color:var(--background-light);
+ border:1px solid var(--border-color);
+}
+
+/* --- Tabs.less --- */
+/* --- Accordion.less --- */
+/* --- Columns.less --- */
+.columns.border,
+.columns.border > .col:not(:last-child) {
+ border-color:var(--border-color);
+}
+.columns.hover .col:hover {
+ background-color: var(--background-lighter);
+}
+
+
+/* --- Collapsible.less --- */
+.bullet, .bullet.clpse { border-left-color: var(--text-color-normal); }
+.bullet.clpse:hover { border-left-color: var(--text-color-richer); }
+
+.bullet.xpand { border-top-color: var(--text-color-normal); }
+.bullet.xpand:hover { border-top-color: var(--text-color-richer); }
+
+/* --- Category.less --- */
+.category-link {
+ border-color:var(--border-color);
+}
+/* --- Flip.less --- */
+/* --- Invisibles.less --- */
+/* --- prettify.less --- */
+ .prettify pre, .prettify-nonum pre, pre.prettylines {
+ background-color:var(--background-light);
+ border-color:var(--border-color);
+ color:var(--text-color-richer);
+ }
+ .pln { color: #cccccc; } /* plain text */
+ .str { color: #99cc99; } /* string content */
+ .kwd { color: #ffeea6; } /* keyword */
+ .com { color: #8a8a80; } /* comment */
+ .typ { color: #bbdaff; } /* type name */
+ .lit { color: #FCA369; } /* literal value */
+ .pun { color: #cda869; } /* punctuation */
+ .opn { color: #ffffff; } /* lisp open bracket */
+ .clo { color: #ffffff; } /* lisp close bracket */
+ .tag { color: #78AAD6; } /* markup tag name */
+ .atn { color: #ffc58f; } /* markup attribute name */
+ .atv { color: #FFD479; } /* markup attribute value */
+ .dec { color: #D6ACD6; } /* declaration */
+ .var { color: #76D4D6; } /* variable name */
+ .fun { color: #d6acd6; } /* function name */
+
+/* --- responsive-viewport.less --- */
+/* --- print.less --- */
diff --git a/jspwiki-war/src/main/webapp/templates/default/skins/vapor/skin.js b/jspwiki-war/src/main/webapp/templates/default/skins/vapor/skin.js
new file mode 100644
index 0000000000..39d50ac082
--- /dev/null
+++ b/jspwiki-war/src/main/webapp/templates/default/skins/vapor/skin.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Apache Software Foundation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+