Sourcetree Dark Mode

Dark Mode for Jira gives your users the option to enable Dark Mode, which gives your Jira environment a darker theme. This is healthy for your eyes and makes working in the dark more comfortable. Reach out to us for support if you have any questions, suggestions or feedback. You can reach us at [email protected] Engineering a darker SourceTree By Brian Ganninger on July 17, 2017. A “non retina-burning” update for SourceTree on macOS has been on our radar for a long while, and recently our senior designer Joel Unger came up with a mock-up on how it might look. Graphical client for Git that supports pull requests for GitHub, GitLab and Bitbucket. Dark theme in windows does not make SourceTree dark (as documented online that it should). (I would prefer the ability to set my own theme colors to match my own dev. Environ, but just the Windows Dark theme alone would help my eyes. Look at GitKraken for a good example.).


HOW TO

HowTo HomeMacos

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Buttons

Alert ButtonsOutline ButtonsSplit ButtonsAnimated ButtonsFading ButtonsButton on ImageSocial Media ButtonsRead More Read LessLoading ButtonsDownload ButtonsPill ButtonsNotification ButtonIcon ButtonsNext/prev ButtonsMore Button in NavBlock ButtonsText ButtonsRound ButtonsScroll To Top Button

Forms

Login FormSignup FormCheckout FormContact FormSocial Login FormRegister FormForm with IconsNewsletterStacked FormResponsive FormPopup FormInline FormClear Input FieldHide Number ArrowsCopy Text to ClipboardAnimated SearchSearch ButtonFullscreen SearchInput Field in NavbarLogin Form in NavbarCustom Checkbox/RadioCustom SelectToggle SwitchCheck CheckboxDetect Caps LockTrigger Button on EnterPassword ValidationToggle Password VisibilityMultiple Step FormAutocompleteTurn off autocompleteTurn off spellcheckFile Upload ButtonEmpty Input Validation

Filters

Filter ListFilter TableFilter ElementsFilter DropdownSort ListSort Table

Tables

DarkZebra Striped TableCenter TablesFull-width TableSide-by-side TablesResponsive TablesComparison Table

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Website

Make a WebsiteMake a Website (W3.CSS)Make a Website (BS3)Make a Website (BS4)Make a WebBookCenter WebsiteContact SectionAbout PageBig HeaderExample Website

Grid

2 Column Layout3 Column Layout4 Column LayoutExpanding GridList Grid ViewMixed Column LayoutColumn CardsZig Zag LayoutBlog Layout

Google

Google ChartsGoogle FontsGoogle Font PairingsMode

Converters

Convert WeightConvert TemperatureConvert LengthConvert Speed

Switching your application theme is getting more and more popular in recent years. APEX apps and their users are no exception. Most of our devices support this feature, APEX itself introduced dark and light mode for the Application Builder too. I am going to show you a quick way of integrating it into your application.

Possible use cases of theme switching

  • Manual option for the user to switch between dark and light mode
  • Automatic theme switch, based on your device (laptop, smartphone, etc.) settings
  • Automatic theme switch, based on the time of the day (light during the day and dark during the night)
  • A hybrid solution, where user can manually switch or select some of the automatic switch settings

This tutorial will cover a hybrid solution, including a manual change of the Theme Style and an automatic one, based on user’s device settings.

Possible approaches to the task

  • The first approach will be to create two seperate Theme Styles in your app, with one global.css file for the common styles. The style changes will be detected on page load, using Dynamic Actions and User’s preferences will be kept using Application Settings. This approach is described in the steps below. For the other approaches, there will be another blog post, going step-by-step.
  • The second approach would be with one Theme style only, but different CSS files for the Light and Dark theme. For example one common global.css (like in the previous approach) and two more files – light.css and dark.css. Depending on the themes selected, only one of the two files is loaded dynamically. To achieve this, use apex_theme.set_session_style_css procedure – See documentation here.
  • … And a third approach – this is what APEX is using itself for changing the Builder theme style – CSS only approach, using something similar to this: https://css-tricks.com/dark-modes-with-css/. In this case you will have only one global.css file, but have the theme detection inside:

CSS Only Approach

  • Create a file, named global.css in Shared Components > Static Application Files. The path to your file could be something like #APP_IMAGES#css/global.css. Put the following styles inside.
  • Go to Edit Application Properties, switch to User Interface tab, scroll down to Cascading Style Sheets section and add the following line – #APP_IMAGES#css/global#MIN#.css. This will include your CSS file on every page of the app. What the #MIN# part is doing is switching between the regular and minified version of the CSS file, depending if you are logged into the Builder or not. If you are logged in as a developer, you will be able to view the regular CSS and easily debug it. If you are just a user of the app, you will be served the .min.css version, which is compressed, takes less space and loads faster, but is not suitable for development and debug purposes. All that is a new feature of Oracle APEX, which is very cool and I highly recommend using the #MIN# syntax.

With this setup in place, your application will switch your background colour and text colour, as soon as the colour scheme of your device is changed – no waiting, an immediate change! Cool!

Switch two Theme Styles Approach

I have chosen the approach with one, common for all the styles, CSS file in Static Application Files, called global.css and two seperate theme styles, created using Theme RollerLight Theme and Dark Theme.

Global.css would keep all the custom CSS we have in our app, except for the colour specific styles. They will be kept in the Custom CSS part of the Light and Dark theme in Theme Roller.

2. Create Application Settings

The Application settings will help keeping the User preferences for Theme Style Mode and Theme Style Name. To create new application settings, go to Shared Components > Application Settings. Then create two new settings, named THEME_STYLE_MODE and THEME_STYLE_NAME.

The Application settings are read and written using the following methods:

3. Create Application Items

From Shared Components > Application Items, create two new items – G_THEME_STYLE_MODE and G_THEME_STYLE_NAME.

Sourcetree Dark Mode Macos

The Application items we created on step 3, will be populated with default values, when the user is logged into the application. Those values will be taken from user’s preferences which we created in step 2.

  • Computation Item – G_THEME_STYLE_MODE
  • Computation Point – After Authentication
  • Computation Type – Expression
  • Language – PL/SQL
  • Computation –
  • Computation Item – G_THEME_STYLE_NAME
  • Computation Point – After Authentication
  • Computation Type – Expression
  • Language – PL/SQL
  • Computation –

5. Create Application Processes

We will need one Application Process to check if a Theme Style has been changed by a Dynamic Action on page 0. If so, the process will change a flag and indicate that a reload is needed.

  • checkThemeRefreshA Radion Group type again, with two static values – Dark Theme and Light Theme. And a default value – G_THEME_STYLE_NAME.

Server-side condition will be the following:Process Point : Ajax CallbackName : checkThemeRefreshLanguage: PL/SQLCode:

6. On Page 0, create some global regions and Dynamic Actions

  • P0_THEME_STYLE_MODEIt can be a Radion Group type, with two static values – Dark Theme and Light Theme. And a default value – G_THEME_STYLE_MODE.

  • P0_THEME_STYLE_NAMEA Radion Group type again, with two static values – Dark Theme and Light Theme. And a default value – G_THEME_STYLE_NAME.

Server-side condition will be the following:

Type : Item = Value
Item : P0_THEME_STYLE_NAME
Value: manual

This way, the item will be hidden if we are not selecting the Theme Style manually.

  • P0_CURRENT_THEME_CHANGED and P0_CURRENT_THEME_STYLEThose will help us know if the theme has changed. They are later used in some of the Dynamic Actions. Their type is Display Only, because otherwise (as a hidden item for example) they will not be available with using JavaScript (and we nwill need that).

Apne tv serial hindi drama. 7. On Page 0, create some Dynamic Actions

  • onLoad - Auto switch Theme Style (device)

Event : Page Load

Client-side Condition
Type : Javascript expression
Javascript expression :

Server-side Condition
Type : Item = Value
Item : G_THEME_STYLE_MODE
Value: device

True

Mode
  • Action : Execute Server-side Code
    Language : PL/SQL
    PL/SQL Code:

Microsoft Edge Dark Mode

  • Action : Execute JavaScript Code
    Language : PL/SQL
    PL/SQL Code:

False

  • Action : Execute Server-side Code
    Language : PL/SQL
    PL/SQL Code:
  • Action : Execute JavaScript Code
    Language : PL/SQL
    PL/SQL Code:
  • onChange - Switch theme style name

Source Insight Theme

Event : Change
Selection Type : Item(s)
Item(s) : P0_THEME_STYLE_NAME

True

  • Action : Execute Server-side Code
    Language : PL/SQL
    PL/SQL Code:

Items to Submit : P0_THEME_STYLE_NAME
Items to Return : P0_CURRENT_THEME_CHANGED,P0_CURRENT_THEME_STYLE,G_THEME_STYLE_NAME

  • Action : Submit Page
  • onChange - Switch theme style mode

Event : Change
Selection Type : Item(s)
Item(s) : P0_THEME_STYLE_MODE

True

  • Action : Execute Server-side Code
    Language : PL/SQL
    PL/SQL Code:

Items to Submit : P0_THEME_STYLE_MODE
Items to Return : G_THEME_STYLE_MODE

  • Action : Submit Page