How to add inline style to WordPress Theme

Include the file in the functions.php

// Include the theme style
if ( file_exists( get_template_directory() . '/inc/theme-style.php' ) ) {
	require_once get_template_directory() . '/inc/theme-style.php';
}

The code in the theme-style.php would be like โ€“

<?php

// Inline Scripts
if ( ! function_exists( 'neon_inline_style' ) ) {
	function neon_inline_style() {
		wp_enqueue_style( 'neon-custom-style', get_template_directory_uri() . '/assets/css/custom-style.css', array(), '1.0', false );

		// Header Top Margin
		$header_margin    = cs_get_option( 'matland_header_margin' );
//		Preloader
		$preloader_color = cs_get_option( 'matland_pre_loader_color' );
		$preloader_bg    = cs_get_option( 'matland_pre_loader_bg' );

//		Font
		$font_ones = cs_get_option( 'matland_main_typography_one' );
		$font_one  = $font_ones['family'];

		$custom_css = "
		.preloader {
			background: {$preloader_bg};
		}
		.sk-folding-cube .sk-cube:before {
			background-color: {$preloader_color};
		}
		body.page-template-frontpage-template .header-area {
		    top: {$header_margin}px;
		}";

		wp_add_inline_style( 'neon-custom-style', $custom_css );
	}

	add_action( 'wp_enqueue_scripts', 'neon_inline_style' );
}

Create an file named custom-style.css in the css folder as it’s enqueued above.

Thanks!