[PR #1894] [MERGED] feat(extension): Add theme and dynamic icon support #1923

New issue

Closed

opened 2026-03-02 11:59:46 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 11:59:46 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/1894
Author: @qixing-jk
Created: 9/6/2025
Status: ✅ Merged
Merged: 9/7/2025
Merged by: @MohamedBassem

Base: main ← Head: extension/feat/dark-mode

📝 Commits (8)

37074f9 feat: add theme selection support to browser extension
ae6e54a feat(extension): add dynamic icon theme switching (#1100)
ab90a23 fix(extension): switch dark mode strategy from media to selector
ec34596 fix(extension): move icon update logic to content script
1fcdaf6 feat(settings): make theme field required in settings schema
4362663 deps: Upgrade the extension deps
a26a1ec Merge branch 'main' into extension/feat/dark-mode
d8b9de2 minor fixes

📊 Changes

8 files changed (+240 additions, -46 deletions)

View changed files

📝 apps/browser-extension/package.json (+2 -2)
📝 apps/browser-extension/src/OptionsPage.tsx (+22 -0)
➕ apps/browser-extension/src/components/ui/select.tsx (+158 -0)
📝 apps/browser-extension/src/utils/ThemeProvider.tsx (+36 -28)
📝 apps/browser-extension/src/utils/providers.tsx (+1 -3)
📝 apps/browser-extension/src/utils/settings.ts (+2 -0)
📝 apps/browser-extension/tailwind.config.js (+1 -1)
📝 pnpm-lock.yaml (+18 -12)

📄 Description

feat(extension): Add theme and dynamic icon support

This PR introduces theme selection and dynamic icon switching to the browser extension, allowing users to customize their experience. It also includes several fixes to ensure the theme and icon updates work reliably.

Features

Theme Selection: Users can now choose between light, dark, and system themes from the extension's options page.
- A new Select component has been added to the UI library, based on shadcn/ui patterns.
- A custom ThemeProvider manages and applies the selected theme across the extension, persisting the choice in the plugin's settings.
- The Tailwind CSS darkMode strategy has been switched from media to selector to enable manual theme control.
Dynamic Icon Theming: The extension icon now dynamically changes to match the selected theme (light or dark).
- The icon update logic is triggered on initial load and whenever the theme settings are changed.

Implementation Details

State Management: The theme preference is now stored within the existing plugin settings structure, managed by the usePluginSettings hook.
UI Components: A new reusable Select component has been added in apps/browser-extension/src/components/ui/select.tsx.
Theming Logic: The core logic for applying themes and updating icons is now centralized in apps/browser-extension/src/utils/ThemeProvider.tsx.

Closes #1100

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/karakeep-app/karakeep/pull/1894 **Author:** [@qixing-jk](https://github.com/qixing-jk) **Created:** 9/6/2025 **Status:** ✅ Merged **Merged:** 9/7/2025 **Merged by:** [@MohamedBassem](https://github.com/MohamedBassem) **Base:** `main` ← **Head:** `extension/feat/dark-mode` --- ### 📝 Commits (8) - [`37074f9`](https://github.com/karakeep-app/karakeep/commit/37074f9ff491285dee2fb6b3f1b6c8e1e9641cb0) feat: add theme selection support to browser extension - [`ae6e54a`](https://github.com/karakeep-app/karakeep/commit/ae6e54ad1640a44f74ed8a1ea659fdc777f15e3e) feat(extension): add dynamic icon theme switching (#1100) - [`ab90a23`](https://github.com/karakeep-app/karakeep/commit/ab90a23ce1c3f13145ff58fd8ab6535de853db54) fix(extension): switch dark mode strategy from media to selector - [`ec34596`](https://github.com/karakeep-app/karakeep/commit/ec345967157988487612415b9605b5845d6bc2fe) fix(extension): move icon update logic to content script - [`1fcdaf6`](https://github.com/karakeep-app/karakeep/commit/1fcdaf616e595f257854f5761d41279aa91e1b9e) feat(settings): make theme field required in settings schema - [`4362663`](https://github.com/karakeep-app/karakeep/commit/4362663dcf26a23cb222b501e0e3056906651245) deps: Upgrade the extension deps - [`a26a1ec`](https://github.com/karakeep-app/karakeep/commit/a26a1ec5c6d41276d960b95d8a8411958a371307) Merge branch 'main' into extension/feat/dark-mode - [`d8b9de2`](https://github.com/karakeep-app/karakeep/commit/d8b9de23ff042da7d29c302b52db0dc26902b87a) minor fixes ### 📊 Changes **8 files changed** (+240 additions, -46 deletions) <details> <summary>View changed files</summary> 📝 `apps/browser-extension/package.json` (+2 -2) 📝 `apps/browser-extension/src/OptionsPage.tsx` (+22 -0) ➕ `apps/browser-extension/src/components/ui/select.tsx` (+158 -0) 📝 `apps/browser-extension/src/utils/ThemeProvider.tsx` (+36 -28) 📝 `apps/browser-extension/src/utils/providers.tsx` (+1 -3) 📝 `apps/browser-extension/src/utils/settings.ts` (+2 -0) 📝 `apps/browser-extension/tailwind.config.js` (+1 -1) 📝 `pnpm-lock.yaml` (+18 -12) </details> ### 📄 Description ### feat(extension): Add theme and dynamic icon support This PR introduces theme selection and dynamic icon switching to the browser extension, allowing users to customize their experience. It also includes several fixes to ensure the theme and icon updates work reliably. #### Features * **Theme Selection**: Users can now choose between `light`, `dark`, and `system` themes from the extension's options page. * A new `Select` component has been added to the UI library, based on `shadcn/ui` patterns. * A custom `ThemeProvider` manages and applies the selected theme across the extension, persisting the choice in the plugin's settings. * The Tailwind CSS `darkMode` strategy has been switched from `media` to `selector` to enable manual theme control. * **Dynamic Icon Theming**: The extension icon now dynamically changes to match the selected theme (`light` or `dark`). * The icon update logic is triggered on initial load and whenever the theme settings are changed. #### Implementation Details * **State Management**: The theme preference is now stored within the existing plugin settings structure, managed by the `usePluginSettings` hook. * **UI Components**: A new reusable `Select` component has been added in [`apps/browser-extension/src/components/ui/select.tsx`](apps/browser-extension/src/components/ui/select.tsx). * **Theming Logic**: The core logic for applying themes and updating icons is now centralized in [`apps/browser-extension/src/utils/ThemeProvider.tsx`](apps/browser-extension/src/utils/ThemeProvider.tsx). #### Related Issues * Closes #1100 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-03-02 11:59:46 +03:00

closed this issue
added the
pull-request
label

kerem referenced this issue

2026-03-02 11:59:48 +03:00

[PR #1923] [MERGED] Update 13-community-projects.md #1929

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/karakeep#1923

No description provided.

Rows
Columns