'R Shiny theme selector, change options

so from here https://shiny.rstudio.com/gallery/shiny-theme-selector.html, I got the code: but the thing I want to do is to only inlude two of the themes into the selector and have the selector at the top left

shinyApp(
 ui = tagList(
shinythemes::themeSelector(),
navbarPage(
  # theme = "cerulean",  # <--- To use a theme, uncomment this
  "shinythemes",
  tabPanel("Navbar 1",
    sidebarPanel(
      fileInput("file", "File input:"),
      textInput("txt", "Text input:", "general"),
      sliderInput("slider", "Slider input:", 1, 100, 30),
      tags$h5("Default actionButton:"),
      actionButton("action", "Search"),

      tags$h5("actionButton with CSS class:"),
      actionButton("action2", "Action button", class = "btn-primary")
    ),
    mainPanel(
      tabsetPanel(
        tabPanel("Tab 1",
          h4("Table"),
          tableOutput("table"),
          h4("Verbatim text output"),
          verbatimTextOutput("txtout"),
          h1("Header 1"),
          h2("Header 2"),
          h3("Header 3"),
          h4("Header 4"),
          h5("Header 5")
        ),
        tabPanel("Tab 2", "This panel is intentionally left blank"),
        tabPanel("Tab 3", "This panel is intentionally left blank")
      )
    )
    ),
    tabPanel("Navbar 2", "This panel is intentionally left blank"),
    tabPanel("Navbar 3", "This panel is intentionally left blank")
    )
    ),
    server = function(input, output) {
   output$txtout <- renderText({
   paste(input$txt, input$slider, format(input$date), sep = ", ")
   })
   output$table <- renderTable({
  head(cars, 4)
  })
  }
 )

so I have looked at the code of shinythemes::themeSelector()

  <div class="draggable" style="top:15px;right:15px;position:fixed;cursor:move; width:      250px; z-index: 100000;">
    <div class="panel panel-danger" style="box-shadow: 5px 5px 15px -5px rgba(0, 0, 0,   0.3);">
     <div class="panel-heading">Select theme:</div>
     <div class="panel-body">
      <div class="form-group shiny-input-container">
        <label class="control-label shiny-label-null" for="shinytheme-selector" id="shinytheme-selector-label"></label>
        <div>
          <select id="shinytheme-selector" class="form-control"><option value="default" selected>default</option>
<option value="cerulean">cerulean</option>
<option value="cosmo">cosmo</option>
<option value="cyborg">cyborg</option>
<option value="darkly">darkly</option>
<option value="flatly">flatly</option>
<option value="journal">journal</option>
<option value="lumen">lumen</option>
<option value="lux">lux</option>
<option value="minty">minty</option>
<option value="paper">paper</option>
<option value="readable">readable</option>
<option value="sandstone">sandstone</option>
<option value="simplex">simplex</option>
<option value="slate">slate</option>
<option value="spacelab">spacelab</option>
<option value="superhero">superhero</option>
<option value="united">united</option>
<option value="yeti">yeti</option>
<option value="zephyr">zephyr</option></select>
        </div>
      </div>
    </div>
  </div>
  <script>$('#shinytheme-selector')
  .on('change', function(el) {
    var allThemes = $(this).find('option').map(function() {
      if ($(this).val() === 'default')
        return 'bootstrap';
      else
        return $(this).val();
    });

    // Find the current theme
    var curTheme = el.target.value;
    if (curTheme === 'default') {
      curTheme = 'bootstrap';
      curThemePath = 'shared/bootstrap/css/bootstrap.min.css';
    } else {
      curThemePath = 'shinythemes/css/' + curTheme + '.min.css';
    }

    // Find the &lt;link&gt; element with that has the bootstrap.css
    var $link = $('link').filter(function() {
      var theme = $(this).attr('href');
      theme = theme.replace(/^.*\//, '').replace(/(\.min)?\.css$/, '');
      return $.inArray(theme, allThemes) !== -1;
    });

    // Set it to the correct path
    $link.attr('href', curThemePath);
  });</script>
</div>
<script>$(".draggable").draggable();</script>

How can I change the options inside the themeSelector that I e.g. only have "slate" and "journal"? (As in when I delete the other options, where do I put the modified code?)

and is it possible change the path to the CSS folders, because I would prefer to use two custom CSS instead two of the default ones.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source