dark-fomantic-ui

Adds Dark Theme selector and system theme auto-detection logic to Fomantic-UI

Configuration

Just edit the following variables in dark-fomantic-ui.js:

var $themeElements = [
    { name: 'lists', target: $('.ui.list').not('.inverted') },
    { name: 'dividers', target: $('.ui.divider').not('.inverted') },
    { name: 'dividingHeaders', target: $('.ui.dividing.header').not('.inverted') },
    { name: 'iconHeaders', target: $('.ui.icon.header').not('.inverted') },
    { name: 'icons', target: $('.icon').not('.inverted') },
    { name: 'headers', target: $('.ui.header').not('.inverted') },
    { name: 'forms', target: $('.ui.form').not('.inverted') },
    // { name: 'tooltippedIcons', target: $('.tooltipped.icon') },
    { name: 'cardsContainer', target: $('.ui.cards') },
    { name: 'cards', target: $('.ui.card') },
    { name: 'dropdowns', target: $('.ui.dropdown') },
    { name: 'fixedMenu', target: $('.ui.top.fixed.menu') },
    { name: 'breadcrumb', target: $('.ui.breadcrumb') },
    { name: 'accordions', target: $('.ui.accordion').not('.styled').not('.inverted') },
    { name: 'tables', target: $('.ui.table') },
    { name: 'modals', target: $('.ui.modal').not('.inverted') },
    { name: 'segments', target: $('.ui.segment').not('.inverted') },
    { name: 'placeholders', target: $('.ui.placeholder') }
];
var $themeValue = $('#theme-value');
var $darkThemeButton = $('div.right.menu div#dark-theme');
var $lightThemeButton = $('div.right.menu div#light-theme');

Where $themeElements array contains all DOM elements that will be styled and get the inverted class applied to.

Each elements objects have two properties:

name: Unique name to distinguish your DOM element
target: The target jquery DOM element

The other variables, $themeValue, $darkThemeButton and $lightThemeButton are used that way:

$themeValue: DOM element where the current theme value will be written
$darkThemeButton: DOM element that will activate the dark theme
$lightThemeButton: DOM element that will activate the light theme

Setup

To include the code in your project, simply add it after your Fomantic UI inclusion line:

...
<!-- Fomantic-UI -->
<script type="text/javascript" id="jquery-js" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script type="text/javascript" id="fomantic-ui-js" src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.5/semantic.js" integrity="sha256-SeNU96at0t5XRuSk9/cLHWCGC0Ju5pug2NRGXeJCQN4=" crossorigin="anonymous"></script>
<!-- Including Dark Theme -->
<script type="text/javascript" id="dark-ui-js" src="dark-fomantic-ui.js"></script>