anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-22 18:25:32 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

Bottom of input missing in transparent theme #3531

New Issue
Closed
opened 2026-02-16 17:40:32 -05:00 by yindo · 13 comments
yindo commented 2026-02-16 17:40:32 -05:00
Owner
Copy Link
Copy Source

Originally created by @JosXa on GitHub (Dec 13, 2025).

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:

Image

Instead of this:

Image

Notice the strange margins:

Image

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

Originally created by @JosXa on GitHub (Dec 13, 2025). ### Description I'm trying to make [my Night Owl theme](https://raw.githubusercontent.com/sst/opencode/refs/heads/dev/packages/opencode/src/cli/cmd/tui/context/theme/nightowl.json) transparent by setting: ```json "background": { "dark": "none", "light": "none" }, ``` <details> <summary>Here is the full file with those changes 👇</summary> ```json { "$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" } } } ``` </details> Drop it into `~\.config\opencode\themes\nightowl-transparent.json` and select `nightowl-transparent` via /theme. You will see this: <img width="865" height="327" alt="Image" src="https://github.com/user-attachments/assets/657ed475-664c-427d-af46-2a69462bf193" /> Instead of this: <img width="846" height="376" alt="Image" src="https://github.com/user-attachments/assets/ff1407d8-c9d9-44dc-af82-5a9b1cf883fb" /> Notice the strange margins: <img width="78" height="113" alt="Image" src="https://github.com/user-attachments/assets/09520fb4-8c51-49ec-a800-40622a147758" /> 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
yindo added the help-wantedopentuibuggood first issue labels 2026-02-16 17:40:32 -05:00
yindo closed this issue 2026-02-16 17:40:32 -05:00
yindo commented 2026-02-16 17:40:32 -05:00
Author
Owner
Copy Link
Copy Source

@github-actions[bot] commented on GitHub (Dec 13, 2025):

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.

@github-actions[bot] commented on GitHub (Dec 13, 2025): 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.
yindo commented 2026-02-16 17:40:32 -05:00
Author
Owner
Copy Link
Copy Source

@nalin-singh commented on GitHub (Dec 14, 2025):

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

Image
@nalin-singh commented on GitHub (Dec 14, 2025): 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 <img width="843" height="571" alt="Image" src="https://github.com/user-attachments/assets/54858abe-7f54-430b-bad0-3231bb0ea8e9" />
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@nalin-singh commented on GitHub (Dec 14, 2025):

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

@nalin-singh commented on GitHub (Dec 14, 2025): I think it assumes that the input box background will also match the overall background transparency
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@ariane-emory commented on GitHub (Dec 14, 2025):

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

@ariane-emory commented on GitHub (Dec 14, 2025): @nalin-singh If changing that line resolves the issue I'm cool with changing it, go for it.
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@rekram1-node commented on GitHub (Dec 14, 2025):

thank you @nalin-singh !

@rekram1-node commented on GitHub (Dec 14, 2025): thank you @nalin-singh !
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@jensenojs commented on GitHub (Dec 14, 2025):

it is just me or

Image

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

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

@jensenojs commented on GitHub (Dec 14, 2025): it is just me or <img width="1411" height="822" alt="Image" src="https://github.com/user-attachments/assets/0b30fc77-eaf5-4648-8a9c-d43a1a654fb8" /> --- It seems to be a regression problem and fixed by ariane-emory and knanao https://github.com/sst/opencode/pull/4572#issuecomment-3567640711 ---
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@nalin-singh commented on GitHub (Dec 14, 2025):

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

@nalin-singh commented on GitHub (Dec 14, 2025): let me see, can you share you config for the theme ?
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@nalin-singh commented on GitHub (Dec 14, 2025):

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 commented on GitHub (Dec 14, 2025): 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.
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@nalin-singh commented on GitHub (Dec 14, 2025):

@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

Image

some RCA

Image

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

@nalin-singh commented on GitHub (Dec 14, 2025): @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 <img width="901" height="486" alt="Image" src="https://github.com/user-attachments/assets/33527875-3298-4bfb-a008-cdfe9c397aff" /> some RCA <img width="725" height="376" alt="Image" src="https://github.com/user-attachments/assets/374e6dd2-3026-4ca1-99a0-d5ec4cb34648" /> https://github.com/user-attachments/assets/d76be65f-785c-4f4f-b021-818adcbf4336
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@nalin-singh commented on GitHub (Dec 15, 2025):

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

@nalin-singh commented on GitHub (Dec 15, 2025): @rekram1-node I've created another PR for the resolution here
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@rekram1-node commented on GitHub (Dec 15, 2025):

Thank you @nalin-singh

And apologies @jensenojs

@rekram1-node commented on GitHub (Dec 15, 2025): Thank you @nalin-singh And apologies @jensenojs
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@JosXa commented on GitHub (Dec 15, 2025):

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

@JosXa commented on GitHub (Dec 15, 2025): @nalin-singh Love that background image. Where did you find/make it? :)
yindo commented 2026-02-16 17:40:33 -05:00
Author
Owner
Copy Link
Copy Source

@nalin-singh commented on GitHub (Dec 15, 2025):

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

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

@nalin-singh commented on GitHub (Dec 15, 2025): > [@nalin-singh](https://github.com/nalin-singh) Love that background image. Where did you find/make it? :) just surfing the net for this ticket lol, `lofi code background images`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label bug good first issue help-wanted opentui
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#3531
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?