Redoc: How to use theme with standalone tag

Created on 28 Apr 2020 · 5Comments · Source: Redocly/redoc

Hi, I am currently using the redoc tag in a Vuejs project. How can I get themes to work with the tag? Do I need to pass it as an Object? A string?

Here is an example:

<redoc
      :theme="{
        colors: {
          rightPanel: { backgroundColor: '#DFC350', textColor: '#445AFF' },
          http: {
            get: '#DFC350'
          }
        }
      }"
      spec-url="http://petstore.swagger.io/v2/swagger.json"
    />
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js" />

Any help would be much appreciated. Thanks!

bug

Source

bbusch19

👍1

Most helpful comment

@mknaw yes, looks like you are right. I will fix that.

RomanHotsiy on 26 Jul 2020

👍3 👀1

All 5 comments

Redoc tag is a regular html tag. It is not web-component. When Redoc js loads it binds to this tag. So you can pass only string via attributes. You can pass the theme as a JSON string:

<redoc
  theme="{colors: {rightPanel: { backgroundColor: '#DFC350', textColor: '#445AFF' }, http: { get: '#DFC350' }}}"
  spec-url="http://petstore.swagger.io/v2/swagger.json"
/>

Alternatively, you can init Redoc manually using Redoc.init, see https://github.com/Redocly/redoc#advanced-usage-of-standalone-version

RomanHotsiy on 29 Apr 2020

@RomanHotsiy setting theme on the standalone tag seems doesn't seem to work. Using your example:

<!DOCTYPE html>
<html>
  <head>
    <title>ReDoc</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">

    <!--
    ReDoc doesn't change outer page styles
    -->
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <redoc spec-url='petstore.yaml' disable-search="true" theme="{colors: {rightPanel: { backgroundColor: '#FF0000', textColor: '#445AFF' }, http: { get: '#DFC350' }}}"></redoc>
    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
  </body>
</html>

I've checked theme.ts, it seems rightPanel has moved to the root of the object. Just trying to target this key also does nothing.

Note I have included disable-search and that does function.

wjdp on 18 Jun 2020

Oh, my bad, try passing it as a valid json string (not js), use double-quotes.

{"colors": {"rightPanel": { "backgroundColor": "#FF0000"...

RomanHotsiy on 27 Jun 2020

Also having no luck, even with the JSON string. Looking at the source, I'm not sure how it would work - it doesn't look like the theme is parsed before it gets passed to RedocNormalizedOptions, so the { ...raw.theme, ...} passed to mergeOptions seems to just destructure the string?