├── .gitignore
├── .gitmodules
├── LICENSE
├── README.md
├── assets
    ├── chrome.png
    ├── firefox.png
    ├── notionthemes.gif
    └── notionthemes.png
├── background.js
├── build.sh
├── icons
    ├── 128.png
    ├── 16.png
    └── 48.png
├── js
    ├── content.js
    ├── options.js
    └── popup.js
├── manifest.json
├── options.html
├── package-lock.json
└── popup.html


/.gitignore:
--------------------------------------------------------------------------------
1 | themes
2 | build


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "themes"]
2 | 	path = themes
3 | 	url = https://github.com/notionblog/themes.git
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 NotionStuff
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![NotionThemes](./assets/notionthemes.png)
 2 | 
 3 | <h1 align="center">Notion Themes</h1>
 4 | <p align="center">Make your Notion pretty with custom themes</p>
 5 | <div align="center">
 6 | <a href="https://addons.mozilla.org/en-US/firefox/addon/nbundle/"><img width="170" src="./assets/firefox.png"></a>
 7 | <a href="https://chrome.google.com/webstore/detail/nbundle/ijbhmpleignhmhbgmddlpmhclekghocp"><img width="170" src="./assets/chrome.png"></a>
 8 | </div>
 9 | <br>
10 | 
11 | ## ⚙️ Installation Instructions
12 | 
13 | ### 1. Download and install the extension
14 | 
15 | **Google Chrome / Microsoft Edge / Opera**
16 | 
17 | 1. Download this repo as a [ZIP file](https://github.com/notionblog/NotionThemes/releases/download/0.0.2/chrome.zip).
18 | 1. Unzip the file and you should have a folder named `chrome`.
19 | 1. In Chrome/Edge go to the extensions page (`chrome://extensions` or `edge://extensions` or `opera:extensions`).
20 | 1. Enable Developer Mode.
21 | 1. Drag the `chrome` folder anywhere on the page to import it (do not delete the folder afterwards).
22 | 
23 | **Mozilla Firefox**
24 | 
25 | 1. Download this file [firefox.xpi](https://github.com/notionblog/NotionThemes/releases/download/0.0.2/firefox.xpi)
26 | 2. In Firefox go to the addons page `about:addons` or click `CMD+SHIFT+A`
27 | 3. drag and drop the file on the page or click `install Add-on From file ...`
28 | 
29 | ### 2. Guide
30 | 
31 | 1. Pin the extension in your browser
32 | 2. Open it and click `Choose a theme` blue button
33 | 3. You'll be redirected to options page where you can select a theme
34 | 4. Refresh your Notion page
35 | 5. Enjoy!!
36 | 
37 | ## 📝 Note
38 | 
39 | - Dark themes will work only if you switched to the dark Mode in Notion
40 | 
41 | ## ✨ Feedback
42 | 
43 | All bugs, feature requests, pull requests, feedback, etc., are welcome. [Create an issue](https://github.com/notionblog/NotionThemes/issues).
44 | 
45 | ## 💖 Donate
46 | 
47 | If you’d like to support my work and efforts, your donations mean a lot <3
48 | 
49 | <a href='https://ko-fi.com/M4M37F1UV' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
50 | 


--------------------------------------------------------------------------------
/assets/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notionblog/NotionThemes/54fb50a46caf25491f8ff1ff68d3c14aed13e39a/assets/chrome.png


--------------------------------------------------------------------------------
/assets/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notionblog/NotionThemes/54fb50a46caf25491f8ff1ff68d3c14aed13e39a/assets/firefox.png


--------------------------------------------------------------------------------
/assets/notionthemes.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notionblog/NotionThemes/54fb50a46caf25491f8ff1ff68d3c14aed13e39a/assets/notionthemes.gif


--------------------------------------------------------------------------------
/assets/notionthemes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notionblog/NotionThemes/54fb50a46caf25491f8ff1ff68d3c14aed13e39a/assets/notionthemes.png


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 2 |   if (request.query == "getTheme") {
 3 |     const url = request.url;
 4 |     fetch(url)
 5 |       .then((response) => response.text())
 6 |       .then((response) => sendResponse(response))
 7 |       .catch();
 8 |     return true;
 9 |   } else if (request.query == "setTheme") {
10 |     const theme = request.theme;
11 |     chrome.storage.sync.set({ selectedTheme: theme }, function () {
12 |       sendResponse(true);
13 |     });
14 |   }
15 | });
16 | 


--------------------------------------------------------------------------------
/build.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | # Copy neccesary files
 4 | mkdir ext
 5 | cp -r  ./icons ./js ./background.js ./options.html ./popup.html ./manifest.json ./ext
 6 | 
 7 | mkdir build
 8 | cd ext 
 9 | 
10 | # Generate Firefox .xpi
11 | 7z a -r ../build/firefox.xpi *
12 | 
13 | # Generate Chrome .crx
14 | 7z a -r ../build/chrome.zip *
15 | 
16 | cd ..
17 | # delete uneccesary files
18 | rm -rf ./ext


--------------------------------------------------------------------------------
/icons/128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notionblog/NotionThemes/54fb50a46caf25491f8ff1ff68d3c14aed13e39a/icons/128.png


--------------------------------------------------------------------------------
/icons/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notionblog/NotionThemes/54fb50a46caf25491f8ff1ff68d3c14aed13e39a/icons/16.png


--------------------------------------------------------------------------------
/icons/48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/notionblog/NotionThemes/54fb50a46caf25491f8ff1ff68d3c14aed13e39a/icons/48.png


--------------------------------------------------------------------------------
/js/content.js:
--------------------------------------------------------------------------------
 1 | const BASE_URL = "https://notionthemes.netlify.app";
 2 | 
 3 | const sendMessage = async (params) => {
 4 |   return new Promise((resolve, reject) => {
 5 |     try {
 6 |       chrome.runtime.sendMessage(params, (response) => {
 7 |         resolve(response);
 8 |       });
 9 |     } catch (err) {
10 |       reject(err);
11 |     }
12 |   });
13 | };
14 | 
15 | const getStorageData = async (params) => {
16 |   return new Promise((resolve, reject) => {
17 |     try {
18 |       chrome.storage.sync.get(params, async (result) => {
19 |         if (result) {
20 |           resolve(result);
21 |         } else {
22 |           resolve({ name: "default", path: "default", style: "default" });
23 |         }
24 |       });
25 |     } catch (err) {
26 |       reject(err);
27 |     }
28 |   });
29 | };
30 | 
31 | const getTheme = async () => {
32 |   let { path, name, style, font } = await getStorageData([
33 |     "path",
34 |     "name",
35 |     "style",
36 |     "font",
37 |   ]);
38 | 
39 |   if (path && name && style) {
40 |     const global = await sendMessage({
41 |       query: "getTheme",
42 |       url: `${BASE_URL}/${style}/global.css`,
43 |     });
44 |     const theme = await sendMessage({
45 |       query: "getTheme",
46 |       url: `${BASE_URL}/${path}`,
47 |     });
48 |     let customFont = ``;
49 | 
50 |     if (global !== undefined && theme !== undefined) {
51 |       const head = document.head || document.getElementsByTagName("head")[0],
52 |         style = document.createElement("style");
53 |       head.appendChild(style);
54 |       style.type = "text/css";
55 | 
56 |       if (font && font !== "Default") {
57 |         customFont = `
58 |           @import url('https://fonts.googleapis.com/css2?family=${font.replace(
59 |             " ",
60 |             "+"
61 |           )}:wght@300;400;500;700&display=swap');
62 |           #notion-app * {
63 |             font-family:${font}, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol" !important;
64 |           }
65 |       `;
66 |       }
67 | 
68 |       if (style.styleSheet) {
69 |         style.styleSheet.cssText = `${customFont}  \n ${theme} \n ${global}`;
70 |       } else {
71 |         style.appendChild(
72 |           document.createTextNode(`${customFont}  \n ${theme} \n ${global}`)
73 |         );
74 |       }
75 |     } else {
76 |       console.log("error fetching theme");
77 |     }
78 |   }
79 | };
80 | 
81 | getTheme();
82 | 


--------------------------------------------------------------------------------
/js/options.js:
--------------------------------------------------------------------------------
  1 | const BASE_URL = "https://notionthemes.netlify.app";
  2 | 
  3 | // Fetch themes from the json config file
  4 | const getThemes = async () => {
  5 |   try {
  6 |     const data = await fetch(`${BASE_URL}/themes.json`);
  7 |     return await data.json();
  8 |   } catch (err) {
  9 |     console.error(err);
 10 |     return null;
 11 |   }
 12 | };
 13 | 
 14 | // Fetch fonts
 15 | const getFonts = async () => {
 16 |   try {
 17 |     const data = await fetch(`${BASE_URL}/fonts.json`);
 18 |     return await data.json();
 19 |   } catch (err) {
 20 |     console.error(err);
 21 |     return null;
 22 |   }
 23 | };
 24 | 
 25 | // get Storage Data
 26 | const getStorageData = async (params) => {
 27 |   return new Promise((resolve, reject) => {
 28 |     try {
 29 |       chrome.storage.sync.get(params, async (result) => {
 30 |         if (result) {
 31 |           resolve(result);
 32 |         } else {
 33 |           resolve({ name: "default" });
 34 |         }
 35 |       });
 36 |     } catch (err) {
 37 |       reject(err);
 38 |     }
 39 |   });
 40 | };
 41 | 
 42 | // Set storage data
 43 | const setStorageData = async (params) => {
 44 |   return new Promise((resolve, reject) => {
 45 |     try {
 46 |       chrome.storage.sync.set(params, async (result) => {
 47 |         if (result) {
 48 |           resolve(true);
 49 |         } else {
 50 |           resolve(false);
 51 |         }
 52 |       });
 53 |     } catch (err) {
 54 |       reject(err);
 55 |     }
 56 |   });
 57 | };
 58 | 
 59 | // Set theme
 60 | const setTheme = async (theme, target) => {
 61 |   chrome.storage.sync.set(
 62 |     {
 63 |       path: theme.path,
 64 |       name: theme.name,
 65 |       img: theme.img,
 66 |       style: theme.style,
 67 |     },
 68 |     function () {
 69 |       const toast = document.querySelector("#mainToast");
 70 |       toast.classList.remove("hidden");
 71 | 
 72 |       const selected = document.querySelector(".selected");
 73 |       if (selected) {
 74 |         selected.classList.remove("selected");
 75 |       }
 76 |       if (target) {
 77 |         target.classList.add("selected");
 78 |       }
 79 | 
 80 |       setTimeout(() => {
 81 |         toast.classList.add("hidden");
 82 |       }, 3000);
 83 |     }
 84 |   );
 85 | };
 86 | 
 87 | // Preview fonts
 88 | const previewFonts = (data) => {
 89 |   const select = document.getElementById("selectFont");
 90 |   data.forEach((el) => {
 91 |     let opt = document.createElement("option");
 92 |     opt.value = el;
 93 |     opt.innerHTML = el;
 94 |     select.appendChild(opt);
 95 |   });
 96 | };
 97 | 
 98 | // Preview Themes
 99 | const previewThemes = async (data) => {
100 |   const themes = Object.entries(data).map((theme) => {
101 |     return {
102 |       name: theme[0],
103 |       ...theme[1],
104 |     };
105 |   });
106 | 
107 |   let { name } = await getStorageData(["name"]);
108 | 
109 |   // Filter themes with style type
110 |   const dark = themes.filter((theme) => theme.style.toLowerCase() === "dark");
111 |   const ligth = themes.filter((theme) => theme.style.toLowerCase() === "light");
112 | 
113 |   // Load themes to DOM
114 |   const darkThemesContainer = document.querySelector("#darkThemes");
115 |   const ligthThemesContainer = document.querySelector("#lightThemes");
116 | 
117 |   dark.forEach((theme) => {
118 |     const li = document.createElement("li");
119 |     li.setAttribute("id", theme.name);
120 |     li.setAttribute("class", `theme ${name === theme.name ? "selected" : ""}`);
121 |     darkThemesContainer.appendChild(li);
122 |     li.innerHTML = `<img src="${BASE_URL}${theme.img}" alt="${theme.name}" />
123 |         <div class="description">
124 |           <span class="indicator"></span>
125 |           <span class="name">${theme.name}</span>
126 |          
127 |         </div>`;
128 |     li.addEventListener("click", (event) => {
129 |       setTheme(theme, event.currentTarget);
130 |     });
131 |   });
132 |   ligth.forEach((theme) => {
133 |     const li = document.createElement("li");
134 |     li.setAttribute("id", theme.name);
135 |     li.setAttribute("class", `theme ${name === theme.name ? "selected" : ""}`);
136 |     ligthThemesContainer.appendChild(li);
137 |     li.innerHTML = `<img src="${BASE_URL}${theme.img}" alt="${theme.name}" />
138 |         <div class="description">
139 |         <span class="indicator"></span>
140 |           <span class="name">${theme.name}</span>
141 | 
142 |         </div>`;
143 |     li.addEventListener("click", (event) => {
144 |       setTheme(theme, event.currentTarget);
145 |     });
146 |   });
147 | };
148 | 
149 | // Reset to default theme
150 | const resetTheme = async () => {
151 |   await setTheme({
152 |     path: null,
153 |     name: "default",
154 |     img: null,
155 |     style: null,
156 |   });
157 | };
158 | 
159 | // Config selected theme
160 | 
161 | const fontSelectConfig = async () => {
162 |   let { font } = await getStorageData(["font"]);
163 |   const selectFont = document.querySelector("#selectFont");
164 |   selectFont.value = font;
165 | };
166 | 
167 | // Load Themes
168 | window.onload = async () => {
169 |   /*
170 |     State
171 |   */
172 |   // Themes
173 |   const data = await getThemes();
174 |   if (data !== null) previewThemes(data);
175 | 
176 |   // Fonts
177 |   const { fonts } = await getFonts();
178 |   if (fonts !== null) previewFonts(fonts);
179 | 
180 |   // Selected font
181 |   fontSelectConfig();
182 | 
183 |   /*
184 |     Actions
185 |   */
186 | 
187 |   // Reset button
188 |   const resetBtn = document.querySelector("#resetTheme");
189 |   resetBtn.addEventListener("click", () => {
190 |     resetTheme();
191 |   });
192 |   // selectFont
193 |   const selectFont = document.querySelector("#selectFont");
194 |   selectFont.addEventListener("change", async (event) => {
195 |     console.log(event.target.value);
196 |     await setStorageData({ font: event.target.value });
197 |   });
198 | };
199 | 


--------------------------------------------------------------------------------
/js/popup.js:
--------------------------------------------------------------------------------
1 | document.querySelector("#go-to-options").addEventListener("click", function () {
2 |   if (chrome.runtime.openOptionsPage) {
3 |     chrome.runtime.openOptionsPage();
4 |   } else {
5 |     window.open(chrome.runtime.getURL("options.html"));
6 |   }
7 | });
8 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 3,
 3 |   "name": "Notion Themes",
 4 |   "version": "0.0.2",
 5 |   "description": "Make your Notion pretty with custom themes.",
 6 |   "permissions": ["storage"],
 7 |   "host_permissions": ["https://notionthemes.netlify.app/"],
 8 |   "icons": {
 9 |     "16": "icons/16.png",
10 |     "48": "icons/48.png",
11 |     "128": "icons/128.png"
12 |   },
13 |   "background": {
14 |     "service_worker": "background.js"
15 |   },
16 |   "content_scripts": [
17 |     {
18 |       "matches": ["https://www.notion.so/*"],
19 |       "js": ["js/content.js"]
20 |     }
21 |   ],
22 |   "action": {
23 |     "default_title": "Choose a theme",
24 |     "default_popup": "popup.html",
25 |     "default_icon": {
26 |       "19": "icons/16.png",
27 |       "38": "icons/48.png"
28 |     }
29 |   },
30 |   "options_ui": {
31 |     "page": "options.html",
32 |     "open_in_tab": true
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/options.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <title>Choose a Notion theme</title>
  4 |     <meta charset="UTF-8" />
  5 | 
  6 |     <style>
  7 |       * {
  8 |         box-sizing: border-box;
  9 |       }
 10 | 
 11 |       body {
 12 |         padding: 5% 10%;
 13 |         background-color: #ffffff;
 14 |       }
 15 | 
 16 |       h1 {
 17 |         font-size: 20pt;
 18 |         margin-bottom: 3%;
 19 |       }
 20 | 
 21 |       h2 {
 22 |         font-size: 10pt;
 23 |       }
 24 | 
 25 |       .container {
 26 |         max-width: 1300px;
 27 |         margin: auto;
 28 |         align-items: center;
 29 |       }
 30 | 
 31 |       .theme {
 32 |         overflow: hidden;
 33 |         width: 220px;
 34 |         display: inline-block;
 35 |         margin-right: 25px;
 36 |         margin-bottom: 20px;
 37 |         background-color: #fbfafa;
 38 |         color: #323232;
 39 |         border: 0.8px solid #d9d9d9;
 40 |         border-radius: 15px;
 41 |         padding-bottom: 10px;
 42 |         cursor: pointer;
 43 |         font-size: 11px;
 44 |       }
 45 | 
 46 |       .theme img {
 47 |         width: 100%;
 48 |         display: block;
 49 |         margin: auto;
 50 |         border-bottom: 0.8px solid #d9d9d9;
 51 |       }
 52 | 
 53 |       .theme .description {
 54 |         align-items: center;
 55 |         padding: 2px 15px;
 56 |         margin-top: 10px;
 57 |         font-size: 14px;
 58 |         font-weight: bold;
 59 |         display: flex;
 60 |       }
 61 | 
 62 |       .theme .description span {
 63 |         display: inline-block;
 64 |       }
 65 | 
 66 |       .theme .tag {
 67 |         padding: 2px 4px;
 68 |         font-size: 12px;
 69 |         color: #1a1d26;
 70 |         background-color: darksalmon;
 71 |         border-radius: 5px;
 72 |         margin: 10px 0px 0 3px;
 73 |         display: inline-block;
 74 |       }
 75 | 
 76 |       .selected {
 77 |         border: 2px solid #41bfe5;
 78 |       }
 79 | 
 80 |       .copyright {
 81 |         font-size: 13pt;
 82 |       }
 83 | 
 84 |       .mainToast {
 85 |         background-color: #00c14d;
 86 |         text-align: center;
 87 |         padding: 10px 20px;
 88 |         border-radius: 10px;
 89 |         display: inline-block;
 90 |         color: white;
 91 |         font-size: 15pt;
 92 |         position: fixed;
 93 |         top: 5%;
 94 |         right: 5%;
 95 |         transition: transform 0.3s;
 96 |         transform: translate(0);
 97 |         opacity: 1;
 98 |       }
 99 | 
100 |       .hidden {
101 |         transform: translate(9999px);
102 |         opacity: 0;
103 |       }
104 | 
105 |       .indicator {
106 |         width: 15px;
107 |         height: 15px;
108 |         padding: 1.2px;
109 |         border-radius: 50%;
110 |         border: 1px solid #d7d1d1;
111 |         margin: 0px 5px;
112 |       }
113 | 
114 |       .selected .indicator {
115 |         background-color: #41bfe5;
116 |         border-color: #41bfe5;
117 |       }
118 |       .warningBtn {
119 |         padding: 7px 26px;
120 |         background: #df2a2a;
121 |         color: #ffffff;
122 |         border: none;
123 |         outline: none;
124 |         border-radius: 3px;
125 |         cursor: pointer;
126 |         transition: 0.2s ease-in-out;
127 |       }
128 |       .warningBtn:hover {
129 |         background: #af4e4e;
130 |       }
131 |       .selectFont {
132 |         padding: 10px 0px;
133 |         border-radius: 5px;
134 |         min-width: 200px;
135 |       }
136 |       .navBar {
137 |         margin-bottom: 5%;
138 |         display: flex;
139 |         justify-content: space-between;
140 |       }
141 |       .navBar ul {
142 |         display: flex;
143 |         align-items: center;
144 |         list-style: none;
145 |       }
146 |       .navBar ul li {
147 |         margin-left: 20px;
148 |         display: inline-block;
149 |       }
150 |       .navBar ul .follow {
151 |         background-color: #219eeb;
152 |         padding: 12px;
153 |         border-radius: 26px;
154 |         min-width: 263px;
155 |         text-align: center;
156 |       }
157 |       footer {
158 |         margin-top: 10%;
159 |         padding-top: 10px;
160 |         text-align: center;
161 |       }
162 |     </style>
163 |   </head>
164 | 
165 |   <body>
166 |     <div class="container">
167 |       <nav class="navBar">
168 |         <img src="./icons/48.png" width="48" height="48" />
169 |         <ul>
170 |           <li class="follow">
171 |             <a
172 |               href="https://twitter.com/intent/follow?user_id=1394691897562746881"
173 |               style="display: inline-block"
174 |             >
175 |               <img
176 |                 src="https://img.shields.io/twitter/follow/_yudax?style=social"
177 |                 height="30"
178 |               />
179 |             </a>
180 |           </li>
181 |           <li>
182 |             <a href="https://ko-fi.com/M4M37F1UV" target="_blank"
183 |               ><img
184 |                 height="50"
185 |                 style="border: 0px; height: 50px"
186 |                 src="https://cdn.ko-fi.com/cdn/kofi1.png?v=3"
187 |                 border="0"
188 |                 alt="Buy Me a Coffee at ko-fi.com"
189 |             /></a>
190 |           </li>
191 |         </ul>
192 |       </nav>
193 |       <div id="mainToast" class="mainToast hidden">
194 |         The theme has been applied 🥳 <br /><small
195 |           >Don't forget to refresh Notion to see the changes</small
196 |         >
197 |       </div>
198 | 
199 |       <h1>🎨 Select a theme</h1>
200 |       <div>
201 |         <h2>☀️ Light</h2>
202 |         <ul id="lightThemes"></ul>
203 |       </div>
204 | 
205 |       <div>
206 |         <h2>🌙 Dark</h2>
207 |         <ul id="darkThemes"></ul>
208 |       </div>
209 |       <h1>⚙️ Configuration</h1>
210 | 
211 |       <div>
212 |         <h2>🔮 Font</h2>
213 |         <label>
214 |           <select id="selectFont" class="selectFont" name="selectFont">
215 |             <option value="Default">Default</option>
216 |           </select>
217 |         </label>
218 |       </div>
219 |       <br />
220 |       <div>
221 |         <h2>🔄 Reset to default theme</h2>
222 |         <button id="resetTheme" class="warningBtn">Reset</button>
223 |       </div>
224 |       <br />
225 | 
226 |       <footer>
227 |         <span>
228 |           <a href="https://notionthemes.yudax.me?ref=NotionThemes"
229 |             >NotionThemes</a
230 |           >, Made with ❤️ by
231 |           <a href="https://www.yudax.me?ref=NotionThemes">Yudax</a>
232 |         </span>
233 |       </footer>
234 |     </div>
235 | 
236 |     <script src="js/options.js"></script>
237 |   </body>
238 | </html>
239 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "NotionThemes",
3 |   "lockfileVersion": 2,
4 |   "requires": true,
5 |   "packages": {}
6 | }
7 | 


--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Notion Build</title>
 4 |     <style>
 5 |       html {
 6 |         width: 300px;
 7 |         min-height: 100px;
 8 |         padding: 10px;
 9 |         text-align: center;
10 |       }
11 |       #go-to-options {
12 |         margin: 20px;
13 |         background-color: #41bfe5;
14 |         border-radius: 5px;
15 |         color: #ffffff;
16 |         font-weight: bold;
17 |         border: none;
18 |         padding: 10px;
19 |         cursor: pointer;
20 |       }
21 |     </style>
22 |   </head>
23 | 
24 |   <body>
25 |     <div class="container">
26 |       <header>
27 |         <img src="/icons/128.png" width="50px" alt="Notion Web Themes" />
28 |       </header>
29 | 
30 |       <main id="app">
31 |         <button id="go-to-options">Choose a theme</button>
32 |       </main>
33 |       <br />
34 |       <footer>
35 |         NotionThemes &bull; Made By
36 |         <a href="https://twitter.com/_yudax" target="_blank">Yudax</a> &bull;
37 |         <a href="https://ko-fi.com/yudax" target="_blank">Donate</a>
38 |       </footer>
39 |     </div>
40 |     <script src="js/popup.js"></script>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------