Multiple image logo for theme

I am assuming that by online and offline you mean active states of the logo. I think there are several options for you to use. The first two options can be used within your theme and then are simply changing the image file within the directory.

Option One (not using WP):

You can utilise a simple use of transparancy. Apply a transparent effect to the logo and then on hover, make the opacity full. E.g:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// If you want to use SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

Option Two (not using WP):

If you need to use imagery instead of an hover effect, then you can try the following (again using classes):

.logo {
    background-image: url('path/to/your-off-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;
}

.logo:hover {
    background-image: url('path/to/your-on-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

// If you want to use SASS:

.logo {
    background-image: url('path/to/your-off-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;

    &:hover {
        background-image: url('path/to/your-on-image.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

Option Three (using the customiser in WP):

Taken from the WP Customiser Docs

With this option you have to register the setting using the following:

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here

    $wp_customize->add_section( 'my_site_logo' , array(
        'title'      => __( 'My Site Logo', 'mytheme' ),
        'priority'   => 30,
    ) );

    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'logo',
            array(
               'label'      => __( 'Upload a logo', 'theme_name' ),
               'section'    => 'my_site_logo',
               'settings'   => 'my_site_logo_id' 
            )
        )
    );

}
add_action( 'customize_register', 'mytheme_customize_register' );

The above code would be added into the functions.php file that should be located within your theme directory. In order retrieve the image you do the following:

get_theme_mod( 'my_site_logo_id' );

And then you would have to break with convention of using inline-styling to output the two different options for the logos, on hover.

Please check out the codex to check over the various options you may have in order to achieve what you are after.