feat: Copy code with both themes

- fix: category selector border
- fix: docs themes
- chore: refactor theme services
- test: add better tests for the formatter

cypress/support/component.ts

@@ -20,7 +20,7 @@ declare global {
 
 const imports: any[] = [];
 const declarations: any[] = [];
-const providers: any[] = [AnalyticsService, ColorService, ThemeService, HttpClient, HttpHandler];
+const providers: any[] = [AnalyticsService, ThemeService, HttpClient, HttpHandler];
 
 function customMount<T>(component: string | Type<T>, config?: MountConfig<T>) {
 	if (!config) {

src/app/components/avatar/avatar2/avatar2.component.html

@@ -28,8 +28,8 @@
 
 		<div class="relative flex-shrink-0">
 			<span
-				class="absolute bottom-0 right-0 flex items-center justify-center w-4 h-4 bg-red-600 border rounded-full"
-				[ngClass]="['border' + contrast, 'text' + dark]"
+				class="absolute bottom-0 right-0 flex items-center justify-center w-4 h-4 bg-red-600 border rounded-full text-custom-dark"
+				[ngClass]="['border' + contrast]"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -49,8 +49,8 @@
 
 		<div class="relative flex-shrink-0">
 			<span
-				class="absolute bottom-0 right-0 flex items-center justify-center w-4 h-4 border rounded-full"
-				[ngClass]="['bg' + dark, 'text' + light, 'border' + contrast]"
+				class="absolute bottom-0 right-0 flex items-center justify-center w-4 h-4 border rounded-full bg-custom-dark text-custom-light"
+				[ngClass]="['border' + contrast]"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"

src/app/components/blog/blog2/blog2.component.html

@@ -1,15 +1,15 @@
 <div class="" [ngClass]="['bg' + default, 'text' + contrastInv]">
 	<div class="container grid grid-cols-12 mx-auto">
 		<div
-			class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover bg-gray-700 lg:col-span-6 lg:h-auto"
+			class="flex flex-col justify-center col-span-12 align-middle bg-gray-700 bg-no-repeat bg-cover lg:col-span-6 lg:h-auto"
 			style="
 				background-image: url('https://source.unsplash.com/random/640x480');
 				background-position: center center;
 				background-blend-mode: multiply;
 				background-size: cover;
 			"
 		>
-			<div class="flex flex-col items-center p-8 py-12 text-center">
+			<div class="flex flex-col items-center p-8 py-12 text-center text-custom-light">
 				<span>12 June</span>
 				<h1 class="py-4 text-5xl font-bold">
 					Lorem, ipsum dolor sit amet consectetur adipisicing.

src/app/components/call-to-action/cta3/cta3.component.html

@@ -10,13 +10,10 @@
 	<div
 		class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:p-10"
 	>
-		<h1
-			class="text-5xl antialiased font-semibold leading-none text-center"
-			[ngClass]="['text' + light]"
-		>
+		<h1 class="text-5xl antialiased font-semibold leading-none text-center text-custom-light">
 			Get Our Updates
 		</h1>
-		<p class="pt-2 pb-8 text-xl antialiased text-center" [ngClass]="['text' + light]">
+		<p class="pt-2 pb-8 text-xl antialiased text-center text-custom-light">
 			Find out about events and other news
 		</p>
 		<div class="flex flex-row">

src/app/components/components.component.html

@@ -14,13 +14,17 @@ <h1 class="text-5xl font-bold">Components</h1>
 		<a
 			*ngFor="let category of categories"
 			[routerLink]="['/components/' + category.link]"
+			routerLinkActive
+			[routerLinkActiveOptions]="{exact: true}"
+			#rla="routerLinkActive"
 			[routerLinkActive]="['active:ring-opacity-75', 'ring' + primary]"
-			class="relative px-3 py-1 m-1 text-sm rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50"
+			class="relative px-3 py-1 m-1 text-sm rounded-md shadow-sm sm:py-2 sm:text-base ring ring-opacity-75 group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50"
 			[ngClass]="[
 				'hover:ring' + primary,
-				(category | filter : query) ? 'text' + contrastInv : 'text' + plainInv,
-				(category | filter : query) ? activeBgColor : disabledBgColor,
-				(category | filter : query) ? 'no-underline' : 'line-through'
+				(category | filter: query) ? 'text' + contrastInv : 'text' + plainInv,
+				(category | filter: query) ? activeBgColor : disabledBgColor,
+				(category | filter: query) ? 'no-underline' : 'line-through',
+				rla.isActive ? 'ring' + primary : 'ring-transparent'
 			]"
 		>
 			<span

src/app/components/components.component.ts

@@ -75,9 +75,9 @@ export class ComponentsComponent extends BaseComponent implements OnDestroy {
 		this.componentTotal = this.categories
 			.map(categ => categ.count)
 			.reduce((acc, sum) => sum + acc, 0);
-		this.themeSub = this.themeService.getDarkTheme().subscribe((isDarkmode: boolean) => {
-			this.activeBgColor = isDarkmode ? 'bg' + this.plain : 'bg' + this.contrast;
-			this.disabledBgColor = isDarkmode ? 'bg' + this.default : 'bg' + this.neutral;
+		this.themeSub = this.themeService.getCurrentTheme().subscribe(theme => {
+			this.activeBgColor = theme.darkTheme ? 'bg' + theme.plain : 'bg' + theme.contrast;
+			this.disabledBgColor = theme.darkTheme ? 'bg' + theme.default : 'bg' + theme.neutral;
 		});
 	}
 

src/app/components/form/form1/form1.component.html

@@ -17,8 +17,8 @@
 					<input
 						id="firstname"
 						type="text"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder="First name"
 					/>
 				</div>
@@ -27,8 +27,8 @@
 					<input
 						id="lastname"
 						type="text"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder="Last name"
 					/>
 				</div>
@@ -37,8 +37,8 @@
 					<input
 						id="email"
 						type="email"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder="Email"
 					/>
 				</div>
@@ -48,8 +48,8 @@
 					<input
 						id="address"
 						type="text"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder=""
 					/>
 				</div>
@@ -58,8 +58,8 @@
 					<input
 						id="city"
 						type="text"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder=""
 					/>
 				</div>
@@ -68,8 +68,8 @@
 					<input
 						id="state"
 						type="text"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder=""
 					/>
 				</div>
@@ -78,8 +78,8 @@
 					<input
 						id="zip"
 						type="text"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder=""
 					/>
 				</div>
@@ -99,8 +99,8 @@
 					<input
 						id="username"
 						type="text"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder="Username"
 					/>
 				</div>
@@ -109,17 +109,17 @@
 					<input
 						id="website"
 						type="text"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder="https://"
 					/>
 				</div>
 				<div class="col-span-full">
 					<label class="text-sm" for="bio">Bio</label>
 					<textarea
 						id="bio"
-						class="w-full rounded-md focus:ring focus:ring-opacity-75"
-						[ngClass]="['focus:ring' + primary, 'border' + neutral, 'text' + dark]"
+						class="w-full rounded-md focus:ring focus:ring-opacity-75 text-custom-dark"
+						[ngClass]="['focus:ring' + primary, 'border' + neutral]"
 						placeholder=""
 					></textarea>
 				</div>
@@ -129,7 +129,7 @@
 						<img
 							src="https://source.unsplash.com/30x30/?random"
 							alt=""
-							class="w-10 h-10 rounded-full bg-gray-500"
+							class="w-10 h-10 bg-gray-500 rounded-full"
 							[ngClass]="['bg' + neutral]"
 						/>
 						<button

src/app/components/hero/hero2/hero2.component.html

@@ -1,8 +1,7 @@
 <section class="">
 	<div [ngClass]="['bg' + primary]">
 		<div
-			class="container flex flex-col items-center px-4 py-16 pb-24 mx-auto text-center lg:pb-56 md:py-32 md:px-10 lg:px-32"
-			[ngClass]="['text' + dark]"
+			class="container flex flex-col items-center px-4 py-16 pb-24 mx-auto text-center lg:pb-56 md:py-32 md:px-10 lg:px-32 text-custom-dark"
 		>
 			<h1
 				class="text-5xl font-bold leading-none sm:text-6xl xl:max-w-3xl"
@@ -35,6 +34,6 @@
 	<img
 		src="https://source.unsplash.com/random/480x320"
 		alt=""
-		class="w-5/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 bg-gray-500"
+		class="w-5/6 mx-auto mb-12 -mt-20 bg-gray-500 rounded-lg shadow-md lg:-mt-40"
 	/>
 </section>

src/app/components/login/login2/login2.component.html

@@ -10,15 +10,15 @@
 		<label class="self-start text-xs font-semibold" for="username">Username or Email</label>
 		<input
 			id="username"
-			class="flex items-center h-12 px-4 mt-2 rounded focus:outline-none focus:ring-2"
-			[ngClass]="['text' + dark, 'focus:border' + primary, 'focus:ring' + primary]"
+			class="flex items-center h-12 px-4 mt-2 rounded text-custom-dark focus:outline-none focus:ring-2"
+			[ngClass]="['focus:border' + primary, 'focus:ring' + primary]"
 			type="text"
 		/>
 		<label class="self-start mt-3 text-xs font-semibold" for="password">Password</label>
 		<input
 			id="password"
-			class="flex items-center h-12 px-4 mt-2 rounded focus:outline-none focus:ring-2"
-			[ngClass]="['text' + dark, 'focus:border' + primary, 'focus:ring' + primary]"
+			class="flex items-center h-12 px-4 mt-2 rounded text-custom-dark focus:outline-none focus:ring-2"
+			[ngClass]="['focus:border' + primary, 'focus:ring' + primary]"
 			type="password"
 		/>
 		<button

src/app/components/news/news1/news1.component.html

@@ -58,18 +58,17 @@ <h3 class="flex items-center space-x-2" [ngClass]="['text' + plainInv]">
 			</div>
 		</div>
 		<div
-			class="relative flex col-span-12 bg-center bg-no-repeat bg-cover bg-gray-500 xl:col-span-6 lg:col-span-5 md:col-span-9 min-h-96"
+			class="relative flex col-span-12 bg-gray-500 bg-center bg-no-repeat bg-cover xl:col-span-6 lg:col-span-5 md:col-span-9 min-h-96"
 			style="background-image: url('https://source.unsplash.com/random/239x319')"
 		>
 			<span
-				class="absolute px-1 pb-2 text-xs font-bold uppercase border-b-2 left-6 top-6"
-				[ngClass]="['border' + primary, 'text' + light]"
+				class="absolute px-1 pb-2 text-xs font-bold uppercase border-b-2 left-6 top-6 text-custom-light"
+				[ngClass]="['border' + primary]"
 			>
 				paris, france
 			</span>
 			<a
-				class="flex flex-col items-center justify-end p-6 text-center sm:p-8 group via-transparent flex-grow-1 bg-gradient-to-b"
-				[ngClass]="['from' + dark, 'to' + dark]"
+				class="flex flex-col items-center justify-end p-6 text-center sm:p-8 group via-transparent flex-grow-1 bg-gradient-to-b from-custom-dark to-custom-dark"
 			>
 				<span class="flex items-center mb-4 space-x-2" [ngClass]="['text' + primary]">
 					<span
@@ -86,8 +85,7 @@ <h3 class="flex items-center space-x-2" [ngClass]="['text' + plainInv]">
 				<h1
 					rel="noopener noreferrer"
 					href="#"
-					class="font-serif text-2xl font-semibold group-hover:underline"
-					[ngClass]="['text' + light]"
+					class="font-serif text-2xl font-semibold group-hover:underline text-custom-light"
 				>
 					Morbi mattis justo est, ac consectetur dui eleifend vitae. Donec venenatis?
 				</h1>

src/app/components/news/news2/news2.component.html

@@ -2,23 +2,22 @@
 	<div class="grid grid-cols-1 gap-5 lg:grid-cols-4 sm:grid-cols-2">
 		<div
 			*ngFor="let n of news"
-			class="relative flex items-end justify-start w-full text-left bg-center bg-cover h-96 bg-gray-500"
+			class="relative flex items-end justify-start w-full text-left bg-gray-500 bg-center bg-cover h-96"
 			style="background-image: url({{ n.url }})"
 		>
 			<div
-				class="absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-b via-transparent"
-				[ngClass]="['from' + dark, 'to' + dark]"
+				class="absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-b via-transparent from-custom-dark to-custom-dark"
 			></div>
 			<div class="absolute top-0 left-0 right-0 flex items-center justify-between mx-5 mt-3">
 				<a
 					rel="noopener noreferrer"
 					href="#"
-					class="px-3 py-2 text-xs font-semibold tracking-wider uppercase"
-					[ngClass]="['text' + light, 'bg' + primary600]"
+					class="px-3 py-2 text-xs font-semibold tracking-wider uppercase text-custom-light"
+					[ngClass]="['bg' + primary]"
 				>
 					{{ n.category }}
 				</a>
-				<div class="flex flex-col justify-start text-center" [ngClass]="['text' + light]">
+				<div class="flex flex-col justify-start text-center text-custom-light">
 					<span class="text-3xl font-semibold leading-none tracking-wide">
 						{{ n.date }}
 					</span>
@@ -29,8 +28,7 @@ <h2 class="z-10 p-5">
 				<a
 					rel="noopener noreferrer"
 					href="#"
-					class="font-medium text-md hover:underline"
-					[ngClass]="['text' + light]"
+					class="font-medium text-md hover:underline text-custom-light"
 				>
 					{{ n.title }}
 				</a>