Skip to content

(WIP)feat: Customizable Theme #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
prem-k-r wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

(WIP)feat: Customizable Theme #119

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b2a133
Custom theme + refactor
prem-k-r Jan 1, 2026
8aeb79e
Merge branch 'main' into edit-theme-refactor
prem-k-r Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -631,10 +631,11 @@ to attach them to the start of each source file to most effectively
state the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.

Material You NewTab: A browser extension that replaces your default
Material You New Tab: A browser extension that replaces your default
New Tab or homepage with a sleek, modern interface inspired by
Google’s Material You design.
Copyright (C) 2023-2025 XengShi
Copyright (C) 2024-2026 Prem

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
Expand All @@ -654,7 +655,7 @@ Also add information on how to contact you by electronic and paper mail.
If the program does terminal interaction, make it output a short
notice like this when it starts in an interactive mode:

Material You NewTab Copyright (C) 2023-2025 XengShi
Material You New Tab Copyright (C) 2024-2026 Prem
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type `show c' for details.
Expand Down
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@ Here is the star history chart for the **MYNT: Material You New Tab** repository

MYNT: Material You New Tab prioritizes your privacy and is focused solely on providing a better browsing experience.
We make the following commitments:

- **No commercialization** — absolutely no ads, paid features, or premium tiers
- **No trackers** — no data collection, analytics, or background reporting of any kind
- **No access to personal information** — all settings, cache, and preferences are stored locally in your browser
Expand All @@ -295,7 +296,7 @@ For more details, read our [Privacy Policy](https://prem-k-r.github.io/MaterialY

## 📜 License

Copyright (C) 2024-2025 Prem Kumar
Copyright (C) 2024-2026 Prem Kumar

Copyright (C) 2023-2025 XengShi

Expand Down
74 changes: 52 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!--
Material You NewTab
Copyright (c) 2023-2025 XengShi
Copyright (c) 2024-2026 Prem, 2023-2025 XengShi
Licensed under the GNU General Public License v3.0 (GPL-3.0)
You should have received a copy of the GNU General Public License along with this program.
If not, see <https://www.gnu.org/licenses/>.
Expand Down Expand Up @@ -1194,6 +1194,14 @@ <h3 id="aiSettingsHeader">AI Tools Settings</h3>
</filter>
</svg>

<!-- ----------- Adjustment Icon -------------- -->
<svg style="display: none;">
<symbol id="adjustment-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path style="transform: scale(1.1); transform-origin: center;"
d="M12 21q-.425 0-.712-.288T11 20v-4q0-.425.288-.712T12 15t.713.288T13 16v1h7q.425 0 .713.288T21 18t-.288.713T20 19h-7v1q0 .425-.288.713T12 21m-8-2q-.425 0-.712-.288T3 18t.288-.712T4 17h4q.425 0 .713.288T9 18t-.288.713T8 19zm4-4q-.425 0-.712-.288T7 14v-1H4q-.425 0-.712-.288T3 12t.288-.712T4 11h3v-1q0-.425.288-.712T8 9t.713.288T9 10v4q0 .425-.288.713T8 15m4-2q-.425 0-.712-.288T11 12t.288-.712T12 11h8q.425 0 .713.288T21 12t-.288.713T20 13zm4-4q-.425 0-.712-.288T15 8V4q0-.425.288-.712T16 3t.713.288T17 4v1h3q.425 0 .713.288T21 6t-.288.713T20 7h-3v1q0 .425-.288.713T16 9M4 7q-.425 0-.712-.288T3 6t.288-.712T4 5h8q.425 0 .713.288T13 6t-.288.713T12 7z" />
</symbol>
</svg>

<!-- ------Menu-bar----------- -->
<div class="menuBar" id="menuBar" style="display: none;">
<div class="menuCont" id="menuCont">
Expand Down Expand Up @@ -1267,11 +1275,8 @@ <h1>Material You New Tab</h1>
</div>
<label class="switch">
<button id="shortcutEditButton">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"
style="transform: scale(1.1); transform-origin: center;">
<path
d="M12 21q-.425 0-.712-.288T11 20v-4q0-.425.288-.712T12 15t.713.288T13 16v1h7q.425 0 .713.288T21 18t-.288.713T20 19h-7v1q0 .425-.288.713T12 21m-8-2q-.425 0-.712-.288T3 18t.288-.712T4 17h4q.425 0 .713.288T9 18t-.288.713T8 19zm4-4q-.425 0-.712-.288T7 14v-1H4q-.425 0-.712-.288T3 12t.288-.712T4 11h3v-1q0-.425.288-.712T8 9t.713.288T9 10v4q0 .425-.288.713T8 15m4-2q-.425 0-.712-.288T11 12t.288-.712T12 11h8q.425 0 .713.288T21 12t-.288.713T20 13zm4-4q-.425 0-.712-.288T15 8V4q0-.425.288-.712T16 3t.713.288T17 4v1h3q.425 0 .713.288T21 6t-.288.713T20 7h-3v1q0 .425-.288.713T16 9M4 7q-.425 0-.712-.288T3 6t.288-.712T4 5h8q.425 0 .713.288T13 6t-.288.713T12 7z" />
<svg width="24" height="24">
<use href="#adjustment-icon" />
</svg>
</button>
</label>
Expand Down Expand Up @@ -1333,11 +1338,8 @@ <h1>Material You New Tab</h1>
</div>
<label class="switch">
<button id="aiToolsEditButton">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"
style="transform: scale(1.1); transform-origin: center;">
<path
d="M12 21q-.425 0-.712-.288T11 20v-4q0-.425.288-.712T12 15t.713.288T13 16v1h7q.425 0 .713.288T21 18t-.288.713T20 19h-7v1q0 .425-.288.713T12 21m-8-2q-.425 0-.712-.288T3 18t.288-.712T4 17h4q.425 0 .713.288T9 18t-.288.713T8 19zm4-4q-.425 0-.712-.288T7 14v-1H4q-.425 0-.712-.288T3 12t.288-.712T4 11h3v-1q0-.425.288-.712T8 9t.713.288T9 10v4q0 .425-.288.713T8 15m4-2q-.425 0-.712-.288T11 12t.288-.712T12 11h8q.425 0 .713.288T21 12t-.288.713T20 13zm4-4q-.425 0-.712-.288T15 8V4q0-.425.288-.712T16 3t.713.288T17 4v1h3q.425 0 .713.288T21 6t-.288.713T20 7h-3v1q0 .425-.288.713T16 9M4 7q-.425 0-.712-.288T3 6t.288-.712T4 5h8q.425 0 .713.288T13 6t-.288.713T12 7z" />
<svg width="24" height="24">
<use href="#adjustment-icon" />
</svg>
</button>
</label>
Expand Down Expand Up @@ -1664,15 +1666,14 @@ <h1>Material You New Tab</h1>
<!-- ---🟡--- -->

<div class="themingStuff">
<!-- ⚫🟣🔵🔴🟡🟢🟠⚪ -->
<div class="btn" id="themeButton">
<svg fill="none" height="100%" viewBox="0 0 20 20" width="100%"
xmlns="http://www.w3.org/2000/svg">
<path id="themeIconSvg" class="accentColor"
d="M14.2778 10a1.1668 1.1668 0 0 1-.825-1.9916 1.1668 1.1668 0 0 1 1.9916.825A1.1666 1.1666 0 0 1 14.2778 10Zm-2.3334-3.1111a1.1666 1.1666 0 1 1 0-2.3332 1.1666 1.1666 0 0 1 0 2.3332Zm-3.8888 0a1.1667 1.1667 0 1 1 0-2.3334 1.1667 1.1667 0 0 1 0 2.3334ZM5.7222 10a1.1667 1.1667 0 1 1 0-2.3334 1.1667 1.1667 0 0 1 0 2.3334ZM10 3a7 7 0 0 0 0 14 1.1668 1.1668 0 0 0 1.1667-1.1667c0-.3033-.1167-.5755-.3034-.7777-.1789-.21-.2955-.4823-.2955-.7778a1.1668 1.1668 0 0 1 1.1666-1.1667h1.3767A3.889 3.889 0 0 0 17 9.2222C17 5.7844 13.8656 3 10 3Z" />
</svg>
</div>
<!-- -------- -->

<div class="colorsContainer" id="colorsContainer">
<input class="colorPlate" name="color" type="radio" value="red">
<input class="colorPlate" name="color" type="radio" value="yellow">
Expand All @@ -1681,24 +1682,34 @@ <h1>Material You New Tab</h1>
<input id="dfChecked" class="colorPlate" name="color" type="radio" checked
value="blue">

<!-- -------- -->
<input class="colorPlate" name="color" type="radio" value="pink">
<input class="colorPlate" name="color" type="radio" value="purple">
<input class="colorPlate" name="color" type="radio" value="orange">
<input class="colorPlate" name="color" type="radio" value="brown">
<input class="colorPlate" name="color" type="radio" value="silver">

<!-- -------- -->

<input class="colorPlate" name="color" type="radio" value="peach">
<input class="colorPlate" id="darkTheme" name="color" type="radio"
<input class="colorPlate" id="blackTheme" name="color" type="radio"
value="dark">

<!-- ----Color Picker || ColorPicker---- -->
<label id="rangColor" class="colorPlate colorPickerLabel"
for="colorPicker">Pick color</label>
<input type="color" id="colorPicker" autocomplete="off" value="#EA1010" />
<!-- ----End of Color Picker || ColorPicker---- -->
<div class="pickerContainer">
<label class="colorPickerBtn" for="colorPicker">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
width="21" height="21" fill="none">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="m13.5 7.411 3.5-3.5a2.828 2.828 0 1 1 4 4l-3.5 3.5m-5.5-5.5 7 7m-4 1-3.594 3.594c-.52.52-.779.779-1.081.964a3 3 0 0 1-.868.36c-.345.082-.712.082-1.445.082H7l-3 2 2-3V16.9c0-.733 0-1.1.083-1.445a3 3 0 0 1 .359-.868c.185-.302.445-.562.964-1.08L11 9.91" />
</svg>
<input type="color" id="colorPicker" value="#4382EC"
autocomplete="off" />
</label>

<button class="colorPickerBtn editor" id="colorEditor">
<svg width="22" height="22">
<use href="#adjustment-icon" />
</svg>
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1944,6 +1955,25 @@ <h1>Material You New Tab</h1>
</div>
<!-- ------end of Menu-bar----------- -->
<div id="menuButton"></div>

<!-- Color Editor Modal -->
<div class="colorModal" id="colorModal">
<div class="modalContent">
<div class="modalHeader">
<h2>Edit Theme Colors</h2>
<button class="closeBtn" id="closeModal">&times;</button>
</div>

<div id="colorVariables">
<!-- Color variables will be dynamically inserted here -->
</div>

<div class="modalActions">
<button class="btnModal btnSecondary" id="resetColors">Reset</button>
<button class="btnModal btnPrimary" id="saveColors">Save</button>
</div>
</div>
</div>
<!-- ending-of-body -->

</body>
Expand Down
1 change: 0 additions & 1 deletion locales/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,6 @@ const en = {

// Wallpaper and settings
"uploadWallpaperText": "Upload Wallpaper", // Keep this short
"rangColor": "Pick color", // Keep this short
"opacityTitle": "Opacity",
"adjustOpacityDesc": "Adjust interface transparency",
"backupText": "Backup",
Expand Down
2 changes: 1 addition & 1 deletion manifest(firefox).json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "MYNT: Material You New Tab",
"version": "3.3.3",
"version": "3.3.4",
"description": "A Simple New Tab (browser's home page) inspired by Google's 'Material You' design.",
"permissions": [
"search",
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "MYNT: Material You New Tab",
"version": "3.3.3",
"version": "3.3.4",
"description": "A Simple New Tab (browser's home page) inspired by Google's 'Material You' design.",
"permissions": ["search"],
"optional_permissions": ["bookmarks", "favicon"],
Expand Down
1 change: 0 additions & 1 deletion scripts/languages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,6 @@ function applyLanguage(lang) {
"uploadWallpaperText",
"backupText",
"restoreText",
"rangColor",
"bookmarksText",
"bookmarksInfo",
"bookmarksHeading",
Expand Down
Loading