UI: light theme теряет элемент #40

Closed
opened 2026-05-24 00:21:06 +00:00 by owner · 5 comments
Collaborator

В режиме игры, когда включена светлая тема, контрол с выпадающим меню тогглов (шестереночка в правом верхнем углу карты) становится как бы прозрачным - только белая рамка вокруг квадратика. А при наведении мышки появляется белый фон с тёмной шестеренкой внутри. Как-нибудь поправить бы, чтоб соответствовало тёмной теме.

Я знаю хороший вариант, как поправить: для самой карты тоже дописать светлую тему. А то она сейчас как бельмо (но наоборот) - вокруг всё белое, а карта как тёмной теме, не очень красиво, режет глаз.

В режиме игры, когда включена светлая тема, контрол с выпадающим меню тогглов (шестереночка в правом верхнем углу карты) становится как бы прозрачным - только белая рамка вокруг квадратика. А при наведении мышки появляется белый фон с тёмной шестеренкой внутри. Как-нибудь поправить бы, чтоб соответствовало тёмной теме. Я знаю хороший вариант, как поправить: для самой карты тоже дописать светлую тему. А то она сейчас как бельмо (но наоборот) - вокруг всё белое, а карта как тёмной теме, не очень красиво, режет глаз.
owner added the Kind/Enhancementready labels 2026-05-24 00:21:06 +00:00
developer was assigned by owner 2026-05-24 00:21:06 +00:00
developer added
claude
working
and removed ready labels 2026-05-24 00:30:35 +00:00
Owner

@owner привет! Разобралась с обоими пунктами, рассказываю.

Почему пропадает шестерёнка

Корень — в ui/frontend/src/lib/active-view/map-toggles.svelte: у кнопки-триггера фон захардкожен литералом rgba(20, 24, 42, 0.85) (тёмно-синий), а иконка, рамка и ховер берут токены темы (--color-text, --color-border, --color-surface-hover). В светлой теме выходит:

  • в покое — тёмная иконка (--color-text) на тёмном захардкоженном фоне = не видно, торчит только светлая рамка вокруг квадратика;
  • на ховере фон становится --color-surface-hover (почти белый) → белая плашка с тёмной шестерёнкой.

Ровно как ты описал. По сути это нарушение нашего же правила из ui/docs/design-system.md — «никаких литеральных цветов темы в <style> компонента». Та же болячка, кстати, у плашки «Загрузка…» в map.svelte (тоже захардкоженный тёмный фон + текст токеном) — её бы починила заодно.

Важный нюанс про твой вариант «дописать карте светлую тему»

Сам по себе он шестерёнку не вылечит: иконка всё равно возьмёт var(--color-text) (тёмную в светлой теме), и на тёмном фоне кнопки останется невидимой. Так что токенный фикс самой шестерёнки нужен в любом случае — а светлая тема карты это отдельный, гораздо больший разговор.

Про саму карту

Тут есть зафиксированное проектное решение: canvas карты намеренно остаётся тёмным в обеих темах — это data-viz поверхность (как боевая сцена). Так и записано в design-system.md: «перекрасить viz-поверхность под светлую — это отдельная дизайн-задача, а не свап токенов». В коде это отложенная Фаза 35: world.ts, state-binding.ts, render.ts, cargo-routes.ts явно ссылаются на «Phase 35 polish: picks final colours and adds theme switching». По сути это и есть та переработка рендера карты, которую мы держим за тобой — поэтому лезть в неё молча не хочу.

Развилка — что делаем в этой задаче?

A (рекомендую). Чиню только шестерёнку (и плашку загрузки), карту оставляю тёмной.
Привожу триггер к токенам — проще всего сделать фон как у его же выпадашки (--color-surface-overlay): в светлой теме это аккуратная светлая плашка с тёмной шестерёнкой, в тёмной — практически как сейчас.

  • + маленький безопасный диф в один-два файла, чинит ровно сообщённый баг, не трогает твой рендер карты;
  • карта остаётся тёмной в светлой теме (твой пункт «режет глаз» доживёт до Фазы 35).
  • под-вопрос: плашку триггера сделать «по теме» (светлая в светлой) или всегда тёмной под тёмную карту? Я за первое, но скажи.

B. Чиню шестерёнку И делаю светлую тему карты (Фазу 35) целиком сейчас.
LIGHT_THEME, проброс theme.resolved в рендерер, живое переключение (с учётом того, что Pixi 8 не любит ре-инициализацию на том же canvas) и перетюнинг всех цветов примитивов (планеты, группы кораблей, грузовые/отправляемые маршруты, круги досягаемости, кольцо выбора, туман) под светлый фон.

  • + закрывает обе твои претензии полностью;
  • большой high-blast-radius диф в hot-path рендере, много файлов и новых тестов; нужны твои дизайн-решения (финальная светлая палитра, живое переключение vs ремоунт); это та самая owner-led работа, так что мне нужен явный твой «беру».

C. Чиню шестерёнку + первый срез карты: только фон карты по теме.
LIGHT_THEME + проброс темы, крашу только background карты, примитивы оставляю на тебя.

  • + быстро убирает «тёмный прямоугольник в белом приложении»;
  • светлый фон с тёмно-настроенными маркерами/линиями может выглядеть хуже нынешней цельно-тёмной карты, пока примитивы не перекрашены; и всё равно лезу в рендерер.

Что выбираешь? Если A — то с каким видом плашки шестерёнки (по теме / всегда тёмная)?

@owner привет! Разобралась с обоими пунктами, рассказываю. ### Почему пропадает шестерёнка Корень — в `ui/frontend/src/lib/active-view/map-toggles.svelte`: у кнопки-триггера фон захардкожен литералом `rgba(20, 24, 42, 0.85)` (тёмно-синий), а иконка, рамка и ховер берут токены темы (`--color-text`, `--color-border`, `--color-surface-hover`). В светлой теме выходит: - в покое — тёмная иконка (`--color-text`) на тёмном захардкоженном фоне = не видно, торчит только светлая рамка вокруг квадратика; - на ховере фон становится `--color-surface-hover` (почти белый) → белая плашка с тёмной шестерёнкой. Ровно как ты описал. По сути это нарушение нашего же правила из `ui/docs/design-system.md` — «никаких литеральных цветов темы в `<style>` компонента». Та же болячка, кстати, у плашки «Загрузка…» в `map.svelte` (тоже захардкоженный тёмный фон + текст токеном) — её бы починила заодно. ### Важный нюанс про твой вариант «дописать карте светлую тему» Сам по себе он шестерёнку **не вылечит**: иконка всё равно возьмёт `var(--color-text)` (тёмную в светлой теме), и на тёмном фоне кнопки останется невидимой. Так что токенный фикс самой шестерёнки нужен в любом случае — а светлая тема карты это отдельный, гораздо больший разговор. ### Про саму карту Тут есть зафиксированное проектное решение: canvas карты **намеренно** остаётся тёмным в обеих темах — это data-viz поверхность (как боевая сцена). Так и записано в `design-system.md`: «перекрасить viz-поверхность под светлую — это отдельная дизайн-задача, а не свап токенов». В коде это отложенная **Фаза 35**: `world.ts`, `state-binding.ts`, `render.ts`, `cargo-routes.ts` явно ссылаются на «Phase 35 polish: picks final colours and adds theme switching». По сути это и есть та переработка рендера карты, которую мы держим за тобой — поэтому лезть в неё молча не хочу. ### Развилка — что делаем в этой задаче? **A (рекомендую). Чиню только шестерёнку (и плашку загрузки), карту оставляю тёмной.** Привожу триггер к токенам — проще всего сделать фон как у его же выпадашки (`--color-surface-overlay`): в светлой теме это аккуратная светлая плашка с тёмной шестерёнкой, в тёмной — практически как сейчас. - `+` маленький безопасный диф в один-два файла, чинит ровно сообщённый баг, не трогает твой рендер карты; - `−` карта остаётся тёмной в светлой теме (твой пункт «режет глаз» доживёт до Фазы 35). - под-вопрос: плашку триггера сделать «по теме» (светлая в светлой) или **всегда тёмной** под тёмную карту? Я за первое, но скажи. **B. Чиню шестерёнку И делаю светлую тему карты (Фазу 35) целиком сейчас.** `LIGHT_THEME`, проброс `theme.resolved` в рендерер, живое переключение (с учётом того, что Pixi 8 не любит ре-инициализацию на том же canvas) и перетюнинг **всех** цветов примитивов (планеты, группы кораблей, грузовые/отправляемые маршруты, круги досягаемости, кольцо выбора, туман) под светлый фон. - `+` закрывает обе твои претензии полностью; - `−` большой high-blast-radius диф в hot-path рендере, много файлов и новых тестов; нужны твои дизайн-решения (финальная светлая палитра, живое переключение vs ремоунт); это та самая owner-led работа, так что мне нужен явный твой «беру». **C. Чиню шестерёнку + первый срез карты: только фон карты по теме.** `LIGHT_THEME` + проброс темы, крашу только `background` карты, примитивы оставляю на тебя. - `+` быстро убирает «тёмный прямоугольник в белом приложении»; - `−` светлый фон с тёмно-настроенными маркерами/линиями может выглядеть **хуже** нынешней цельно-тёмной карты, пока примитивы не перекрашены; и всё равно лезу в рендерер. Что выбираешь? Если **A** — то с каким видом плашки шестерёнки (по теме / всегда тёмная)?
Owner
Working log (issue-agent) — click to expand

State: merged (done)
Updated: 2026-05-24T07:19Z
Branch / PR: PR #42 MERGED into development (merge commit 6f29670); branch feature/issue-40-map-light-theme deleted; issue auto-closed via Closes #40
Confirmed: Merge gate all-clear. Base development, body Closes #40, mergeable. Owner (issue author) APPROVED review id 2 on head f6e4a4f6 (stale:false, no commits after approval). Zero inline review threads. Pre-merge CI green: ui-test push(352) + PR(353) + dispatch deploy(354) all success, with real per-context success rows.
Open question:
Decisions: Combined commit /status read pending only from an orphaned Gitea "Waiting to run" row (id 5, malformed target run352/job353); development branch protection has enable_status_check:false + required_approvals:1, so it didn't gate (mergeable:true). Merged as a normal merge commit + delete_branch_after_merge; removed claude/working from the closed issue (no claude/done state exists).
Post-merge CI (development, sha 6f29670): dev-deploy run 355 = success; ui-test run 356 = success. go-unit + integration correctly skipped (path-filtered: ui/frontend + docs only). Dev environment redeployed with the change.
Next: Nothing — issue closed, PR merged, CI green, dev deployed. Future map colour fine-tuning is owner-driven under F8 in ui/frontend/src/map/world.ts (DARK_THEME / LIGHT_THEME).

<!-- issue-agent:worklog --> <details> <summary>Working log (issue-agent) — click to expand</summary> **State:** merged (done) **Updated:** 2026-05-24T07:19Z **Branch / PR:** PR #42 MERGED into `development` (merge commit `6f29670`); branch `feature/issue-40-map-light-theme` deleted; issue auto-closed via `Closes #40` **Confirmed:** Merge gate all-clear. Base `development`, body `Closes #40`, mergeable. Owner (issue author) APPROVED review id 2 on head `f6e4a4f6` (stale:false, no commits after approval). Zero inline review threads. Pre-merge CI green: ui-test push(352) + PR(353) + dispatch deploy(354) all success, with real per-context `success` rows. **Open question:** — **Decisions:** Combined commit `/status` read `pending` only from an orphaned Gitea "Waiting to run" row (id 5, malformed target run352/job353); `development` branch protection has `enable_status_check:false` + `required_approvals:1`, so it didn't gate (`mergeable:true`). Merged as a normal merge commit + `delete_branch_after_merge`; removed `claude/working` from the closed issue (no `claude/done` state exists). **Post-merge CI (development, sha 6f29670):** dev-deploy run 355 = success; ui-test run 356 = success. go-unit + integration correctly skipped (path-filtered: ui/frontend + docs only). Dev environment redeployed with the change. **Next:** Nothing — issue closed, PR merged, CI green, dev deployed. Future map colour fine-tuning is owner-driven under F8 in `ui/frontend/src/map/world.ts` (`DARK_THEME` / `LIGHT_THEME`). </details>
developer added
claude
blocked
and removed
claude
working
labels 2026-05-24 00:35:35 +00:00
Author
Collaborator
  1. Упоминание Phase 35 нужно убрать из кода. Эта фаза не живёт сейчас нигде, кроме косвенных упоминаний в завершённом ui/PLAN.md и ui/PLAN-finalize.md. По поводу последнего - он тоже весь выполнен, и можно это считать началом последнего пункта F8.
  2. Делаем вариант "B". Включая плашку "Загрузка". В design-system.md (или других документах, если есть) снимаем запреты на перекраску карты. Она должна соответствовать общей выбранной теме (тёмная/светлая). Светлую палитру подбери сама, более-менее аналогичную тёмной отрисовке карты. Важно сохранить акценты на incoming groups, маркерах bombings и battles. Не слишком критично сейчас, какие именно будут цвета, да я и не смогу с ходу подобрать - полагаюсь на тебя. Позже в рамках F8 посмотрю общую картину и возможно добавлю уточнения.
1. Упоминание Phase 35 нужно убрать из кода. Эта фаза не живёт сейчас нигде, кроме косвенных упоминаний в завершённом ui/PLAN.md и ui/PLAN-finalize.md. По поводу последнего - он тоже весь выполнен, и можно это считать началом последнего пункта F8. 2. Делаем вариант "B". Включая плашку "Загрузка". В design-system.md (или других документах, если есть) снимаем запреты на перекраску карты. Она должна соответствовать общей выбранной теме (тёмная/светлая). Светлую палитру подбери сама, более-менее аналогичную тёмной отрисовке карты. Важно сохранить акценты на incoming groups, маркерах bombings и battles. Не слишком критично сейчас, какие именно будут цвета, да я и не смогу с ходу подобрать - полагаюсь на тебя. Позже в рамках F8 посмотрю общую картину и возможно добавлю уточнения.
developer added
claude
working
and removed
claude
blocked
labels 2026-05-24 06:27:59 +00:00
developer added
claude
in-review
and removed
claude
working
labels 2026-05-24 06:56:14 +00:00
Owner

@owner привет! Готово — вариант B реализован, PR #42 в development. Рассказываю, что вышло.

Карта теперь живёт по теме

Canvas карты выбирает палитру из theme.resolved и переключается вместе со всем интерфейсом: фон, планеты, группы кораблей, грузовые маршруты, маркеры боёв и бомбардировок, туман, круги досягаемости, кольцо выбора, отправляемые маршруты и оверлей выбора цели. При переключении темы рендерер делает ремоунт с сохранением камеры (живой ре-тинт Pixi не умеет — фон запекается на init, а цвета примитивов на сборке, так что аккуратнее всего пересобрать; pan/zoom при этом не теряются). Больше «тёмного прямоугольника в белом приложении» — в светлой теме фон карты совпадает с фоном оболочки.

Шестерёнка и плашка «Загрузка»

Корень бага был ровно как мы разобрали: у обоих был захардкожен тёмный фон rgba(20,24,42,0.85). Перевела их на токен --color-surface-overlay — теперь в светлой теме это аккуратный светлый чип с тёмной иконкой (как у его же выпадашки), в тёмной — практически как было. Чип «по теме», раз карта теперь тоже по теме.

Светлая палитра

Подобрала сама как первый разумный проход: повторяет тёмную «роль в роль», но затемнённая/насыщеннее под светлый фон, а акценты на incoming-группах, боях и бомбардировках оставила яркими, как ты и просил. Если что-то будет резать глаз — в рамках F8 всё крутится в одном файле: DARK_THEME и LIGHT_THEME лежат рядом в ui/frontend/src/map/world.ts.

Phase 35 и доки

  • Убрала упоминания «Phase 35» из кода; PLAN.md / PLAN-finalize.md не трогала — это историч. записи, как ты и сказал.
  • В design-system.md сняла запрет на перекраску карты (боевую сцену оставила тёмной data-viz поверхностью — ты просил только карту); поправила renderer.md и формулировку про туман в FUNCTIONAL.md + русское зеркало.

Тесты

  • pnpm test — 771 зелёный (79 файлов), включая новый tests/map-theme.test.ts и обновлённые color-тесты.
  • pnpm check — 0 ошибок.
  • CI ui-test на PR — зелёный (оба прогона). Integration/go-unit не запускались: изменения только в ui/frontend + доки, а они отфильтрованы по Go-путям.

Мерджить не буду — это за тобой. Глянешь общую картину в F8 и скажешь, если где-то цвета поправить.

@owner привет! Готово — вариант **B** реализован, PR #42 в `development`. Рассказываю, что вышло. ### Карта теперь живёт по теме Canvas карты выбирает палитру из `theme.resolved` и переключается вместе со всем интерфейсом: фон, планеты, группы кораблей, грузовые маршруты, маркеры боёв и бомбардировок, туман, круги досягаемости, кольцо выбора, отправляемые маршруты и оверлей выбора цели. При переключении темы рендерер делает ремоунт с сохранением камеры (живой ре-тинт Pixi не умеет — фон запекается на init, а цвета примитивов на сборке, так что аккуратнее всего пересобрать; pan/zoom при этом не теряются). Больше «тёмного прямоугольника в белом приложении» — в светлой теме фон карты совпадает с фоном оболочки. ### Шестерёнка и плашка «Загрузка» Корень бага был ровно как мы разобрали: у обоих был захардкожен тёмный фон `rgba(20,24,42,0.85)`. Перевела их на токен `--color-surface-overlay` — теперь в светлой теме это аккуратный светлый чип с тёмной иконкой (как у его же выпадашки), в тёмной — практически как было. Чип «по теме», раз карта теперь тоже по теме. ### Светлая палитра Подобрала сама как первый разумный проход: повторяет тёмную «роль в роль», но затемнённая/насыщеннее под светлый фон, а акценты на **incoming-группах, боях и бомбардировках** оставила яркими, как ты и просил. Если что-то будет резать глаз — в рамках F8 всё крутится в одном файле: `DARK_THEME` и `LIGHT_THEME` лежат рядом в `ui/frontend/src/map/world.ts`. ### Phase 35 и доки - Убрала упоминания «Phase 35» из кода; `PLAN.md` / `PLAN-finalize.md` не трогала — это историч. записи, как ты и сказал. - В `design-system.md` сняла запрет на перекраску карты (боевую сцену оставила тёмной data-viz поверхностью — ты просил только карту); поправила `renderer.md` и формулировку про туман в `FUNCTIONAL.md` + русское зеркало. ### Тесты - `pnpm test` — 771 зелёный (79 файлов), включая новый `tests/map-theme.test.ts` и обновлённые color-тесты. - `pnpm check` — 0 ошибок. - CI `ui-test` на PR — зелёный (оба прогона). Integration/go-unit не запускались: изменения только в `ui/frontend` + доки, а они отфильтрованы по Go-путям. Мерджить не буду — это за тобой. Глянешь общую картину в F8 и скажешь, если где-то цвета поправить.
developer added
claude
working
and removed
claude
in-review
labels 2026-05-24 07:14:59 +00:00
developer removed the
claude
working
label 2026-05-24 07:15:32 +00:00
Owner

@owner смерджила! PR #42 уехал в development (merge-коммит 6f29670), issue закрылась автоматически по Closes #40, ветку подчистила.

Сейчас на development поднимается dev-deploy — присмотрю, чтобы прогон был зелёный, и отпишусь, если что-то пойдёт не так.

Спасибо за ревью, рада, что палитра зашла! Тонкую доводку цветов всегда можно сделать в рамках F8 — DARK_THEME и LIGHT_THEME лежат рядом в ui/frontend/src/map/world.ts.

@owner смерджила! PR #42 уехал в `development` (merge-коммит `6f29670`), issue закрылась автоматически по `Closes #40`, ветку подчистила. Сейчас на `development` поднимается `dev-deploy` — присмотрю, чтобы прогон был зелёный, и отпишусь, если что-то пойдёт не так. Спасибо за ревью, рада, что палитра зашла! Тонкую доводку цветов всегда можно сделать в рамках F8 — `DARK_THEME` и `LIGHT_THEME` лежат рядом в `ui/frontend/src/map/world.ts`.
developer added the
claude
done
label 2026-05-24 07:28:41 +00:00
Sign in to join this conversation.
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: developer/galaxy-game#40