+
+
diff --git a/src/styles/themes/bluelight.css b/src/styles/themes/bluelight.css
new file mode 100644
index 0000000..f755475
--- /dev/null
+++ b/src/styles/themes/bluelight.css
@@ -0,0 +1,21 @@
+.bluelight {
+ --background: hsl(230 8% 85%) !important;
+ --foreground: hsl(229 26% 28%) !important;
+ --muted: hsl(230 12% 81%) !important;
+ --muted-foreground: hsl(230 12% 21%) !important;
+ --popover: hsl(230 8% 82%) !important;
+ --popover-foreground: hsl(229 26% 18%) !important;
+ --card: hsl(230 8% 83%) !important;
+ --card-foreground: hsl(229 26% 23%) !important;
+ --border: hsl(0 0% 80%) !important;
+ --input: hsl(0 0% 77%) !important;
+ --primary: hsl(223 42% 57%) !important;
+ --primary-foreground: hsl(0 0% 100%) !important;
+ --secondary: hsl(223 30% 75%) !important;
+ --secondary-foreground: hsl(223 30% 15%) !important;
+ --accent: hsl(230 8% 70%) !important;
+ --accent-foreground: hsl(230 8% 10%) !important;
+ --destructive: hsl(2 82% 30%) !important;
+ --destructive-foreground: hsl(2 82% 90%) !important;
+ --ring: hsl(223 42% 57%) !important;
+ }
diff --git a/src/styles/themes/cyberpunk.css b/src/styles/themes/cyberpunk.css
new file mode 100644
index 0000000..9903b0e
--- /dev/null
+++ b/src/styles/themes/cyberpunk.css
@@ -0,0 +1,21 @@
+.cyberpunk {
+ --background: hsl(253 41% 19%) !important;
+ --foreground: hsl(157 100% 50%) !important;
+ --muted: hsl(253 12% 23%) !important;
+ --muted-foreground: hsl(253 12% 73%) !important;
+ --popover: hsl(253 41% 16%) !important;
+ --popover-foreground: hsl(157 100% 60%) !important;
+ --card: hsl(253 41% 17%) !important;
+ --card-foreground: hsl(157 100% 55%) !important;
+ --border: hsl(253 31% 24%) !important;
+ --input: hsl(253 31% 27%) !important;
+ --primary: hsl(167 100% 50%) !important;
+ --primary-foreground: hsl(167 100% 10%) !important;
+ --secondary: hsl(167 30% 25%) !important;
+ --secondary-foreground: hsl(167 30% 85%) !important;
+ --accent: hsl(253 41% 34%) !important;
+ --accent-foreground: hsl(254 41% 94%) !important;
+ --destructive: hsl(5 92% 45%) !important;
+ --destructive-foreground: hsl(0 0% 100%) !important;
+ --ring: hsl(167 100% 50%) !important;
+ }
diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css
new file mode 100644
index 0000000..51f8fe1
--- /dev/null
+++ b/src/styles/themes/default.css
@@ -0,0 +1,24 @@
+@import "./bluelight.css";
+@import "./cyberpunk.css";
+:root {
+ --background: hsl(214 27.37% 7.55%);
+ --foreground: hsl(212 16% 82%);
+ --muted: hsl(214 12% 16%);
+ --muted-foreground: hsl(214 12% 66%);
+ --popover: hsl(214 27% 9%);
+ --popover-foreground: hsl(212 16% 92%);
+ --card: hsl(214 23.58% 9.03%);
+ --card-foreground: hsl(212 16% 87%);
+ --border: hsl(214 17% 17%);
+ --input: hsl(214 17% 20%);
+ --primary: hsl(194.72 85% 45%);
+ --primary-foreground: hsl(189 85% 5%);
+ --secondary: hsl(221.89 18.13% 22.46%);
+ --secondary-foreground: hsl(189 30% 85%);
+ --accent: hsl(221.89 18.13% 22.46%);
+ --accent-foreground: hsl(214 27% 87%);
+ --destructive: hsl(6 96% 59%);
+ --destructive-foreground: hsl(0 0% 100%);
+ --ring: hsl(215.09 100% 98.03%);
+ --radius: hsl(0.4rem);
+}
diff --git a/src/utils/.gitkeep b/src/utils/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/utils/settings.ts b/src/utils/settings.ts
new file mode 100644
index 0000000..c80c696
--- /dev/null
+++ b/src/utils/settings.ts
@@ -0,0 +1,49 @@
+import { StoreManager } from "./storage";
+
+class Settings {
+ #storageManager: StoreManager<"radius||settings">;
+ static #instance = new Set();
+
+ static async getInstance() {
+ function *get() {
+ for (const instance of Settings.#instance.keys()) {
+ yield instance!;
+ }
+ }
+
+ const ready = (): Promise
=> {
+ return new Promise((resolve) => {
+ const i = setInterval(() => {
+ if (Settings.#instance.size !== 0) {
+ clearInterval(i);
+ resolve(true);
+ }
+ }, 100);
+ })
+ }
+
+ await ready();
+ return get().next().value! as Settings;
+ }
+
+ theme(theme: string) {
+ this.#storageManager.setVal('theme', theme);
+ theme === 'default'
+ ? document.documentElement.className = ''
+ : document.documentElement.className = theme;
+ }
+
+ async *#init() {
+ yield this.theme(this.#storageManager.getVal('theme'));
+ }
+
+ constructor() {
+ this.#storageManager = new StoreManager("radius||settings");
+ Settings.#instance.add(this);
+ (async() => {
+ for await (const _ of this.#init());
+ })();
+ }
+}
+
+export { Settings }
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 0000000..71cbdf1
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,17 @@
+class StoreManager {
+ #prefix: string;
+ constructor(pref: Prefix) {
+ this.#prefix = pref;
+ }
+ getVal(key: string): string {
+ return localStorage.getItem(`${this.#prefix}||${key}`) as string;
+ }
+ setVal(key: string, val: string): void {
+ localStorage.setItem(`${this.#prefix}||${key}`, val);
+ }
+ removeVal(key: string): void {
+ localStorage.removeItem(`${this.#prefix}||${key}`);
+ }
+}
+
+export { StoreManager }