Customise ghost comments look and feel

Ideas
1

Currently the ghost comment form opens up in an iframe due to which it’s difficult to update the look and feel of the comment section.

Maybe being able to use a local css or js file which can be served in that iframe.

2

I solved this issue by downloading the js file (some 26000 lines of code) and the CSS file, which make up the comments section, by viewing the page source of my website. It looked something like this:

       <script defer src="https://cdn.jsdelivr.net/ghost/comments-ui@~0.12/umd/comments-ui.min.js" data-ghost-comments="https://ghostwebsite.com/" data-api="https://ghostwebsite.com/ghost/api/content/" data-admin="https://ghostwebsite.com/ghost/" data-key="123456789abcdef123456789a" data-styles="https://cdn.jsdelivr.net/ghost/comments-ui@~0.12/umd/main.css" data-title="null" data-count="true" data-post-id="123456789abcdef123456789a" data-sentry-dsn="" data-color-scheme="auto" data-avatar-saturation="60" data-accent-color="#000000" data-app-version="0.12" data-comments-enabled="paid" data-publication="Ghost Website" crossorigin="anonymous"></script>

I donwloaded the files from: https://cdn.jsdelivr.net/ghost/comments-ui@~0.12/umd/comments-ui.min.js and https://cdn.jsdelivr.net/ghost/comments-ui@~0.12/umd/main.css

I put them in the assets folder in my theme edit, named them comment-page.js and comment-page.css, and put the code in the post.hbs file like this:

        {{#if comments}}
            {{#if @member.paid}}
                <div class="gh-comments gh-canvas">
         		<script defer src="https://ghostwebsite.com/assets/built/comment-page.js" data-ghost-comments="https://ghostwebsite.com/" data-api="https://ghostwebsite.com/ghost/api/content/" data-admin="https://ghostwebsite.com/ghost/" data-key="123456789abcdef123456789a" data-styles="https://ghostwebsite.com/assets/built/comment-page.css" data-title="null" data-count="true" data-post-id="{{id}}" data-sentry-dsn="" data-color-scheme="auto" data-avatar-saturation="60" data-accent-color="{{@site.accent_color}}" data-app-version="0.12" data-comments-enabled="paid" data-publication="Ghost Website" crossorigin="anonymous"></script>     
		</div>
            {{/if}}
        {{/if}}

important parts: don’t change the data-key, but change the data-post-id to {{id}}, otherwise under every post the same comments will appear.

Good luck customizing your comment section!