Custom Jarvis Themes

Custom Jarvis themes can easily be created from within a theme or from a plugin. The examples on this page are plugin based.

Two filters and a stylesheet are needed.

Filter the list of available themes in the backend to be selected.

add_filter( 'jarvis/themes', function( $themes ) {
	return array_merge( $themes, [ 'wdg' => 'WDG' ] );
});

Filter the url for the stylesheet via the dynamic filter name.

add_filter( 'jarvis/theme/wdg', function( $uri ) {
	return plugins_url( 'wdg-jarvis.css', __FILE__ );
} );

Making the default jarvis theme something other than matching the WordPress color scheme (optional).

add_filter( 'jarvis/theme_default', function( $theme ) {
	return 'wdg';
} );

If using sass, you can import the jarvis-theme mixin for easy stylesheet creation. This example is from within a plugin, customize the import path to the jarvis plugin for your own setup.

@import '../jarvis/src/scss/themes/jarvis-theme';

$pink : #ff5598;
$black: lighten( #000000, 10% );
$white: #ffffff;

@include jarvis-theme( (
	hint-background: rgb( 235, 235, 235 ),
	hint-text: rgb( 150, 150, 150 ),
	input-text: inherit,
	input-background: $white,
	loading-dot: $black,
	loading: $pink,
	menu-background: $black,
	modal-background: $black,
	overlay-background: rgba( $pink, .7 ),
	suggestion-text: $white,
	suggestion-hover-background: rgba( $pink, .7 ),
	suggestion-focus-background: rgba( $pink, 1 ),
) );