Theme improvements (#16)

* Add new themes
* Change purple to violet
* Add placeholder color
* Add text glow option
* Add available theme list
* Update markdown files
* Bump version to 2.1.0

.github/CONTRIBUTING.md

@@ -67,7 +67,13 @@ In order to contribute to the source of the project
 I really appreciate contributions in the form of new themes to the project. If you'd like to add a new theme, please follow these steps:
 
 1. Create a new `json` file in the `public/themes` folder using the theme name as the file name. Please use `kebab-case` for the file name. You can use the default theme file as a starting point.
-2. Test your theme by running the project locally (`yarn dev`)
+2. Add the theme name to the array in the `public/themes.json` file. Please use the same name as the file and use alphabetical order.
+3. Test your theme by running the project locally by running `yarn dev` command
+   1. Use `set theme` command to see your theme on the list
+   2. Use `set theme <theme-name>` to see your theme in action
+
+> **Warning**
+> Since themes are stored in the local storage, you should run the `set theme <theme-name>` command to see your changes.
 
 More information about themes can be found in the [Wiki Page](https://github.com/excalith/excalith-start-page/wiki/Themes).
 

README.md

@@ -56,7 +56,8 @@ Clone this repo and run `yarn dev` command to host it locally on your machine
 - Show info with `fetch` command (time, date, system and browser data)
 - Update your configuration with `config` command
   - `config import <url>` - Import configuration from a URL to your local storage
-  - `config theme <theme-name>` - Switches between [available themes](./public/themes/)
+  - `config theme` - Lists all [available themes](./public/themes/)
+  - `config theme <theme-name>` - Switches between themes and sets your local configuration
   - `config edit` - Edit local configuration within editor
   - `config reset` - Reset your configuration to default
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "start-page",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",

public/themes.json

@@ -0,0 +1,10 @@
+[
+	"default",
+	"catppuccin",
+	"dracula",
+	"hacker",
+	"monokai",
+	"nord",
+	"onedark",
+	"synthwave"
+]

public/themes/catppuccin.json

@@ -11,6 +11,6 @@
 	"yellow": "#f9e2af",
 	"cyan": "#94e2d5",
 	"magenta": "#f5c2e7",
-	"purple": "#caa4f7",
+	"violet": "#caa4f7",
 	"orange": "#fbb185"
 }

public/themes/default.json

@@ -11,6 +11,6 @@
 	"blue": "#2bc3de",
 	"cyan": "#62e0e2",
 	"magenta": "#e069aa",
-	"purple": "#d1aff8",
+	"violet": "#d1aff8",
 	"orange": "#ff8800"
 }

public/themes/dracula.json

@@ -11,6 +11,6 @@
 	"blue": "#bd93f9",
 	"magenta": "#ff79c6",
 	"cyan": "#8be9fd",
-	"purple": "#bd93f9",
+	"violet": "#bd93f9",
 	"orange": "#ffb86c"
 }

public/themes/hacker.json

@@ -0,0 +1,16 @@
+{
+	"backgroundColor": "#000000",
+	"windowColor": "#000000",
+	"glowColor": "#0f9e004d",
+	"white": "#0f9e00",
+	"gray": "#0f9e00",
+	"black": "#000000",
+	"red": "#0f9e00",
+	"green": "#0f9e00",
+	"yellow": "#0f9e00",
+	"blue": "#0f9e00",
+	"cyan": "#0f9e00",
+	"magenta": "#0f9e00",
+	"violet": "#0f9e00",
+	"orange": "#0f9e00"
+}

public/themes/monokai.json

@@ -0,0 +1,16 @@
+{
+	"backgroundColor": "#1d1e18",
+	"windowColor": "#272821",
+	"glowColor": "#3a3b33",
+	"white": "#f8f8f2",
+	"gray": "#cfcfc2",
+	"black": "#272822",
+	"red": "#f92672",
+	"green": "#a3df2d",
+	"yellow": "#9dd52c",
+	"blue": "#66d9ef",
+	"cyan": "#a1efe4",
+	"magenta": "#fd5ff0",
+	"violet": "#ae81ff",
+	"orange": "#fd9720"
+}

public/themes/nord.json

@@ -11,6 +11,6 @@
 	"blue": "#81A1C1",
 	"cyan": "#88C0D0",
 	"magenta": "#B48EAD",
-	"purple": "#9879c6",
+	"violet": "#9879c6",
 	"orange": "#d08770"
 }

public/themes/onedark.json

@@ -11,6 +11,6 @@
 	"blue": "#61afef",
 	"cyan": "#56b6c2",
 	"magenta": "#c678dd",
-	"purple": "#9853e3",
+	"violet": "#9853e3",
 	"orange": "#d19a66"
 }

public/themes/synthwave.json

@@ -0,0 +1,16 @@
+{
+	"backgroundColor": "#1E1429",
+	"windowColor": "#2b213a",
+	"glowColor": "#ed73e1",
+	"white": "#e2e2e2",
+	"gray": "#97989d",
+	"black": "#16161e",
+	"red": "#fe4450",
+	"green": "#72f1b8",
+	"yellow": "#fede5d",
+	"blue": "#03edf9",
+	"cyan": "#03edf9",
+	"magenta": "#ff7edb",
+	"violet": "#A46CF3",
+	"orange": "#F5A753"
+}

src/components/Config.js

@@ -13,6 +13,16 @@ async function getTheme(themeName) {
 	}
 }
 
+async function getThemes() {
+	try {
+		const themes = await fetch("/themes.json").then((res) => res.json())
+		return themes
+	} catch {
+		console.log("Error fetching themes")
+		return null
+	}
+}
+
 const Config = ({ commands, closeCallback }) => {
 	const [command] = useState(commands.join(" "))
 	const [consoleLog, setConsoleLog] = useState([])
@@ -44,7 +54,13 @@ const Config = ({ commands, closeCallback }) => {
 					}
 				})
 			} else {
-				invalidTheme()
+				getThemes().then((themes) => {
+					appendToLog("Available themes:")
+					for (let i in themes) {
+						appendToLog(themes[i])
+					}
+					setDone(true)
+				})
 			}
 		} else {
 			invalidCommand()
@@ -97,12 +113,8 @@ const Config = ({ commands, closeCallback }) => {
 	const invalidTheme = (themeName) => {
 		appendToLog("Invalid theme: " + commands[2], "error")
 		appendToLog("Usage:")
+		appendToLog("config theme: Show available themes")
 		appendToLog("config theme <theme>: Set theme")
-		appendToLog("Available Themes:")
-		appendToLog("default")
-		appendToLog("catppuccin")
-		appendToLog("dracula")
-		appendToLog("nord")
 		setDone(true)
 	}
 

src/components/Fetch.js

@@ -57,7 +57,7 @@ const Fetch = ({ closeCallback }) => {
 								<span className="inline-block w-1/5 h-5 bg-red"></span>
 								<span className="inline-block w-1/5 h-5 bg-green"></span>
 								<span className="inline-block w-1/5 h-5 bg-yellow"></span>
-								<span className="inline-block w-1/5 h-5 bg-purple"></span>
+								<span className="inline-block w-1/5 h-5 bg-violet"></span>
 
 								<span className="inline-block w-1/5 h-5 bg-gray"></span>
 								<span className="inline-block w-1/5 h-5 bg-blue"></span>

src/components/Terminal.js

@@ -58,7 +58,7 @@ const Terminal = () => {
 	return (
 		<div
 			className={`absolute w-full h-auto transform -translate-x-1/2 -translate-y-1/2 shadow-lg rounded-terminal bg-window-color max-w-terminal p-terminal top-1/2 left-1/2 ${
-				settings.terminal.glowEnabled && "glow"
+				settings.terminal.windowGlow && "window-glow"
 			}`}
 			style={windowHeight}
 			ref={windowRef}>

src/pages/index.js

@@ -28,6 +28,10 @@ export default function Home() {
 		// Set Prompt Selection Color
 		documentStyle.setProperty("--selection-fg", "var(--" + settings.prompt.selectionFg + ")")
 		documentStyle.setProperty("--selection-bg", "var(--" + settings.prompt.selectionBg + ")")
+		documentStyle.setProperty(
+			"--placeholder-color",
+			"var(--" + settings.prompt.placeholderColor + ")"
+		)
 
 		// Set URL Color
 		documentStyle.setProperty("--url-default", "var(--" + settings.urlLaunch.defaultColor + ")")
@@ -43,7 +47,14 @@ export default function Home() {
 		documentStyle.setProperty("--blue", settings.theme.blue)
 		documentStyle.setProperty("--cyan", settings.theme.cyan)
 		documentStyle.setProperty("--magenta", settings.theme.magenta)
-		documentStyle.setProperty("--purple", settings.theme.purple)
+		documentStyle.setProperty("--violet", settings.theme.violet)
+
+		// Check text glow
+		if (settings.terminal.textGlow) {
+			document.body.classList.add("text-glow")
+		} else {
+			document.body.classList.remove("text-glow")
+		}
 
 		setIsReady(true)
 	}, [settings])

src/styles/globals.css

@@ -16,14 +16,17 @@
 	--blue: #2bc3de;
 	--cyan: #62e0e2;
 	--magenta: #e069aa;
-	--purple: #d1aff8;
+	--violet: #d1aff8;
 	--orange: #ff8800;
 
 	--url-default: var(--white);
-	--url-hover: var(--purple);
+	--url-hover: var(--violet);
 
 	--selection-fg: var(--black);
 	--selection-bg: var(--yellow);
+	--placeholder-color: var(--gray);
+
+	--text-glow: false;
 }
 
 * {
@@ -65,7 +68,11 @@ a:hover {
 	background: var(--selection-bg);
 }
 
-.glow {
+::placeholder {
+	color: var(--placeholder-color) !important;
+}
+
+.window-glow {
 	box-shadow: 0 0 5px var(--glow-color), 
 				0 0 25px var(--glow-color), 
 				0 0 50px var(--glow-color),
@@ -74,6 +81,10 @@ a:hover {
 	transition: box-shadow 0.2s;
 }
 
+.text-glow {
+	text-shadow: 0px 0px 10px;
+}
+
 .ace_editor,
 .ace_gutter {
 	background-color: var(--window-color) !important;

startpage.config.js

@@ -13,16 +13,18 @@ const defaultConfig = {
 		blue: "#2bc3de",
 		cyan: "#62e0e2",
 		magenta: "#e069aa",
-		purple: "#d1aff8",
+		violet: "#d1aff8",
 		orange: "#ff8800"
 	},
 	terminal: {
 		fixedHeight: true,
-		glowEnabled: true
+		windowGlow: true,
+		textGlow: false
 	},
 	prompt: {
 		ctrlC: true,
 		placeholder: "command...",
+		placeholderColor: "gray",
 		userColor: "green",
 		atColor: "gray",
 		hostColor: "magenta",
@@ -40,7 +42,7 @@ const defaultConfig = {
 	urlLaunch: {
 		target: "_self",
 		defaultColor: "white",
-		hoverColor: "purple"
+		hoverColor: "violet"
 	},
 	search: {
 		default: "https://google.com/search?q=",
@@ -139,7 +141,7 @@ const defaultConfig = {
 		},
 		{
 			title: "Social",
-			color: "purple",
+			color: "violet",
 			links: [
 				{
 					name: "Twitter",

tailwind.config.js

@@ -32,7 +32,7 @@ module.exports = {
 			blue: "var(--blue)",
 			cyan: "var(--cyan)",
 			magenta: "var(--magenta)",
-			purple: "var(--purple)",
+			violet: "var(--violet)",
 			orange: "var(--orange)"
 		},
 		extend: {
@@ -63,7 +63,7 @@ module.exports = {
 		"glow-color",
 		{
 			pattern:
-				/(bg|text|border|caret)-(white|gray|black|red|green|yellow|blue|cyan|magenta|purple|orange)/
+				/(bg|text|border|caret)-(white|gray|black|red|green|yellow|blue|cyan|magenta|violet|orange)/
 		}
 	]
 }