Bottom of input missing in transparent theme

[JosXa]

Description

I'm trying to make my Night Owl theme transparent by setting:

    "background": {
      "dark": "none",
      "light": "none"
    },

Here is the full file with those changes 👇

{
  "$schema": "https://opencode.ai/theme.json",
  "defs": {
    "nightOwlBg": "#011627",
    "nightOwlFg": "#d6deeb",
    "nightOwlBlue": "#82AAFF",
    "nightOwlCyan": "#7fdbca",
    "nightOwlGreen": "#c5e478",
    "nightOwlYellow": "#ecc48d",
    "nightOwlOrange": "#F78C6C",
    "nightOwlRed": "#EF5350",
    "nightOwlPink": "#ff5874",
    "nightOwlPurple": "#c792ea",
    "nightOwlMuted": "#5f7e97",
    "nightOwlGray": "#637777",
    "nightOwlLightGray": "#89a4bb",
    "nightOwlPanel": "#0b253a"
  },
  "theme": {
    "primary": {
      "dark": "nightOwlBlue",
      "light": "nightOwlBlue"
    },
    "secondary": {
      "dark": "nightOwlCyan",
      "light": "nightOwlCyan"
    },
    "accent": {
      "dark": "nightOwlPurple",
      "light": "nightOwlPurple"
    },
    "error": {
      "dark": "nightOwlRed",
      "light": "nightOwlRed"
    },
    "warning": {
      "dark": "nightOwlYellow",
      "light": "nightOwlYellow"
    },
    "success": {
      "dark": "nightOwlGreen",
      "light": "nightOwlGreen"
    },
    "info": {
      "dark": "nightOwlBlue",
      "light": "nightOwlBlue"
    },
    "text": {
      "dark": "nightOwlFg",
      "light": "nightOwlFg"
    },
    "textMuted": {
      "dark": "nightOwlMuted",
      "light": "nightOwlMuted"
    },
    "background": {
      "dark": "none",
      "light": "none"
    },
    "backgroundPanel": {
      "dark": "nightOwlPanel",
      "light": "nightOwlPanel"
    },
    "backgroundElement": {
      "dark": "nightOwlPanel",
      "light": "nightOwlPanel"
    },
    "border": {
      "dark": "nightOwlMuted",
      "light": "nightOwlMuted"
    },
    "borderActive": {
      "dark": "nightOwlBlue",
      "light": "nightOwlBlue"
    },
    "borderSubtle": {
      "dark": "nightOwlMuted",
      "light": "nightOwlMuted"
    },
    "diffAdded": {
      "dark": "nightOwlGreen",
      "light": "nightOwlGreen"
    },
    "diffRemoved": {
      "dark": "nightOwlRed",
      "light": "nightOwlRed"
    },
    "diffContext": {
      "dark": "nightOwlMuted",
      "light": "nightOwlMuted"
    },
    "diffHunkHeader": {
      "dark": "nightOwlMuted",
      "light": "nightOwlMuted"
    },
    "diffHighlightAdded": {
      "dark": "nightOwlGreen",
      "light": "nightOwlGreen"
    },
    "diffHighlightRemoved": {
      "dark": "nightOwlRed",
      "light": "nightOwlRed"
    },
    "diffAddedBg": {
      "dark": "#0a2e1a",
      "light": "#0a2e1a"
    },
    "diffRemovedBg": {
      "dark": "#2d1b1b",
      "light": "#2d1b1b"
    },
    "diffContextBg": {
      "dark": "nightOwlPanel",
      "light": "nightOwlPanel"
    },
    "diffLineNumber": {
      "dark": "nightOwlMuted",
      "light": "nightOwlMuted"
    },
    "diffAddedLineNumberBg": {
      "dark": "#0a2e1a",
      "light": "#0a2e1a"
    },
    "diffRemovedLineNumberBg": {
      "dark": "#2d1b1b",
      "light": "#2d1b1b"
    },
    "markdownText": {
      "dark": "nightOwlFg",
      "light": "nightOwlFg"
    },
    "markdownHeading": {
      "dark": "nightOwlBlue",
      "light": "nightOwlBlue"
    },
    "markdownLink": {
      "dark": "nightOwlCyan",
      "light": "nightOwlCyan"
    },
    "markdownLinkText": {
      "dark": "nightOwlBlue",
      "light": "nightOwlBlue"
    },
    "markdownCode": {
      "dark": "nightOwlGreen",
      "light": "nightOwlGreen"
    },
    "markdownBlockQuote": {
      "dark": "nightOwlMuted",
      "light": "nightOwlMuted"
    },
    "markdownEmph": {
      "dark": "nightOwlPurple",
      "light": "nightOwlPurple"
    },
    "markdownStrong": {
      "dark": "nightOwlYellow",
      "light": "nightOwlYellow"
    },
    "markdownHorizontalRule": {
      "dark": "nightOwlMuted",
      "light": "nightOwlMuted"
    },
    "markdownListItem": {
      "dark": "nightOwlBlue",
      "light": "nightOwlBlue"
    },
    "markdownListEnumeration": {
      "dark": "nightOwlCyan",
      "light": "nightOwlCyan"
    },
    "markdownImage": {
      "dark": "nightOwlCyan",
      "light": "nightOwlCyan"
    },
    "markdownImageText": {
      "dark": "nightOwlBlue",
      "light": "nightOwlBlue"
    },
    "markdownCodeBlock": {
      "dark": "nightOwlFg",
      "light": "nightOwlFg"
    },
    "syntaxComment": {
      "dark": "nightOwlGray",
      "light": "nightOwlGray"
    },
    "syntaxKeyword": {
      "dark": "nightOwlPurple",
      "light": "nightOwlPurple"
    },
    "syntaxFunction": {
      "dark": "nightOwlBlue",
      "light": "nightOwlBlue"
    },
    "syntaxVariable": {
      "dark": "nightOwlFg",
      "light": "nightOwlFg"
    },
    "syntaxString": {
      "dark": "nightOwlYellow",
      "light": "nightOwlYellow"
    },
    "syntaxNumber": {
      "dark": "nightOwlOrange",
      "light": "nightOwlOrange"
    },
    "syntaxType": {
      "dark": "nightOwlGreen",
      "light": "nightOwlGreen"
    },
    "syntaxOperator": {
      "dark": "nightOwlCyan",
      "light": "nightOwlCyan"
    },
    "syntaxPunctuation": {
      "dark": "nightOwlFg",
      "light": "nightOwlFg"
    }
  }
}

Drop it into ~\.config\opencode\themes\nightowl-transparent.json and select nightowl-transparent via /theme.

You will see this:

Instead of this:

Notice the strange margins:

I don't see how changing the background could affect this and need help.

OpenCode version

1.0.152

Steps to reproduce

No response

Screenshot and/or share link

No response

Operating System

Windows 11

Terminal

Windows Terminal

[github-actions[bot]]

This issue might be a duplicate of existing issues. Please check:

• #4321: Missing messages in TUI - Reports parts of responses and input not being displayed
• #5283: Graphical glitches - UI breaks down with old text getting stuck, requires reopening TUI
• #4990: Output from agent is frequently hidden - Output often hidden behind progress indicator, similar visibility issue

Feel free to ignore if none of these address your specific case with the transparent theme background.

[nalin-singh]

this is because of the transparent background line 888, I think it was a choice made earlier in the code if we're fine with changing this I can create a PR

[nalin-singh]

I think it assumes that the input box background will also match the overall background transparency

[ariane-emory]

@nalin-singh If changing that line resolves the issue I'm cool with changing it, go for it.

[rekram1-node]

thank you @nalin-singh !

[jensenojs]

it is just me or

---

It seems to be a regression problem and fixed by ariane-emory and knanao

https://github.com/sst/opencode/pull/4572#issuecomment-3567640711

---

[nalin-singh]

let me see, can you share you config for the theme ?

[nalin-singh]

I've got the config from the other issue, I will check it out and see how I can fix it so that both scenarios are satisfied. The other config shared for the nightowl-transparent does seem to work.

[nalin-singh]

@jensenojs I've found a fix for your issue, it satisfies both the problems thanks for mentioning this

The main change here is the previous PR introduced conditional on theme.background whereas the condition that's working below is theme.backgroundElement

theme.backgroundElement is correct because that is the background being set for the input box

some RCA

https://github.com/user-attachments/assets/d76be65f-785c-4f4f-b021-818adcbf4336

[nalin-singh]

@rekram1-node I've created another PR for the resolution here

[rekram1-node]

Thank you @nalin-singh

And apologies @jensenojs

[JosXa]

@nalin-singh Love that background image. Where did you find/make it? :)

[nalin-singh]

@nalin-singh Love that background image. Where did you find/make it? :)

just surfing the net for this ticket lol, lofi code background images