--- a/devtools/client/jsonview/converter-child.js
+++ b/devtools/client/jsonview/converter-child.js
@@ -119,16 +119,17 @@ Converter.prototype = {
     this.listener.onStartRequest(request, context);
 
     // Initialize stuff.
     let win = NetworkHelper.getWindowForRequest(request);
     this.data = exportData(win, request);
     win.addEventListener("DOMContentLoaded", event => {
       win.addEventListener("contentMessage", onContentMessage, false, true);
     }, {once: true});
+    keepThemeUpdated(win);
 
     // Send the initial HTML code.
     let bytes = encoder.encode(initialHTML(win.document));
     this.convertAndSendBuffer(request, context, bytes.buffer);
 
     // Create an array to store data until the encoding is determined.
     this.encodingArray = [];
   },
@@ -317,16 +318,28 @@ function initialHTML(doc) {
       "dir": Services.locale.isAppLocaleRTL ? "rtl" : "ltr"
     }) +
     head.outerHTML +
     startTag("body") +
     startTag("div", {"id": "content"}) +
     startTag("plaintext", {"id": "json"});
 }
 
+function keepThemeUpdated(win) {
+  let listener = function () {
+    let theme = Services.prefs.getCharPref("devtools.theme");
+    win.document.documentElement.className = "theme-" + theme;
+  };
+  Services.prefs.addObserver("devtools.theme", listener);
+  win.addEventListener("unload", function (event) {
+    Services.prefs.removeObserver("devtools.theme", listener);
+    win = null;
+  }, {once: true});
+}
+
 // Chrome <-> Content communication
 function onContentMessage(e) {
   // Do not handle events from different documents.
   let win = this;
   if (win != e.target) {
     return;
   }
 

--- a/devtools/client/jsonview/test/browser.ini
+++ b/devtools/client/jsonview/test/browser.ini
@@ -38,11 +38,12 @@ skip-if = (os == 'linux' && bits == 32 &
 [browser_jsonview_invalid_json.js]
 [browser_jsonview_manifest.js]
 [browser_jsonview_nojs.js]
 [browser_jsonview_nul.js]
 [browser_jsonview_object-type.js]
 [browser_jsonview_save_json.js]
 support-files =
   !/toolkit/content/tests/browser/common/mockTransfer.js
+[browser_jsonview_theme.js]
 [browser_jsonview_slash.js]
 [browser_jsonview_valid_json.js]
 [browser_json_refresh.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/jsonview/test/browser_jsonview_theme.js
@@ -0,0 +1,34 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_JSON_URL = URL_ROOT + "valid_json.json";
+
+add_task(function* () {
+  info("Test JSON theme started.");
+
+  let oldPref = SpecialPowers.getCharPref("devtools.theme");
+  SpecialPowers.setCharPref("devtools.theme", "light");
+
+  yield addJsonViewTab(TEST_JSON_URL);
+
+  is(yield getTheme(), "theme-light", "The initial theme is light");
+
+  SpecialPowers.setCharPref("devtools.theme", "dark");
+  is(yield getTheme(), "theme-dark", "Theme changed to dark");
+
+  SpecialPowers.setCharPref("devtools.theme", "firebug");
+  is(yield getTheme(), "theme-firebug", "Theme changed to firebug");
+
+  SpecialPowers.setCharPref("devtools.theme", "light");
+  is(yield getTheme(), "theme-light", "Theme changed to light");
+
+  SpecialPowers.setCharPref("devtools.theme", oldPref);
+});
+
+function getTheme() {
+  return getElementAttr(":root", "class");
+}

--- a/devtools/client/jsonview/test/doc_frame_script.js
+++ b/devtools/client/jsonview/test/doc_frame_script.js
@@ -53,16 +53,23 @@ addMessageListener("Test:JsonView:GetEle
 
 addMessageListener("Test:JsonView:GetElementVisibleText", function (msg) {
   let {selector} = msg.data;
   let element = content.document.querySelector(selector);
   let text = element ? element.innerText : null;
   sendAsyncMessage(msg.name, {text: text});
 });
 
+addMessageListener("Test:JsonView:GetElementAttr", function (msg) {
+  let {selector, attr} = msg.data;
+  let element = content.document.querySelector(selector);
+  let text = element ? element.getAttribute(attr) : null;
+  sendAsyncMessage(msg.name, {text: text});
+});
+
 addMessageListener("Test:JsonView:FocusElement", function (msg) {
   let {selector} = msg.data;
   let element = content.document.querySelector(selector);
   if (element) {
     element.focus();
   }
   sendAsyncMessage(msg.name);
 });

--- a/devtools/client/jsonview/test/head.js
+++ b/devtools/client/jsonview/test/head.js
@@ -118,16 +118,24 @@ function getElementText(selector) {
   };
 
   return executeInContent("Test:JsonView:GetElementText", data)
   .then(result => {
     return result.text;
   });
 }
 
+function getElementAttr(selector, attr) {
+  info("Get attribute '" + attr + "' for element '" + selector + "'");
+
+  let data = {selector, attr};
+  return executeInContent("Test:JsonView:GetElementAttr", data)
+  .then(result => result.text);
+}
+
 function focusElement(selector) {
   info("Focus element: '" + selector + "'");
 
   let data = {
     selector: selector
   };
 
   return executeInContent("Test:JsonView:FocusElement", data);