A Minimalist Dark Design System for Vue.js 👩‍🎨👨‍🎨


npm install vuedarkmode # Or if you prefer using yarn
yarn add vuedarkmode
import Vue from "vue";
import VueDarkMode from "vuedarkmode"; Vue.use(VueDarkMode);
import Vue from "vue";
import VueDarkMode from "vuedarkmode"; Vue.use(VueDarkMode);
{ // ... plugins: [ { src: "@/plugins/vuedarkmode.js", ssr: false } ]
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuedarkmode@0.1/dist/vuedarkmode.min.js"></script>
import VueDarkMode from "vuedarkmode"; Vue.use(VueDarkMode, { // Specify the components to declare globally in your project // When undefined, null or given an empty array, all components will be imported components: ["avatar", "badge", "button", "divider", "heading", "icon", "progress-bar", "social-login", "checkbox", "file", "input", "radio", "select", "tabs", "textarea", "toggle"]
});
arrow_drop_down

This is a customizable description for selects.

arrow_drop_down

This is a customizable description for selects.

arrow_drop_down

This is a customizable description for selects.

arrow_drop_down

This is a customizable description for selects.

arrow_drop_down

This is a customizable description for selects.

checkarrow_drop_down

This is a customizable description for selects.

closearrow_drop_down

This is a customizable description for selects.

warningarrow_drop_down

This is a customizable description for selects.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for textareas.

This is a customizable description for tabs.

This is a customizable description for tabs.

This is a customizable description for tabs.

This is a customizable description for tabs.

This is a customizable description for tabs.

This is a customizable description for tabs.

This is a customizable description for tabs.

This is a customizable description for tabs.

3d_rotationac_unitaccess_alarmaccess_alarmsaccess_timeaccessibilityaccessibleaccount_balanceaccount_balance_walletaccount_boxaccount_circleadbaddadd_a_photoadd_alarmadd_alertadd_boxadd_circleadd_circle_outlineadd_locationadd_shopping_cartadd_to_photosadd_to_queueadjustairline_seat_flatairline_seat_flat_angledairline_seat_individual_suiteairline_seat_legroom_extraairline_seat_legroom_normalairline_seat_legroom_reducedairline_seat_recline_extraairline_seat_recline_normalairplanemode_activeairplanemode_inactiveairplayairport_shuttlealarmalarm_addalarm_offalarm_onalbumall_inclusiveall_outandroidannouncementappsarchivearrow_backarrow_downwardarrow_drop_downarrow_drop_down_circlearrow_drop_uparrow_forwardarrow_upwardart_trackaspect_ratioassessmentassignmentassignment_indassignment_lateassignment_returnassignment_returnedassignment_turned_inassistantassistant_photoattach_fileattach_moneyattachmentaudiotrackautorenewav_timerbackspacebackupbattery_alertbattery_charging_fullbattery_fullbattery_stdbattery_unknownbeach_accessbeenhereblockbluetoothbluetooth_audiobluetooth_connectedbluetooth_disabledbluetooth_searchingblur_circularblur_linearblur_offblur_onbookbookmarkbookmark_borderborder_allborder_bottomborder_clearborder_colorborder_horizontalborder_innerborder_leftborder_outerborder_rightborder_styleborder_topborder_verticalbranding_watermarkbrightness_1brightness_2brightness_3brightness_4brightness_5brightness_6brightness_7brightness_autobrightness_highbrightness_lowbrightness_mediumbroken_imagebrushbubble_chartbug_reportbuildburst_modebusinessbusiness_centercachedcakecallcall_endcall_madecall_mergecall_missedcall_missed_outgoingcall_receivedcall_splitcall_to_actioncameracamera_altcamera_enhancecamera_frontcamera_rearcamera_rollcancelcard_giftcardcard_membershipcard_travelcasinocastcast_connectedcenter_focus_strongcenter_focus_weakchange_historychatchat_bubblechat_bubble_outlinecheckcheck_boxcheck_box_outline_blankcheck_circlechevron_leftchevron_rightchild_carechild_friendlychrome_reader_modeclassclearclear_allcloseclosed_captioncloudcloud_circlecloud_donecloud_downloadcloud_offcloud_queuecloud_uploadcodecollectionscollections_bookmarkcolor_lenscolorizecommentcomparecompare_arrowscomputerconfirmation_numbercontact_mailcontact_phonecontactscontent_copycontent_cutcontent_pastecontrol_pointcontrol_point_duplicatecopyrightcreatecreate_new_foldercredit_cardcropcrop_16_9crop_3_2crop_5_4crop_7_5crop_dincrop_freecrop_landscapecrop_originalcrop_portraitcrop_rotatecrop_squaredashboarddata_usagedate_rangedehazedeletedelete_forever