Add theming to search component

Author: esuau

src/search/search.component.spec.ts

@@ -76,4 +76,14 @@ describe("Search", () => {
 		fixture.detectChanges();
 		expect(component.value).toEqual("");
 	});
+
+	it("should have dark and light theme", () => {
+		containerElement = fixture.debugElement.query(By.css(".bx--search")).nativeElement;
+		component.theme = "dark";
+		fixture.detectChanges();
+		expect(containerElement.className.includes("bx--search--light")).toEqual(false);
+		component.theme = "light";
+		fixture.detectChanges();
+		expect(containerElement.className.includes("bx--search--light")).toEqual(true);
+	});
 });

src/search/search.component.ts

@@ -39,7 +39,8 @@ export class SearchChange {
 				class="bx--search"
 				[ngClass]="{
 					'bx--search--sm': size === 'sm',
-					'bx--search--lg': size === 'lg'
+					'bx--search--lg': size === 'lg',
+					'bx--search--light': theme === 'light'
 				}"
 				role="search">
 				<label class="bx--label" [for]="id">Search</label>
@@ -101,6 +102,10 @@ export class Search implements ControlValueAccessor {
 	 */
 	static searchCount = 0;
 
+	/**
+	 * `light` or `dark` search theme.
+	 */
+	@Input() theme: "light" | "dark" = "dark";
 	/**
 	 * Size of the search field.
 	 */