{"id":26295,"date":"2016-04-05T21:01:37","date_gmt":"2016-04-05T13:01:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26295"},"modified":"2016-04-06T08:25:33","modified_gmt":"2016-04-06T00:25:33","slug":"personalize-firefox-dev-tools-theme","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/","title":{"rendered":"How to Hack & Personalize Your Firefox Developer Tools Theme"},"content":{"rendered":"

Themes are a personal thing for us developers, it\u2019s not just about beautification of editors or tools. It\u2019s about making the screen that we\u2019ll be staring at (without blinking much) more bearable to work at for hours on end and in a productive manner. Firefox has two themes for developer tools: dark and light. Both are great, but the options are still limited without a way to personalize them.<\/p>\n

Now, Firefox uses a combination of XUL and CSS for its UI, which means most of its appearance can be tweaked using just CSS. Mozilla provides a way for users to configure its products\u2019 appearance with a CSS file called \"userChrome.css\". You can add custom style rules to that CSS file<\/strong> and it\u2019ll be reflected on the Mozilla products.<\/p>\n

In this post we will be making use of that same CSS file to personalize the developer tools in Firefox.<\/p>\n

First, we need to find that CSS file, or make one and put it in the right place. One quick way to find the folder that will house \"userChrome.css\" is by going to about:support<\/code> in the browser and clicking the \"Show Folder\" button next to the label \"Profile Folder\"<\/strong>. This will open Firefox\u2019s current profile folder.<\/p>\n

In the profile folder, you\u2019ll see a folder named \"chrome\". If it\u2019s not there, create one and create a \"userChrome.css\" in it. Now that the setting up of the file is done, let\u2019s move onto code.<\/p>\n

:root.theme-dark {\r\n  --theme-body-background: #050607 !important;\r\n  --theme-sidebar-background: #101416 !important;\r\n\r\n  --theme-tab-toolbar-background: #161A1E !important;\r\n  --theme-toolbar-background: #282E35 !important;\r\n  --theme-selection-background: #478DAD !important;\r\n\r\n  --theme-body-color: #D6D6D6 !important;\r\n  --theme-body-color-alt: #D6D6D6 !important;\r\n  --theme-content-color1: #D6D6D6 !important;\r\n  --theme-content-color2: #D6D6D6 !important;\r\n  --theme-content-color3: #D6D6D6 !important;\r\n\r\n  --theme-highlight-green: #8BF9A6 !important;\r\n  --theme-highlight-blue: #00F9FF !important;\r\n  --theme-highlight-bluegrey: white !important;\r\n  --theme-highlight-lightorange: #FF5A2C !important;\r\n  --theme-highlight-orange: yellow !important;\r\n  --theme-highlight-red: #FF1247 !important;\r\n  --theme-highlight-pink: #F02898 !important;\r\n}<\/pre>\n
What you see above is the code that I added to my \"userChrome.css\" file to change the appearance of developers tools from this<\/p>\n
 \"devtool<\/figure>\n
to this:<\/p>\n
\"devtool<\/figure>\n
I only wanted to improve the contrast a bit more with darker background and brighter text in the dark theme (also I\u2019m not good at color schemes), so I stayed with some basic colors typically used in dark themes. If you are better with colors, experiment on your own with the colors as you see fit to find a better match for the theme you are using.<\/p>\n
The code is just a list of CSS color variables used to color the various UI parts of DevTools. We found the code in a file called \"variables.css\" in a compressed file named \u201comni.ja\u201d:<\/p>\n
In Windows, the file is located at:<\/p>\n
F:\/firefox\/browser\/omni.ja<\/code>. Replace the F:<\/strong> with the drive where you\u2019ve installed your Firefox in.<\/p>\n
In OSX, the file is located at:<\/p>\n
~\/Applications\/Firefox.app\/Contents\/Resources\/browser\/omni.ja<\/code>.<\/p>\n
These are compressed Java files. In Windows, you can rename the .ja<\/code> extension to .zip<\/code> and use the native Windows Explorer extract utility to unload the files within it. In OSX, go to Terminal and run unzip omni.ja<\/code>. Bear in mind to make a copy of the file in another directory before doing so.<\/p>\n
Once omni.ja has beeen extracted, you can find the file at \/chrome\/devtools\/skin\/variables.css<\/code>; yes, the Firefox DevTools skin is under a folder named chrome<\/code>. In the variables.css<\/em>, you\u2019ll see a bunch of color variables used for both the light and dark themes as follows<\/p>\n
\r\n:root.theme-light {\r\n  --theme-body-background: #fcfcfc;\r\n  --theme-sidebar-background: #f7f7f7;\r\n  --theme-contrast-background: #e6b064;\r\n\r\n  --theme-tab-toolbar-background: #ebeced;\r\n  --theme-toolbar-background: #f0f1f2;\r\n  --theme-selection-background: #4c9ed9;\r\n  --theme-selection-background-semitransparent: rgba(76, 158, 217, .23);\r\n  --theme-selection-color: #f5f7fa;\r\n  --theme-splitter-color: #aaaaaa;\r\n  --theme-comment: #757873;\r\n\r\n  --theme-body-color: #18191a;\r\n  --theme-body-color-alt: #585959;\r\n  --theme-content-color1: #292e33;\r\n  --theme-content-color2: #8fa1b2;\r\n  --theme-content-color3: #667380;\r\n\r\n  --theme-highlight-green: #2cbb0f;\r\n  --theme-highlight-blue: #0088cc;\r\n  --theme-highlight-bluegrey: #0072ab;\r\n  --theme-highlight-purple: #5b5fff;\r\n  --theme-highlight-lightorange: #d97e00;\r\n  --theme-highlight-orange: #f13c00;\r\n  --theme-highlight-red: #ed2655;\r\n  --theme-highlight-pink: #b82ee5;\r\n\r\n  \/* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. *\/\r\n  --theme-graphs-green: #85d175;\r\n  --theme-graphs-blue: #83b7f6;\r\n  --theme-graphs-bluegrey: #0072ab;\r\n  --theme-graphs-purple: #b693eb;\r\n  --theme-graphs-yellow: #efc052;\r\n  --theme-graphs-orange: #d97e00;\r\n  --theme-graphs-red: #e57180;\r\n  --theme-graphs-grey: #cccccc;\r\n  --theme-graphs-full-red: #f00;\r\n  --theme-graphs-full-blue: #00f;\r\n}\r\n\r\n:root.theme-dark {\r\n  --theme-body-background: #14171a;\r\n  --theme-sidebar-background: #181d20;\r\n  --theme-contrast-background: #b28025;\r\n\r\n  --theme-tab-toolbar-background: #252c33;\r\n  --theme-toolbar-background: #343c45;\r\n  --theme-selection-background: #1d4f73;\r\n  --theme-selection-background-semitransparent: rgba(29, 79, 115, .5);\r\n  --theme-selection-color: #f5f7fa;\r\n  --theme-splitter-color: black;\r\n  --theme-comment: #757873;\r\n\r\n  --theme-body-color: #8fa1b2;\r\n  --theme-body-color-alt: #b6babf;\r\n  --theme-content-color1: #a9bacb;\r\n  --theme-content-color2: #8fa1b2;\r\n  --theme-content-color3: #5f7387;\r\n\r\n  --theme-highlight-green: #70bf53;\r\n  --theme-highlight-blue: #46afe3;\r\n  --theme-highlight-bluegrey: #5e88b0;\r\n  --theme-highlight-purple: #6b7abb;\r\n  --theme-highlight-lightorange: #d99b28;\r\n  --theme-highlight-orange: #d96629;\r\n  --theme-highlight-red: #eb5368;\r\n  --theme-highlight-pink: #df80ff;\r\n\r\n  \/* Colors used in Graphs, like performance tools. Mostly similar to some \"highlight-*\" colors. *\/\r\n  --theme-graphs-green: #70bf53;\r\n  --theme-graphs-blue: #46afe3;\r\n  --theme-graphs-bluegrey: #5e88b0;\r\n  --theme-graphs-purple: #df80ff;\r\n  --theme-graphs-yellow: #d99b28;\r\n  --theme-graphs-orange: #d96629;\r\n  --theme-graphs-red: #eb5368;\r\n  --theme-graphs-grey: #757873;\r\n  --theme-graphs-full-red: #f00;\r\n  --theme-graphs-full-blue: #00f;\r\n}\r\n<\/pre>\n
Pick the theme and variables you want to target and add them to your \"userChrome.css\".<\/p>\n
Here are some more screenshots of my developer tools\u2019 window.<\/p>\n
\"devtool<\/figure>\n
\"devtool<\/figure>\n
\"devtool<\/figure>\n
\"devtool<\/figure>\n
Want to customize Chrome\u2019s DevTools Theme instead? Check out this post<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
Themes are a personal thing for us developers, it\u2019s not just about beautification of editors or tools. It\u2019s about making the screen that we\u2019ll be staring at (without blinking much) more bearable to work at for hours on end and in a productive manner. Firefox has two themes for developer tools: dark and light. Both…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392],"tags":[34],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Hack & Personalize Your Firefox Developer Tools Theme - Hongkiat<\/title>\n<meta name=\"description\" content=\"Themes are a personal thing for us developers, it's not just about beautification of editors or tools. It's about making the screen that we'll be staring\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Hack & Personalize Your Firefox Developer Tools Theme\" \/>\n<meta property=\"og:description\" content=\"Themes are a personal thing for us developers, it's not just about beautification of editors or tools. It's about making the screen that we'll be staring\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-05T13:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-06T00:25:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/personalize-firefox-dev-tools-theme\/devtool-ui.jpg?new\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Hack & Personalize Your Firefox Developer Tools Theme\",\"datePublished\":\"2016-04-05T13:01:37+00:00\",\"dateModified\":\"2016-04-06T00:25:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/\"},\"wordCount\":567,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/personalize-firefox-dev-tools-theme\\\/devtool-ui.jpg?new\",\"keywords\":[\"Firefox\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/\",\"name\":\"How to Hack & Personalize Your Firefox Developer Tools Theme - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/personalize-firefox-dev-tools-theme\\\/devtool-ui.jpg?new\",\"datePublished\":\"2016-04-05T13:01:37+00:00\",\"dateModified\":\"2016-04-06T00:25:33+00:00\",\"description\":\"Themes are a personal thing for us developers, it's not just about beautification of editors or tools. It's about making the screen that we'll be staring\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/personalize-firefox-dev-tools-theme\\\/devtool-ui.jpg?new\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/personalize-firefox-dev-tools-theme\\\/devtool-ui.jpg?new\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/personalize-firefox-dev-tools-theme\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Hack & Personalize Your Firefox Developer Tools Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Hack & Personalize Your Firefox Developer Tools Theme - Hongkiat","description":"Themes are a personal thing for us developers, it's not just about beautification of editors or tools. It's about making the screen that we'll be staring","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/","og_locale":"en_US","og_type":"article","og_title":"How to Hack & Personalize Your Firefox Developer Tools Theme","og_description":"Themes are a personal thing for us developers, it's not just about beautification of editors or tools. It's about making the screen that we'll be staring","og_url":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-04-05T13:01:37+00:00","article_modified_time":"2016-04-06T00:25:33+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/personalize-firefox-dev-tools-theme\/devtool-ui.jpg?new","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Hack & Personalize Your Firefox Developer Tools Theme","datePublished":"2016-04-05T13:01:37+00:00","dateModified":"2016-04-06T00:25:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/"},"wordCount":567,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/personalize-firefox-dev-tools-theme\/devtool-ui.jpg?new","keywords":["Firefox"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/","url":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/","name":"How to Hack & Personalize Your Firefox Developer Tools Theme - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/personalize-firefox-dev-tools-theme\/devtool-ui.jpg?new","datePublished":"2016-04-05T13:01:37+00:00","dateModified":"2016-04-06T00:25:33+00:00","description":"Themes are a personal thing for us developers, it's not just about beautification of editors or tools. It's about making the screen that we'll be staring","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/personalize-firefox-dev-tools-theme\/devtool-ui.jpg?new","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/personalize-firefox-dev-tools-theme\/devtool-ui.jpg?new"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/personalize-firefox-dev-tools-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Hack & Personalize Your Firefox Developer Tools Theme"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Q7","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26295"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26295\/revisions"}],"predecessor-version":[{"id":26301,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26295\/revisions\/26301"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26295"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}