Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to use theme with standalone tag #1248

Closed
bbusch19 opened this issue Apr 28, 2020 · 12 comments
Closed

How to use theme with standalone tag #1248

bbusch19 opened this issue Apr 28, 2020 · 12 comments
Labels
Type: Bug

Comments

@bbusch19
Copy link

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!
@RomanHotsiy
Copy link
Member

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

@wjdp
Copy link

wjdp commented Jun 18, 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>

image

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.

image

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

@RomanHotsiy
Copy link
Member

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

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

@mknaw
Copy link

mknaw commented Jul 24, 2020 •
edited
Loading

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?

@RomanHotsiy
Copy link
Member

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

@RomanHotsiy RomanHotsiy reopened this Jul 26, 2020
@LeoColman LeoColman mentioned this issue Nov 9, 2020
Merged
tipsy pushed a commit to javalin/javalin that referenced this issue Nov 13, 2020
@LeoColman
[openapi] Add Redoc Options configuration (#1106)
d2bc985 
Redoc contains a list of customizable options in its options object (https://github.com/Redocly/redoc#redoc-options-object). This commit enables that customization inside Javalin's DSL.

For each type of object, a builder was created to ease Java's usage, as the language doesn't support default arguments yet.

An important point to verify here is that the Theme option, although configurable, won't work with the standalone version currently, due to a bug in Redoc itself (Redocly/redoc#1248). If it gets fixed, the code from this commit will automatically work with it.

Closes #1097

Closes #
@langhabel langhabel mentioned this issue Jan 5, 2021
Merged
@tjperry07
Copy link

Just bumping this since the theme is holding me back from being able to use it.

@ArnaudLier
Copy link

bump

1 similar comment
@AlexRoodo
Copy link

bump

@Shahaed
Copy link

Shahaed commented Apr 15, 2021

Since still broken on this redoc version, this guy forked the code to make it work: https://github.com/langhabel/redoc.

His simple commit is a few lines above: fix: parse json theme string for standalone tag

@RomanHotsiy
Copy link
Member

Fixed in #1492

The new version will be published later this week. Thanks for bumping everyone 🙌 !

@hheavener-kyd
Copy link

hheavener-kyd commented May 29, 2021 •
edited
Loading

This is still not working on my end. I cannot change the sidebar color no matter what I do. I've even tried overriding the CSS rules but I can't figure out where the sidebar color is even coming from so that's a dead end. Is anyone else still experiencing issues with this using the standalone version?

Edit:
I was able to get a CSS override working but I'd still like for this to work as described.

@AiyionPrime
Copy link

AiyionPrime commented Nov 23, 2021 •
edited
Loading

@hheavener-kyd Accoding to https://github.com/Redocly/redoc/pull/1491/files#diff-3b0d0fd534132dcc7f29e23eacce87bb8960ef97b849de3616fab48113f017dfR25 it's working like this:

theme='{"colors": {"primary": { "main": "#DFC350"}}, "rightPanel": { "backgroundColor": "#DFC350", "textColor": "#445AFF", "http": {"get": "#DFC350"}}}'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@wjdp @RomanHotsiy @Shahaed @tjperry07 @AiyionPrime @bbusch19 @AlexRoodo @mknaw @ArnaudLier @hheavener-kyd