BandwidthOnDemand · hanstrompert · Mar 31, 2026 · Jan 27, 2026 · Mar 31, 2026 · Mar 31, 2026
diff --git a/README.md b/README.md
@@ -47,6 +47,22 @@ Like: `nsi-safnari -Dconfig.file=/path/to/prod.conf`. For further information
 you can look at
 the [Play site](http://www.playframework.com/documentation/2.2.x/Production).
 
+## Theming
+
+The web interface can be styled per organisation. All available themes are
+pre-built into the container image. To select a theme, set the `web.theme`
+property in your configuration overrides:
+
+```
+web.theme = "surfnet"
+```
+
+Available themes: `surfnet`, `ana`, `esnet`, `icair`.
+
+To add a new theme, create a `theme-<name>.less` file in
+`app/assets/css/` with the desired colour variables and an
+`@import "_shared.less";` at the bottom.
+
 ## PCE
 
 Safnari uses a JSON API to talk to the PCE (Path Computation Engine). Safnari is

diff --git a/app/assets/css/bootstrap-generic.less → app/assets/css/_bootstrap-generic.less b/app/assets/css/bootstrap-generic.less → app/assets/css/_bootstrap-generic.less
@@ -1,4 +1,3 @@
-@import "variables.less";
 
 /* table + paginator combo */
 

diff --git a/app/assets/css/bootstrap-modal.less → app/assets/css/_bootstrap-modal.less b/app/assets/css/bootstrap-modal.less → app/assets/css/_bootstrap-modal.less
@@ -1,4 +1,3 @@
-@import "variables.less";
 
 .modal-header {
     background-color: @titleBackground;

diff --git a/app/assets/css/bootstrap-navbar.less → app/assets/css/_bootstrap-navbar.less b/app/assets/css/bootstrap-navbar.less → app/assets/css/_bootstrap-navbar.less
@@ -1,5 +1,4 @@
-@import "variables.less";
-@import "mixins.less";
+@import "_mixins.less";
 
 .navbar {
     font-size: 15px;

diff --git a/app/assets/css/bootstrap-table.less → app/assets/css/_bootstrap-table.less b/app/assets/css/bootstrap-table.less → app/assets/css/_bootstrap-table.less
@@ -1,5 +1,4 @@
-@import "mixins.less";
-@import "variables.less";
+@import "_mixins.less";
 
 .table-bordered {
     border: 1px solid @grayDarker;

diff --git a/app/assets/css/generic.less → app/assets/css/_generic.less b/app/assets/css/generic.less → app/assets/css/_generic.less
@@ -1,5 +1,4 @@
-@import "variables.less";
-@import "mixins.less";
+@import "_mixins.less";
 
 body {
     font-family: Arial, sans-serif;

diff --git a/app/assets/css/layout.less → app/assets/css/_layout.less b/app/assets/css/layout.less → app/assets/css/_layout.less
@@ -1,5 +1,3 @@
-@import "variables.less";
-
 .wrapper {
     position: relative;
     width: 940px;

diff --git a/app/assets/css/mixins.less → app/assets/css/_mixins.less b/app/assets/css/mixins.less → app/assets/css/_mixins.less
diff --git a/app/assets/css/main.less → app/assets/css/_shared.less b/app/assets/css/main.less → app/assets/css/_shared.less
@@ -1,10 +1,9 @@
-@import "variables.less";
-@import "layout.less";
-@import "generic.less";
-@import "bootstrap-navbar.less";
-@import "bootstrap-generic.less";
-@import "bootstrap-table.less";
-@import "bootstrap-modal.less";
+@import "_layout.less";
+@import "_generic.less";
+@import "_bootstrap-navbar.less";
+@import "_bootstrap-generic.less";
+@import "_bootstrap-table.less";
+@import "_bootstrap-modal.less";
 
 .message {
     font-weight: bold;

diff --git a/app/assets/css/variables-surfnet.less → app/assets/css/theme-ana.less b/app/assets/css/variables-surfnet.less → app/assets/css/theme-ana.less
@@ -20,7 +20,7 @@
 @titleBackground:  #ffffff;  /* @blueSurf */
 @titleHz:          10px;
 @titleVr:          10px;
-@titleImage:       "../images/logo.png";
+@titleImage:       "../images/ana-logo.png";
 
 /* Menu colour scheme. */
 @menuBackground:   #4fb3cf;  /* @blueSurf */
@@ -56,3 +56,4 @@
 @footerLinkColour:      #08c;     /* #08c */
 @footerLinkHoverColour: #005580;  /* #005580 */
 
+@import "_shared.less";
diff --git a/app/assets/css/variables-esnet.less → app/assets/css/theme-esnet.less b/app/assets/css/variables-esnet.less → app/assets/css/theme-esnet.less
@@ -52,4 +52,6 @@
 @footerBackground:      #f1f1f1;
 @footerTextColour:      #333;
 @footerLinkColour:      #08c;
-@footerLinkHoverColour: #005580;
+@footerLinkHoverColour: #005580;
+
+@import "_shared.less";
diff --git a/app/assets/css/variables-icair.less → app/assets/css/theme-icair.less b/app/assets/css/variables-icair.less → app/assets/css/theme-icair.less
@@ -54,4 +54,6 @@
 @footerBackground:      #491a58;  /* @grayLight */
 @footerTextColour:      #ffffff;  /* #333 */
 @footerLinkColour:      #ffae00;  /* #08c */
-@footerLinkHoverColour: #d1c0de;  /* #005580 */
+@footerLinkHoverColour: #d1c0de;  /* #005580 */
+
+@import "_shared.less";
diff --git a/app/assets/css/theme-safnari.less b/app/assets/css/theme-safnari.less
@@ -0,0 +1,59 @@
+/* Old colouring scheme of main body kept for reference. */
+@blueSurf:        #4fb3cf;
+@blueSurfLight:   #85cadd;
+@blueSurfLighter: #ecf8fa;
+@blueSurfDark:    #0381a4;
+@blackLight:      #002f3c;
+
+/* Basic grays. */
+@white:           #ffffff;
+@grayLight:       #f1f1f1;
+@gray:            #ebebeb;
+@grayDark:        #d8dadc;
+@grayDarker:      #bfbfbf;
+
+ /* Colouring and layout of header */
+@titleTextColour:  #000000;
+@titlePaddingLeft: 95px;
+@titlePaddingTop:  30px;
+@titleHeight:      80px;
+@titleBackground:  #ffffff;  /* @blueSurf */
+@titleHz:          10px;
+@titleVr:          10px;
+@titleImage:       "../images/safnari-logo.png";
+
+/* Menu colour scheme. */
+@menuBackground:   #4fb3cf;  /* @blueSurf */
+@menuTextHover:    #ffffff;  /* @white */
+@menuTextActive:   #ffffff;  /* @white */
+@menuTextInactive: #002f3c;  /* @blackLight */
+@menuSelector:     #ffffff;  /* @white */
+
+/* Content block colour scheme. */
+@contentBackground:       #e9e9e9;  /* @grayLight */
+@contentHeaderBackground: #4fb3cf;  /* @blueSurf */
+@contentHeaderText:       #ffffff;  /* @white */
+@contentLinkColour:       #08c;     /* #08c */
+@contentLinkHoverColour:  #005580;  /* #005580 */
+@contentIconColour:       #0381a4;  /* @blueSurfDark */
+
+/* Connection details. */
+@connectionDetailsBackground: #ecf8fa; /* @blueSurfLighter */
+@connectionDetailsBorder:     #85cadd; /* @blueSurfLight */
+
+/* Colouring scheme of XML messages */
+@messageHeaderBackground: #cae8f0;  /* #cae8f0 */
+@messageTitleColour:      #333;     /* #333 */
+@messageTime:             #dc322f;  /* #dc322f; */
+@messageElementTag:       #008080;  /* #008080 */
+@messageElementContent:   #dc322f;  /* #dc322f */
+@messageNsTag:            #195f91;  /* #195f91 */
+@messageNsContents:       #93a1a1;  /* #93a1a1 */
+
+/* Footer colour scheme. */
+@footerBackground:      #f1f1f1;  /* @grayLight */
+@footerTextColour:      #333;     /* #333 */
+@footerLinkColour:      #08c;     /* #08c */
+@footerLinkHoverColour: #005580;  /* #005580 */
+
+@import "_shared.less";
diff --git a/app/assets/css/theme-surfnet.less b/app/assets/css/theme-surfnet.less
@@ -0,0 +1,59 @@
+/* Old colouring scheme of main body kept for reference. */
+@blueSurf:        #4fb3cf;
+@blueSurfLight:   #85cadd;
+@blueSurfLighter: #ecf8fa;
+@blueSurfDark:    #0381a4;
+@blackLight:      #002f3c;
+
+/* Basic grays. */
+@white:           #ffffff;
+@grayLight:       #f1f1f1;
+@gray:            #ebebeb;
+@grayDark:        #d8dadc;
+@grayDarker:      #bfbfbf;
+
+ /* Colouring and layout of header */
+@titleTextColour:  #000000;
+@titlePaddingLeft: 155px;
+@titlePaddingTop:  30px;
+@titleHeight:      80px;
+@titleBackground:  #ffffff;  /* @blueSurf */
+@titleHz:          10px;
+@titleVr:          10px;
+@titleImage:       "../images/surfnet-logo.png";
+
+/* Menu colour scheme. */
+@menuBackground:   #4fb3cf;  /* @blueSurf */
+@menuTextHover:    #ffffff;  /* @white */
+@menuTextActive:   #ffffff;  /* @white */
+@menuTextInactive: #002f3c;  /* @blackLight */
+@menuSelector:     #ffffff;  /* @white */
+
+/* Content block colour scheme. */
+@contentBackground:       #e9e9e9;  /* @grayLight */
+@contentHeaderBackground: #4fb3cf;  /* @blueSurf */
+@contentHeaderText:       #ffffff;  /* @white */
+@contentLinkColour:       #08c;     /* #08c */
+@contentLinkHoverColour:  #005580;  /* #005580 */
+@contentIconColour:       #0381a4;  /* @blueSurfDark */
+
+/* Connection details. */
+@connectionDetailsBackground: #ecf8fa; /* @blueSurfLighter */
+@connectionDetailsBorder:     #85cadd; /* @blueSurfLight */
+
+/* Colouring scheme of XML messages */
+@messageHeaderBackground: #cae8f0;  /* #cae8f0 */
+@messageTitleColour:      #333;     /* #333 */
+@messageTime:             #dc322f;  /* #dc322f; */
+@messageElementTag:       #008080;  /* #008080 */
+@messageElementContent:   #dc322f;  /* #dc322f */
+@messageNsTag:            #195f91;  /* #195f91 */
+@messageNsContents:       #93a1a1;  /* #93a1a1 */
+
+/* Footer colour scheme. */
+@footerBackground:      #f1f1f1;  /* @grayLight */
+@footerTextColour:      #333;     /* #333 */
+@footerLinkColour:      #08c;     /* #08c */
+@footerLinkHoverColour: #005580;  /* #005580 */
+
+@import "_shared.less";
diff --git a/app/assets/css/variables.less b/app/assets/css/variables.less
diff --git a/app/controllers/Configuration.scala b/app/controllers/Configuration.scala
@@ -79,6 +79,7 @@ class Configuration @Inject() (configuration: play.api.Configuration):
 
   // Web page footer information for main.scala.html.
   def WebParams: Map[String, String] = Map(
+    "theme" -> getStringOrFail("web.theme"),
     "favicon" -> getStringOrFail("web.favicon"),
     "footer" -> getStringOrFail("web.footer"),
     "contactURL" -> getStringOrFail("web.contactURL"),

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -13,7 +13,7 @@
         <title>@title</title>
         <link rel="stylesheet" media="screen" href="@routes.Assets.at("css/bootstrap.min.css")">
         <link rel="stylesheet" media="screen" href="@routes.Assets.at("css/font-awesome.min.css")">
-        <link rel="stylesheet" media="screen" href="@routes.Assets.at("css/main.css")">
+        <link rel="stylesheet" media="screen" href="@routes.Assets.at("css/theme-" + webParams("theme") + ".css")">
         <link rel="shortcut icon" type="image/png" href="@routes.Assets.at(webParams("favicon"))">
     </head>
     <body>

diff --git a/build.sbt b/build.sbt
@@ -62,6 +62,9 @@ lazy val root = (project in file("."))
     exportJars := true
   )
 
+// Compile all theme entry points (variables-*.less) instead of the default main.less
+Assets / LessKeys.less / includeFilter := "theme-*.less"
+
 Test / javaOptions += "-Dconfig.file=conf/test.conf"
 
 Test / testFrameworks := Seq(TestFrameworks.Specs2)

diff --git a/conf/application.conf b/conf/application.conf
@@ -90,12 +90,12 @@ safnari {
   connection.expiration.time = 1 day
 }
 
-# Deployment specific configuration for the nsi-safnari web page.  This
-# information is treated as runtime data and not static CSS layout.  For
-# static CSS layout configuration look at the app/assets/css/variables.less
-# file for customer colour and page layout that is built at compile time.
+# Deployment specific configuration for the nsi-safnari web page.
+# The theme selects the CSS colour scheme.  Available themes correspond to
+# the theme-<theme>.less files: safnari, surfnet, ana, esnet, icair.
 # ~~~~~
 web {
+  theme = "safnari"
   favicon = "images/favicon.png"
   footer = "SURFnet bv | Postbus 19035, 3501 DA Utrecht | T +31 302 305 305 | F +31 302 305 329 |"
   contactURL = "mailto:admin@surfnet.nl"
@@ -180,3 +180,6 @@ play.ws.ssl {
   #  ]
   #}
 }
+
+# auto apply evolutions
+play.evolutions.db.default.autoApply = true
diff --git a/public/images/ana-logo.png b/public/images/ana-logo.png
diff --git a/public/images/safnari-logo.png b/public/images/safnari-logo.png
diff --git a/public/images/logo.png → public/images/surfnet-logo.png b/public/images/logo.png → public/images/surfnet-logo.png
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		@import "variables.less";

		/* table + paginator combo */

Expand Down