add themes

app/api.imba

@@ -316,3 +316,4 @@ export default new class api
 		catch e
 			err "deleting some link histories", e
 		imba.commit!
+

app/client.imba

@@ -6,8 +6,6 @@ p "fuzzyhome version {version}"
 # import sw from './sw.imba?serviceworker'
 # navigator..serviceWorker..register(sw).then! do |reg| reg.update!
 
-p "hehe"
-
 import { nanoid } from 'nanoid'
 import { err } from './utils'
 
@@ -74,15 +72,26 @@ tag app
 
 	def render
 
-		<self.disabled=state.loading>
+		<self
+			.light=(config.theme is "light")
+			.dark=(config.theme is "dark")
+			.disabled=state.loading
+		>
+			css d:flex fld:column jc:start ai:center
+				m:0 w:100% h:100% bg:$bodybg
+				ff:sans-serif fw:1
+				user-select:none
+
+			<.main>
 				css d:flex fld:column jc:start ai:center
+					bg:$appbg
 					w:80vw max-width:700px max-height:80vh
 					bxs:0px 0px 10px rgba(0,0,0,0.35)
 					box-sizing:border-box p:30px rd:10px mt:10vh
 
 				if fatal_error
 					<.fatal>
-					css c:blue2
+						css c:$text-c
 						"""
 							There was an error state.loading the database.
 							This could be due to a user setting

app/components/app-bang.imba

@@ -96,12 +96,12 @@ tag app-bang
 
 				<.bang
 					.selected=(state.bang_selection_index is -1)
-					[c:#FAD4AB]=(state.bang_selection_index is -1)
+					[c:$bang-color]=(state.bang_selection_index is -1)
 					@pointerover=(state.bang_selection_index = -1)
 					@click=api.handle_bang
 				>
 					css d:flex fld:row jc:space-between ai:center
-						px:16px py:11px rd:5px cursor:pointer c:blue3
+						px:16px py:11px rd:5px cursor:pointer c:$text-c
 
 					<.link-left>
 						css d:flex fl:1 ofy:hidden
@@ -125,8 +125,8 @@ tag app-bang
 						<.item
 							@pointerover=(state.bang_selection_index = index)
 							@click=api.handle_bang
-							[c:#FAD4AB]=(state.bang_selection_index is index)
+							[c:$bang-color]=(state.bang_selection_index is index)
 							.selected=(state.bang_selection_index is index)
 						> item
-							css w:100% fs:17px c:blue3 rd:5px p:10px 10px
+							css w:100% fs:17px c:$text-c rd:5px p:10px 10px
 								box-sizing:border-box cursor:pointer

app/components/app-community-links.imba

@@ -106,10 +106,10 @@ tag app-community-links
 						@click=add_community_link
 					>
 						css d:flex fld:row jc:space-between ai:center px:16px
-							py:2px rd:5px cursor:pointer c:blue3 min-height:35px
+							py:2px rd:5px cursor:pointer c:$text-c min-height:35px
 
 						if link.is_bang
-							css c:#FAD4AB
+							css c:$bang-color
 
 						<.link-left> link.name
 							css fl:1

app/components/app-home.imba

@@ -33,7 +33,7 @@ tag app-home
 
 			<.header>
 				css d:flex fld:row w:100%
-				css .side c:purple3/90 fs:15px d:flex ja:center w:30px cursor:pointer
+				css .side c:$button-c fs:15px d:flex ja:center w:30px cursor:pointer
 				css .side svg w:15px d:flex
 				css .left jc:left
 				css .right jc:right
@@ -59,7 +59,7 @@ tag app-home
 				if (let m = api.math_result) isnt no
 					<.side.right@click=handle_click_copy(m)>
 						"= {Math.round(m * 100)/100}"
-						css c:blue3 fs:20px ml:10px w:unset
+						css c:$text-c fs:20px ml:10px w:unset
 
 				else
 					<.side.right @click.if(!state.loading)=refs.settings.open>

app/components/app-link.imba

@@ -7,9 +7,9 @@ tag app-link
 			.selected=(index is state.link_selection_index)
 		>
 			css d:flex fld:row jc:space-between ai:center
-				px:16px py:11px rd:5px cursor:pointer c:blue3
+				px:16px py:11px rd:5px cursor:pointer c:$text-c
 			if link.is_bang
-				css c:#FAD4AB
+				css c:$bang-color
 
 			<.link-left>
 				css d:flex fl:1
@@ -22,8 +22,8 @@ tag app-link
 
 				if link.display_name isnt link.name and config.data.enable_effective_names
 					<.name>
-						css d:flex ja:center c:gray4 ml:10px fs:14px
+						css d:flex ja:center c:$effective-name-c ml:10px fs:14px
-						css .parens fs:10px c:gray4/80
+						css .parens fs:10px c:$effective-name-parens-c
 
 						<span.parens> "("
 						<span> link.name
@@ -36,7 +36,7 @@ tag app-link
 
 				<.link-buttons .buttons-disabled=!config.data.enable_buttons>
 					css d:flex fld:row jc:start ai:center pr:25px gap:5px
-					css .link-button visibility:hidden rd:3px c:purple4 fs:15px cursor:pointer px:3px
+					css .link-button visibility:hidden rd:3px c:$button-c fs:15px cursor:pointer px:3px
 					css .link-button svg w:15px
 
 					<.link-button@click.prevent.stop=handle_click_edit(link)>
@@ -47,7 +47,7 @@ tag app-link
 
 					<.link-button
 						@click.prevent.stop=handle_click_pin(link)
-						[visibility:visible c:purple3/50]=(link.is_pinned and (index isnt state.link_selection_index or not config.data.enable_buttons))
+						[visibility:visible c:$button-dim-c]=(link.is_pinned and (index isnt state.link_selection_index or not config.data.enable_buttons))
 					> <svg src='../assets/star.svg'>
 
 				<.frequency> link.frequency

app/components/app-settings.imba

@@ -29,7 +29,7 @@ tag app-settings
 		active = no
 
 	def handle_toggle_light_theme
-		config.data.enable_dark_theme = not config.data.enable_dark_theme
+		config.data.enable_light_theme = not config.data.enable_light_theme
 		config.save!
 		active = no
 
@@ -84,11 +84,12 @@ tag app-settings
 
 			css .settings-button, .settings-container button
 				d:flex fld:column jc:center ai:center fl:1
-				bg:none c:purple4 bd:none cursor:pointer fs:14px
+				bg:none bd:none cursor:pointer fs:14px
-				bg:purple4/10 rd:5px
+				rd:5px
 				transition:background 100ms
 				h:100%
-				@hover bg:purple4/20
+				bg:$button-bg c:$button-c
+				@hover bg:$button-hover-bg
 
 			if refs.community-links.active
 				<app-community-links>
@@ -104,7 +105,7 @@ tag app-settings
 
 				<.settings-container>
 
-					<.settings-button @click.if(!loading)=(refs.community-links.open! and close!)>
+					<.settings-button @click=(refs.community-links.open! and close!)>
 						"VIEW COMMUNITY LINKS"
 
 				<.settings-container>
@@ -118,15 +119,15 @@ tag app-settings
 							type="file"
 						>
 
-					<.settings-button @click.if(!loading)=handle_click_export>
+					<.settings-button @click=handle_click_export>
 						"EXPORT"
 
 				<.settings-container>
 
-					<.settings-button @click.if(!loading)=handle_click_github>
+					<.settings-button @click=handle_click_github>
 						"TUTORIAL"
 
-					<.settings-button @click.if(!loading)=handle_click_github>
+					<.settings-button @click=handle_click_github>
 						"GITHUB"
 
 				<.settings-container>
@@ -142,8 +143,8 @@ tag app-settings
 					<.settings-button @click=handle_click_toggle_search_on_paste>
 						config.data.enable_search_on_paste ? "DISABLE SEARCH ON PASTE" : "ENABLE SEARCH ON PASTE"
 
-					<.settings-button @click.if(!loading)=handle_toggle_light_theme>
+					<.settings-button @click=config.cycle_theme>
-						config.data.enable_dark_theme ? "DISABLE DARK THEME" : "ENABLE DARK THEME"
+						"THEME: {config.data.theme.toUpperCase!}"
 
 				<.settings-container>
 

app/components/app-tips.imba

@@ -26,25 +26,25 @@ tag app-tips
 		d:flex fld:row w:100% fl:1
 		fs:20px fs:14px
 		jc:end ta:center
-		bg:#20222f c:purple4
 
 	css >>> .tip
 		d:flex fld:column jc:start fl:1
-		bdr:1px solid blue3/10
+		bdr:1px solid
+		bc:$tip-bc
 		min-width:0 ta:center p:10px
 		cursor:pointer transition:background 100ms
 		@first ta:left rdl:3px
 		@last ta:right bd:none rdr:3px
-		@hover bg:purple3/3
+		@hover bg:$tip-hover-c
 
 	css >>> .tip.noclick, .tip.placeholder
 		@hover bg:none cursor:auto
 
 	css >>> .tip-hotkey
-		fs:12px c:purple3/50
+		fs:12px c:$tip-hotkey-c
 
 	css >>> .tip-content
-		pt:2px fs:14px c:purple3
+		pt:2px fs:14px c:$tip-content-c
 
 	def render
 		let chunks = get_chunks!
@@ -59,9 +59,9 @@ tag app-tips
 			if chunks.length > 1
 
 				<@click=toggle>
-					css w:100% d:flex ja:center c:purple3 rdb:4px cursor:pointer
+					css w:100% d:flex ja:center c:$button-c rdb:4px cursor:pointer
 						transition:background 100ms
-						@hover bg:purple3/3
+						@hover bg:$tip-hover-c
 					if show_more
 						css rd:0
 

app/config.imba

@@ -14,6 +14,7 @@ export default new class config
 		this.data.enable_search_on_paste ??= yes
 		this.data.enable_dark_theme ??= yes
 		this.data.enable_effective_names ??= yes
+		this.data.theme ??= "dark"
 
 		this.data.default_bang ??= {}
 		this.data.default_bang.name ??= "!google"
@@ -27,6 +28,27 @@ export default new class config
 
 		p "config:", this.data
 
+	def cycle_theme
+		if this.data.theme is "dark"
+			this.data.theme = "light"
+		elif this.data.theme is "light"
+			this.data.theme = "timed"
+		else
+			this.data.theme = "dark"
+		save!
+
+	get theme
+		if this.data.theme is "light"
+			"light"
+		elif this.data.theme is "timed"
+			let hour = new Date!.getHours!
+			if hour > 18 or hour < 8
+				"dark"
+			else
+				"light"
+		else
+			"dark"
+
 	def set_default_bang link
 		unless link.is_bang
 			return err "setting default bang", "Link is not a bang."

app/styles.imba

@@ -1,15 +1,57 @@
+global css html
+	$effective-name-c:gray4
+	$effective-name-parens-c:gray4/80
+
+global css .dark
+	$appbg:#20222f
+	$bodybg:#20222f
+	$selected-color:blue3/5
+	$bang-color:#fad4ab
+	$text-c:blue3
+	$input-bg:purple4/10
+	$input-c:blue3
+	$input-caret-color:blue3
+	$input-bc:purple4
+	$tip-hotkey-c:purple3/50
+	$tip-content-c:purple3
+	$tip-hover-c:purple3/3
+	$tip-bc:blue3/10
+	$button-c:purple3/90
+	$button-dim-c:purple3/50
+	$button-bg:purple4/10
+	$button-hover-bg:purple4/20
+
+global css .light
+	$bodybg:#ececec
+	$appbg:#fff
+	$selected-color:blue5/7
+	$bang-color:#ff7070
+	$text-c:#3c3c3c
+	$input-bg:blue4/10
+	$input-c:blue3
+	$input-caret-color:blue3
+	$input-bc:blue4
+	$tip-hotkey-c:blue4/80
+	$tip-content-c:blue5
+	$tip-hover-c:black/3
+	$tip-bc:black/10
+	$button-c:blue5/90
+	$button-dim-c:blue5/50
+	$button-bg:blue4/10
+	$button-hover-bg:blue4/20
+
 global css body
-	d:flex fld:column jc:start ai:center
+	m:0 bd:0 p:0
-	m:0 w:100% h:100% bg:#20222f
-	ff:sans-serif fw:1
-	user-select:none
 
 global css input
 	w:100% h:50px px:20px fl:1
 	fs:20px ta:center
-	bd:1px solid purple4
+	bd:1px solid
-	bg:purple4/10 c:blue3 caret-color:blue3
 	outline:none rd:5px
+	bg:$input-bg
+	bc:$input-bc
+	c:$text-c
+	caret-color:$input-caret-color
 
 global css a
 	td:none
@@ -21,7 +63,7 @@ global css .disabled $main-input
 	@important bg:gray4/10 bc:gray4
 
 global css .selected
-	bg:blue3/5
+	bg:$selected-color
 
 global css .ellipsis
 	of:hidden text-overflow:ellipsis white-space:nowrap