{title:'Stylesheets', updated:'8.1.0,9.0.0'}

The sample root page renders in the default "devops" look-and-feel:

| http://localhost:10000

The sample root page provides a dropdown widget to try out the other default look-and-feels:

For example, the "light" look-and-feel:

| http://localhost:10000/?stylesheet=styles%2Flight.css

And the "dark" look-and-feel:

| http://localhost:10000/?stylesheet=styles%2Fdark.css

The stylesheet URL is controlled by the {@link oaj.html.annotation.HtmlDocConfig#stylesheet() @HtmlDocConfig(stylesheet)} annotation. The {@link oajr.config.BasicUniversalConfig} interface defines the stylesheet served up as a static file:

| @HtmlDocConfig( | stylesheet="$C{REST/theme,servlet:/htdocs/themes/devops.css}" | ) | public interface BasicUniversalConfig {...}

The "$C{REST/theme,servlet:/htdocs/themes/devops.css}" variable says to use the URI defined in your servlet's config file, if there is one, and to default to serving up the file htdocs/themes/devops.css which is in the resource folder of the juneau-rest-server module.

To provide your own stylesheet, simply override the stylesheet attribute and point to a different file:

| @HtmlDocConfig( | stylesheet="servlet:/htdocs/themes/my-style.css" | ) | public class MyResourceBaseClass extends BasicRestServlet {...}

You can try out different stylesheets by passing in a stylesheet attribute in the request URL. The example above show this in use.

In case you're curious about how the menu item works, it's defined via a widget:

| @Rest(...) | @HtmlDocConfig( | widgets={ | PoweredByApache. class, | ContentTypeMenuItem. class, | StyleMenuItem. class | }, | navlinks={ | "options: ?method=OPTIONS", | "$W{ContentTypeMenuItem}", | "$W{StyleMenuItem}", | "source: $C{Source/gitHub}/org/apache/juneau/examples/rest/$R{servletClassSimple}.java" | } | ) | public class RootResources extends BasicRestServletGroup {...}

The StyleMenuItem is a widget that extends from {@link oajr.widget.MenuItemWidget}, a specialized widget for creating pop-up menus. In the case of StyleMenuItem, it's simply returning a list of links wrapped in a div tag:

| import static org.apache.juneau.dto.html5.HtmlBuilder.*; | | public class StyleMenuItem extends MenuItemWidget { | | private static final String[] BUILT_IN_STYLES = {"devops", "light", "original", "dark"}; | | @Override /* Widget */ | public String getLabel(RestRequest req) { | return "styles"; | } | | @Override /* MenuItemWidget */ | public Div getContent(RestRequest req) throws Exception { | Div div = div(); | for (String style : BUILT_IN_STYLES) { | java.net.URI uri = req.getUri(true, new AMap<String,String>().append("stylesheet", "styles/"+s+".css")); | div.children(a(uri, style), br()); | } | return div; | } | }