Go to /app/design/frontend
1.Declare your theme
<?xml version="1.0" encoding="UTF-8"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>My First Theme</title> <!-- your theme's name -->
<parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
<media>
<preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
</media>
</theme>
2.Add registration.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/stark/my-first-theme',
__DIR__
);
3.Configure images
Product image sizes and other properties used on the storefront are configured in a view.xml configuration file. For example, here is the view.xml of the Magento Blank theme: app/design/frontend/Magento/blank/etc/view.xml copy that and past your view.xml file
4.Include CSS
include your CSS in default_head_blocks.xml of the Magento_Theme module, which defines the default <head> page section for all Magento pages.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
<css src="css/custom.css" media="print"/>
</head>
</page>
Magento theme location
Storefront themes are conventionally located under app/design/frontend/<Vendor>/. Though technically they can reside in other directories. For example Magento built-in themes can be located under vendor/magento/theme-frontend-<theme_code> when a Magento instance is deployed from the Composer repository.
Resize catalog images
Generally, product images are cached while saving the product. However, the magento catalog:images:resize command enables you to resize all images for display on your storefront.
php bin/magento catalog:images:resize
