diff --git a/sanic/pages/css.py b/sanic/pages/css.py
index cdd2607c..8852d31a 100644
--- a/sanic/pages/css.py
+++ b/sanic/pages/css.py
@@ -25,6 +25,7 @@ class CSS(ABCMeta):
         Page = super().__new__(cls, name, bases, attrs)
         # Use a locally defined STYLE or the one from styles directory
         Page.STYLE = _extract_style(attrs.get("STYLE_FILE"), name)
+        Page.STYLE += attrs.get("STYLE_APPEND", "")
         # Combine with all ancestor styles
         Page.CSS = "".join(
             Class.STYLE
diff --git a/sanic/pages/error.py b/sanic/pages/error.py
index c753bd0d..90a0102a 100644
--- a/sanic/pages/error.py
+++ b/sanic/pages/error.py
@@ -9,7 +9,7 @@ import tracerite.html
 inspector.blacklist_types += Request,
 
 class ErrorPage(BasePage):
-    EXTRA_STYLE = tracerite.html.style + "summary { color: #888; }"
+    STYLE_APPEND = tracerite.html.style
     def __init__(self, title: str, text: str, request: Request, exc: Exception, full: bool) -> None:
         super().__init__()
         # Internal server errors come with the text of the exception, which we don't want to show to the user.
diff --git a/sanic/pages/styles/ErrorPage.css b/sanic/pages/styles/ErrorPage.css
index 1f8867e1..6ce60c1a 100644
--- a/sanic/pages/styles/ErrorPage.css
+++ b/sanic/pages/styles/ErrorPage.css
@@ -1,139 +1,2 @@
 /** ErrorPage **/
 summary { color: #888; }
-
-/** TraceRite **/
-:root {
-  --tracerite-var: #8af;
-  --tracerite-type: #5c8;
-  --tracerite-val: #8af;
-  --tracerite-tab: #aaaa;
-}
-.tracerite,
-.tracerite * {
-  margin: 0;
-  padding: 0;
-  outline: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  font: inherit;
-}
-.tracerite h3 {
-  margin: 0;
-  padding: .2em 0;
-  font-size: 1.2em;
-}
-.tracerite p {
-  margin: 0;
-}
-.tracerite pre {
-  width: 100%;
-  padding: .5em;
-}
-.tracerite .codeline {
-  text-indent: 4ch each-line;
-}
-.tracerite .codeline::before {
-  content: attr(data-lineno);
-  color: #888;
-  opacity: 0.0;
-  transition: all 0.4s;
-  display: inline-block;
-  text-align: right;
-  text-indent: 0;
-  white-space: nowrap;
-  word-break: keep-all;
-  padding-right: 1ch;
-  width: 4ch;
-}
-.tracerite pre:hover .codeline::before {
-  opacity: 1.0;
-}
-.tracerite mark {
-  background: none;
-}
-.tracerite mark span {
-  background: #ff0;
-}
-.tracerite mark::after {
-  display: inline-block;
-  content: attr(data-symbol);
-  margin: -1ch;
-  transform: translate(2em, 0) scale(1.8);
-  color: #ff0;
-  -webkit-text-stroke: .05em black;
-}
-.tracerite .excmessage {
-  max-height: 12em;
-  overflow: auto;
-}
-.tracerite .exctype {color: gray}
-.tracerite .traceback-labels {
-  display: flex;
-  align-items: center;
-  border-bottom: 3px solid var(--tracerite-tab);
-  margin-top: 0.3em;
-}
-.tracerite .traceback-labels button {
-  background: var(--tracerite-tab); color: black;
-  border: 0;
-  border-radius: .5em .5em 0 0;
-  flex-shrink: 1;
-  line-height: 1.0;
-  padding: .5em;
-  margin-right: .2em;
-}
-.tracerite .traceback-labels button:hover { background: #ddd }
-.tracerite .traceback-labels * {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.tracerite .traceback-tabs .content {
-  scroll-snap-type: x mandatory;
-  display: flex;
-  align-items: flex-start;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.tracerite .traceback-tabs .content::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-.tracerite .traceback-details {
-  min-width: 20ch;
-  max-width: 100%;
-  margin: 0 .3em;
-  flex-shrink: 0;
-  scroll-snap-align: start;
-  border-radius: .5em;
-  padding: .2em;
-}
-.tracerite .traceback-details:last-child {
-  width: 100%;
-}
-.tracerite table.inspector { margin-left: 3.5em; width: auto; word-break: break-word;) }
-.tracerite .inspector tbody tr,
-.tracerite .inspector th,
-.tracerite .inspector td {
-  padding: 0;
-  background: none;
-  text-align: left;
-  max-width: 20em;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.tracerite .inspector .var { font-weight: bold; color: var(--tracerite-var) }
-.tracerite .inspector .type { white-space: nowrap; color: var(--tracerite-type) }
-.tracerite .inspector .val { white-space: pre-wrap; color: var(--tracerite-val) }
-/* matrix value on a variable */
-.tracerite .inspector table td {
-  color: var(--tracerite-val);
-  min-width: 3em;
-  word-break: keep-all;
-  overflow: hidden;
-  padding: 0;
-  font-size: 0.8em;
-  border-collapse: collapse;
-  text-align: right;
-}
diff --git a/setup.py b/setup.py
index 582d08e6..de142068 100644
--- a/setup.py
+++ b/setup.py
@@ -112,7 +112,7 @@ requirements = [
     "websockets>=10.0",
     "multidict>=5.0,<7.0",
     "html5tagger>=1.2.1",
-    "tracerite>=0.4.3.dev14",
+    "tracerite>=1.0.0",
 ]
 
 tests_require = [