How to use @instructure/ui-themes - 6 common examples

*
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

const Testbed = require('@instructure/ui-testbed')

global.Testbed = Testbed
Testbed.init()

const theme = require('@instructure/ui-themes/lib/canvas').default
theme.use({ accessible: true })

const testsContext = require.context('./src', true, /\.test\.js$/)
testsContext.keys().forEach(testsContext)

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

const Testbed = require('@instructure/ui-testbed')

global.Testbed = Testbed
Testbed.init()

const theme = require('@instructure/ui-themes/lib/canvas').default
theme.use({ accessible: true })

const testsContext = require.context('./src', true, /\.test\.js$/)
testsContext.keys().forEach(testsContext)

*
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
require('@instructure/ui-polyfill-loader!')

const { canvas } = require('@instructure/ui-themes')
canvas.use({ overrides: { transitions: { duration: '1ms' } } })

require('ui-tests-loader!')

const locale = AVAILABLE_LOCALES[rawLocale] ? rawLocale : "en";
i18n.activate(locale);
AVAILABLE_LOCALES[locale]().then(messages => {
  const catalogs = {};
  catalogs[locale] = messages;
  i18n.load(catalogs);
});

const highContrastEnabled =
  typeof parsedQueryString["high-contrast"] !== "undefined";

if (highContrastEnabled) {
  highContrastTheme.use();
  import("./high-contrast.css");
} else {
  theme.use();
}

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

registerServiceWorker();

import { renderIntoDiv } from "canvas-rce"
import canvasTheme from "@instructure/ui-themes/lib/canvas"

import { getInstance, setLocale } from "./plugin"
import "tinymce/plugins/image"

getInstance(instance => instance.setConfig({ disableContrastCheck: false }))
const lang = (/lang=([^&]+)/.exec(window.location.search) || {})[1]
setLocale(lang || "en")

canvasTheme.use()

function renderEditor(editorEl, textareaId) {
  renderIntoDiv(editorEl, {
    defaultContent: document.getElementById(textareaId).value,
    editorOptions: () => {
      return {
        height: "600px",
        plugins: "link, image, textcolor, table, a11y_checker",
        menubar: true,
        toolbar: [
          "bold,italic,underline,|,link,image,|,forecolor,backcolor,|,alignleft,aligncenter,alignright,|,outdent,indent,|,bullist,numlist,|,fontsizeselect,formatselect,|,check_a11y"
        ]
      }
    },
    textareaId
  })

export const i18n = setupI18n({});

const rawLocale = parsedQueryString["locale"];
const locale = AVAILABLE_LOCALES[rawLocale] ? rawLocale : "en";
i18n.activate(locale);
AVAILABLE_LOCALES[locale]().then(messages => {
  const catalogs = {};
  catalogs[locale] = messages;
  i18n.load(catalogs);
});

const highContrastEnabled =
  typeof parsedQueryString["high-contrast"] !== "undefined";

if (highContrastEnabled) {
  highContrastTheme.use();
  import("./high-contrast.css");
} else {
  theme.use();
}

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);