SkipTo: Creating a University of Washington Color Theme

University of Washington Brand Colors

Example Color Configuration

Colors of the SkipTo button and menu can be set through explicit configuration.

    <script src="https://cdn.disability.illinois.edu/skipto.min.js"></script>
    <script>
        var SkipToConfig =  {
            'settings': {
                'skipTo': {
                    positionLeft: '46%',
                    menuTextColor: '#707070',
                    menuBackgroundColor: '#ffffff',
                    menuitemFocusTextColor: '#ffffff',
                    menuitemFocusBackgroundColor: '#4b2e83',
                    focusBorderColor: '#4b2e83',
                    buttonTextColor: '#ffffff',
                    buttonBackgroundColor: '#85754d'
                }
            }
        };
    </script>
        

Example Theme Configuration

Another way to specify the colors for the button and menu is to add the color styling information as a built-in color theme to the SkipTo script. A University of Washington theme makes it easier for developers to configure.

    <script src="https://cdn.disability.illinois.edu/skipto.min.js"></script>
    <script>
        var SkipToConfig =  {
            'settings': {
                'skipTo': {
                    colorTheme: 'uwashington'
                }
            }
        };
    </script>