test.html

<link rel="stylesheet" href="dist/light/purple/test.css">

<div data-num="1">base1</div>
<div data-num="2">base2</div>
<div data-num="3">base3</div>
<div data-num="4">base4</div>
<div data-num="5">base5</div>

<br>
<div class="inverse">
    <div data-num="1">inverse1</div>
    <div data-num="2">inverse2</div>
    <div data-num="3">inverse3</div>
    <div data-num="4">inverse4</div>
    <div data-num="5">inverse5</div>
</div>

<div class="theme">
    <div data-num="0">theme normal</div>

    <div data-num="1">theme LIGHTEN - 1</div>
    <div data-num="2">theme LIGHTEN - 2</div>
    <div data-num="3">theme LIGHTEN - 3</div>
    <div data-num="4">theme LIGHTEN - 4</div>
    <div data-num="5">theme LIGHTEN - 5</div>
    <div class="darken">
        <div data-num="1">theme DARKEN - 1</div>
        <div data-num="2">theme DARKEN - 2</div>
        <div data-num="3">theme DARKEN - 3</div>
        <div data-num="4">theme DARKEN - 4</div>
        <div data-num="5">theme DARKEN - 5</div>
    </div><br>

        <div class="theme-modify">
            <div data-num="1">theme-modify - 1</div>
            <div data-num="2">theme-modify - 2</div>
            <div data-num="3">theme-modify - 3</div>
            <div data-num="4">theme-modify - 4</div>
            <div data-num="5">theme-modify - 5</div>
        </div>
</div>