Allowing Users to Change Data-Theme

Allowing Users to Change Data-Theme

Sorry in advance if my code looks idiotic.  I'm new to javascript, but trying to learn!

I would like to have buttons on my mobile page that, when clicked, dynamically input their value (a, b, or c) into the data-theme's value and thus change the page's theme.

I'm sure this is ridden with errors, but does anyone know how I can do this?

  1.     <script>
  2.     var themeStyle = data-theme.value
  3.     $("button").click(function () {
  4.       $(themeStyle).replaceWith(button.value);
  5.     });
  6.     </script>
  7.    
  8. </head>
  9. <body>
  10.     <div data-role="page" id="first" data-theme="themeStyle">
  11.     <div data-role="header" data-theme="themeStyle">
  12.     <h1>My Mobile Site</h1>
  13.     </div><!-- /header -->
  14.    
  15.     <div data-role="content">
  16.     <ul data-role="listview" data-theme="themeStyle">
  17.         <li><a href="#first" data-transition="pop">Home</a></li>
  18.         <li><a href="#second" data-transition="pop">About</li>
  19.         <li><a href="#third" data-transition="pop">Contact</a></li>
  20.         <button name="buttonOne" value="a">Theme 1</button>
  21.         <button name="buttonTwo" value="b">Theme 2</button>
  22.         <button name="buttonThree" value="c">Theme 3</button>
  23.     </ul>
Thanks for any insight!